[Christine]

Hello,

In the Catch Wheels Pro theme, how can I modify the thumbnail size for the Event’s section on the homepage? The default thumbnail size is 480 x 480. I would also like to ensure consistency with the thumbnail size when viewing a category in list view too, which the default is 470 x 353.

Any assistance would be greatly appreciated.

[sujeet]

Hello @nepeanraceway,

For that you will need to create and use a child theme and do a little bit of customization.

Please Go to => Child Theme Folder => functions.php and add the following Code.

function add_new_image_sizes() {
   remove_image_size( 'catch-wheels-service', 480, 480, true ); // 1:1 Image Ratio - Used for Services and Event Section
   add_image_size( 'catch-wheels-service', 470, 353, true ); // 4:3 Image Ratio - Used for Services and Event Section
}
add_action('init', 'add_new_image_sizes');

And then regenerate the thumbnails using a plugin.

Let me know if this worked!

Regards,
Sujeet

[Christine]

Hi Sujeet,

If it’s easier for you. I’m happy for them to both be 480 x 480 if there is a simple code I can add to the themes CSS. Just want both thumbnails the same size for consistency.

Let me know if this would be easier.

[sujeet]

Hello @nepeanraceway,

Please try adding the following css code for making blog post image of aspect ratio 1:1.
This will make the images square like 480×480. But the code will crop the images a bit by sides. Please add and check if this is good for you.

#infinite-post-wrap .hentry .post-thumbnail img {
   aspect-ratio: 1/1;
   object-fit: cover;
   width: 100%;
}

Let me know if this worked!

Regards,
Sujeet

[Christine]

Hi Sujeet,

Unfortunately, this did not work. It has made the image in blog post category list view super large image having it cut off around all edges.

I will DM you the web address so you can see for yourself.

Thanks!

[Christine]

Hi Sujeet,

I can’t seem to direct message you here. Here is the web address in question.

https://nepeanraceway.com/category/events/

The photo that I have uploaded to the media Library is exactly 480×480. It looks perfectly fine in the events view on the homepage but then you go to the list view via the category view it’s not the same size, hoping to make it 480×480 to keep it consistent.

Appreciate your help!

[sujeet]

Hello @nepeanraceway,

I got your point, but please understand that with css you can’t achieve that. You must try the first option that I provided you. If you want to make images of same size in both condition then please try the option below:

1. If you are using Main theme (not child theme)
=> First go to Appearance => Theme File Editor => Functions.php, there you will find predefined image sizes. You can change set_post_thumbnail_size( 470, 353, true ) to set_post_thumbnail_size( 480, 480, true ) , save the file and you must regenerate thumbnail using a plugin available.

Note: What you must understand is the changes will be removed once you update your main theme.

2. If you use child theme
=> Acivate your child theme
=> Go to Appearance => Theme File Editor => Functions.php, Now you have to add the following code there:

function custom_thumbnail_size() {
   set_post_thumbnail_size( 480, 480, true );
}
add_action('init', 'custom_thumbnail_size');

save the file and you must regenerate thumbnail using a plugin available.

We suggest you to use child theme and make the changes. It is safe for your website and future updates.

Also remove the css code that I provided you above.

Please let me know your thought. Thank you.

Regards,
Sujeet

[Christine]

Hi Sujeet,

Unfortunately both options didn’t work. I ended up selecting “Show Excerpt (Image Top)” under the “Archive Content Layout” heading in Appearance -> Customise -> Theme Options -> Layout Options. This would show the full image size 480×480 on top but doesn’t seem to work if you select “Show Excerpt (Image Left)” or “Show Excerpt (Image Right)” oddly, even with “No Sidebar: Full Width” layout selected. You can take a look again and you will see the changes.

It’s a shame, but I appreciate your help.

Thank you.

[sujeet]

Hello @nepeanraceway,

So surprised that the options didn’t work for you, but we tried and tested both, work fine in our end.

But again, whenever you use a theme, I suggest you to create and use a child theme from next time. It will be easier to make changes and future updates.

Hope you understand. Thank you so much.

Please feel free if you need any further assistance.

Regards,
Sujeet

[Author]

Posts