Change thumbnail related posts in single post page

[NiO]

Hi Swiftideas,

I would like to change the thumbnails used in the related posts section on a single post page to square ones (instead of the default 3 by 2 ones). What is the most simple way to do that?

Many thanks!
Johan

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide the link to that post?
If I understand correctly you only want to do it in 1 post.

We may find some css to turn it more “square” but guess it would stretch a little bit the image. we can try to see how it looks.

-Rui

[NiO]

Hi Rui,

No, it would be for all posts. I was referring to the “related articles” section which is an optional single posts template part (see screenshot attached). The 3×2 size doesn’t work very well for photography blogs, so was hoping to be able to change them to 3×3 thumbs without distorting them 🙂

Thanks,
Johan

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

That way we may try to change the size for all, if it was for only one that would be more complicated.
Will check what is necessary and get back to you.

-Rui

[NiO]

Many thanks for picking it up Rui!

[Rui Guerreiro – SUPPORT]

Hi,

Try to add this code to the functions.php of your child theme.

function sf_custom_height_related_articles(){
     return 270;
}
add_filter('sf_recent_post_item_thumb_height', 'sf_custom_height_related_articles');
add_filter('sf_recent_post_item_thumb_width', 'sf_custom_height_related_articles');

-Rui

[NiO]

Hi Rui,

That worked perfectly Rui. Many thanks!

Now I have one last question: Why does the responsive css for the area stop around a min width of 768? Above that size you have a width of 25% for each thumb and float set to left. Below it you go to 50% first, but with float disabled. So 4 50% thumbs show up underneath each other. Around 479 you go to 100%.

I would have expected 2 thumbs next to each other in the intermediate step. It can simply be done by turning the float on for that step.

But maybe there is a reason for it that I don not see!?

Cheers,
Johan

[David Martin – Support]

Hi,

At 479 width, the 100% width kicks in as having two columns of posts could be a very tricky user experience if you use a combination various post formats.

Let us know if you would need any help with the CSS to change this.

Thanks,
David.

[NiO]

Hi David,

Managed to include some responsive css to deal with it 🙂 Will keep an eye once I start using alternative post formats!

Cheers,
johan

[David Martin – Support]

Ok, great to hear that Johan.

Thanks,
David.