Reduce height of featured image

Hey guys

I refer to this previously posted topic: https://colorlibsupport.com/t/feature-image-to-show-only-a-part-of-it/

I’m a newbie with wordpress. I really like sparkling and will use it for my homepage. Thanks you colorlib for this theme.

My Problem: I managed to customize the theme by adding a child theme. Like theinformant, I’d like to reduce the height of the featured images (on the homepage and in single-post) to 275px (fixed and forced). The image should be centered and the (eventual) overflow on left and right side should be cut off/not showing.

I tried the provided code from above in my child theme’s CSS and edited it, but it didn’t work. Do I have to add something to functions.php, too? I’d be very thankful for advice, Aigars. Thank you in advance.

I answered your questions here. However, I forget to mention that you will have to use regenerate thumbnail plugin once you change image size because images that are already on your website will not be resized automatically. For new images everything will work just like it should.

Thanks Aigars, the provided snipet for functions.php and the regenerate thumbnail plugin worked like charm. Time invested until i asked you: 2 hours. Time to do the job after your advice: 5 minutes. Thanks a lot!

Glad I could help!

Let me know if you have any other questions.

I’ve got a lot of questions, but that’s what makes it a challenge. And I think, I will be able to solve most of them on my own… some day :slight_smile:

But maybe you can give me some hints anyway about (at least for me) bigger problems:

  1. On my website in single page view there’s no comma between the listed categories. I couldn’t find the problem in php-files. As far as I see, there should be a comma because of this part of sparkling’s content-single.php. Where’s the mistake?
<?php
					/* translators: used between list items, there is a space after the comma */
					$categories_list = get_the_category_list( __( ', ', 'sparkling' ) );
					if ( $categories_list && sparkling_categorized_blog() ) :
				?>
  1. Where or under what reference/name do i find more information about the grey header used on colorlib website (see above, after main menu, “page-header”). Is it possible to integrate such a second header in sparkling via child theme?

  2. I already managed to make my header sticky. If I scroll down it just stays on top. Your’s seem to work different as it appears after some scrolling. Did you use an external plugin for that or is this made via CSS, too? (

(The last problem with sticky header seems to be the same on my website and on colorlib website: When logged in and screen width is smaller than 300px the admin bar slides out of sight since wp 4.1, but the sticky header remains with a padding-top of 42px. I have no idea how to solve this.)

Have a good day and thanks for every little tipp about the mentioned questions.

  1. If there are at least two categories for your post then there should be comma and that code is correct. Are you not confusing Tags with Categories? Categories are at the top of the page and tags are at the bottom.

  2. To add top-bar on top of navigation you should add your code right below this line of code in header.php

<header id="masthead" class="site-header" role="banner">

Of course you can get done this via Child Theme. Just copy/paste header.php file to Child Theme and edit it there.

  1. This might help to resize menu when you scroll but we are using a slightly different approach for our website but it will be difficult to adopt for Sparkling. http://www.bootply.com/109943 This solution is alreayd based on Boostrap and is very basic, so it could make things easier for you to understand how it works.

  2. Use CSS media queries to hide and resize elements based on device screen size. There are plenty of great tutorials about CSS media queries out there. For example you can start with this one.