Featured image resolution on blog page

Yes, the fix is pretty simple:

You’ll need to first create a child theme (so you don’t have to do this more than once). Here are step-by-step instructions on how to do that.

Then, add an empty file called functions.php to the child theme. Once the file is created and included in your child theme, paste in the following line of code:

add_image_size('blog', 1200, 800);

That will override the smaller “blog” image size being used. The first value is the width and the second is the height (in pixels). You can change them to whatever you’d like – the images are loosely cropped around those values.

The very last step (bunch of steps sorry!), is to activate and run a plugin called Regenerate Thumbnails. This will apply the new “blog” image size created in your child theme’s functions.php file.

Then you’re good to go ??

Hmm, I can’t seem to get it to work.

I’ve created the child theme and added style.css and functions.php to the folder. I’ve then added the line of code to functions.php, before zipping the folder and uploading and installing the child theme.

After regenerating the thumbnails with the plugin, it still looks the same. And when I use the Post Thumbnail Editor plugin to check the sizes of the thumbnails, it still states that the blog thumbnail is 600 x 460.

What exactly is functions.php supposed to look like, when I view it in the editor? In case I’m missing something obvious, I’m honestly not that familiar with PHP.

Thanks a lot!

Good question, the functions.php file needs an opening php tag in it as well, so the complete code should be:

<?php add_image_size('blog', 1200, 800);

You can edit this directly in your dashboard through Appearance > Editor. Make sure you also activated the child theme after making this edit.

Let me know how that works, thanks for your patience!

Hmm, no, I already put the opening tag in there.

For a moment I thought it had something to do with cached images, but clearing all browser data didn’t do anything at all.

When I view the thumbnails of an image in the Media Library with the Post Thumbnail Editor, it displays the size for the blog thumbnail as 700 x 350. It used to display 600 x 460 for the same image, but I don’t think that’s because of the child theme’s function? I put 1200 and 400 in the code. The Tracks theme was just updated, wasn’t it, so I thought it might be because of that?

Anyway, I’m sure of what I’m doing wrong.

Okay I see the issue now.

I didn’t realize the child theme’s functions.php was called before the parent’s. Replacing your existing code with the following will override the image size:

function ct_tracks_child_image_size_update(){
	add_image_size('blog', 1200, 800 );
}

add_action('init', 'ct_tracks_image_size_update');

You will just need to run Regenerate Thumbnails one more time after that update.

Still nothing… Blog thumbnail size still 700 x 350, after regenerating thumbnails.

Also, something else happened (independent of this): now, the featured picture of a post has different dimensions. It’s no longer ultra wide (around 550 px high with 1920×1080 screen resolution and maximized browser window size), but instead takes up a lot more window space (around 850 px high, same width). The cropping works nicely, but you have to scroll way more to see the actual post. Does this have something to do with the update, or is it something I’ve done?

Sorry for being such a bother. Thanks a lot for your help!

Sorry, sloppy error on my part. The function names aren’t the same in the snippet I provided. This will work:

function ct_tracks_child_image_size_update(){
	add_image_size('blog', 1200, 800 );
}

add_action('init', 'ct_tracks_child_image_size_update');

The image size was adjusted a bit on the post page in the newest version, so it should now be exactly 2:1 at all screen widths. If the image size issue persists, could you send me a link to it on your site?

Oh, I should’ve seen that myself!

Now it works perfectly! Thanks a lot for all the help. I love the theme, but I like the support for it even better ??

Oh, while I’m at it I have another question, but I’ll post that in a separate thread to keep the forum nice and tidy.

Awesome, I’m happy to help!

Worked great for me as well, thank you so much!

Ok..I was able to delete the child theme, and re-upload it after placing the functions.php file in it. I activated the child theme, ran the Regenerate Thumbnail plugin.

But still I have the 2 problems-
1. The image on the pages and post are a smaller size compared to what I had uploaded
2. The featured image on the blogs/posts are looking really wide compared to what it was originally..

Can you help? Again, excuse me if these are really simple questions..tough being a novice ??

BTW:
Regenerate Thumbnails is causing some problems for me. After the plug in added code to the function.php file my theme crashed. Only a white screen. Must be something in the code. Just in case other users have a similar problem ??

@paul thanks for letting us know

@padhs2k The images in the newest version have been modified slightly to stay at a consistent 2:1 ratio on post pages. Tracks will show the full image as large as it can in the space available. For instance, the full image will be shown at 320px wide on an iphone, but much larger (~1100px) on a laptop/desktop.

On the blog and category pages, the size of the image is dependent on the content in the post. So for example, a post with a long title will be taller on the blog which will give the image a larger space to fill, and thus be taller.

I hope that helps clear things up. If you’re still having trouble, could you send me a link to your site?

Hi Ben,

Thanks for your prompt response! You are awesome!
Sorry I was busy for a while, so couldn’t get to this sooner.

My site is https://cupofguilt.com. Can you let me know whether the images on the home page and the post pages are of the consistent size like you mentioned?

I seem to remember in the previous version, the featured images were not this big. Since I altered the files in the child theme I wasn’t sure whether this was making the images big, so I got back to the parent theme again ?? So its currently on the parent theme.

Again, I love the theme but getting to know how to use it still…

Just checked your site – great use of the secondary menu!

Everything looks good. On the homepage, some of the images are on the tall side because of long titles and the social icons under the ‘read more’ link. The image simply needs to fill the space on the other side which means it gets a bit tall in that case.

On the post pages, the images are appearing exactly at the 2:1 ratio. Given that space, the theme will crop out parts of the image that don’t fit instead of stretching and pixelating the image. For instance, this post has an image that is 1.89:1, so the very top and bottom of the image get cut off a little bit.

Could you tell me what size screen/monitor you use?