Masonry layout with images

Tagged: image block, masonry

This topic has 2 replies, 2 voices, and was last updated 2 years, 1 month ago by elvin.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
February 12, 2021 at 3:42 am #26664

Simon
Participant

Hi

A question about image blocks within posts when displayed using Masonry layout.

We’re using the WPSP pro masonry layout, which looks great. The posts of different lengths fit beautifully together like masonry. Love it!

However, the layout seems to make sizing errors (overlapping the displayed posts) in some browsers IF some of the posts contain an image block within the post content. (All our post lists are set to display in ‘full’ in WPSP; there is no problem with featured images.)

The only way we have found around it so far, is of course to put the image after a ‘More’ break, so that it doesn’t display within the WPSP masonry presentation. (For some pages we have had to use rows rather than masonry, which works fine if the posts are similar length.)

But there are times on the masonry layout pages when we need to display images (such as the logo of a content provider) in a full post display, or before the ‘More’ break.

So I’m wondering if you can help. Have I missed something? Is there a simple way of ensuring the Masonry layout knows the size of the image in its calculations?

Thank you and best wishes
Simon

February 14, 2021 at 12:44 pm #26760
Simon
Participant
Explaining the problem somehow always helps to find a solution… Please tell me if you have a better one, or if I somehow created the problem.

I realise image height is the issue here: WPSP masonry needs to know it.

So for now I have fixed the height for all .wp-block-image images when they display within the wp-show-posts content.

I’ve set the height at 180px. It’s small, but not a problem for 3 and 4 column layouts with the column widths at max 640px: the images look about the right size.

With the image height set at 180px, I set the width to auto, and then used object-fit:scale-down to retain the original image ratio (ie contained within the 180px hight and available width). (I am losing the fine border set for the image, because the object-fit setting can leave the border separate from the image.)

CSS code I’ve used is
```
article.wp-show-posts-single figure.wp-block-image img,
article.wp-show-posts-single .wp-block-image figure img {
	max-height: 180px;
	height: 180px;
	width: auto;
	opacity: 1;
	object-fit: scale-down;
}
```
Is this a sensible solution? Or is there a better one?
Thank you and best wishes
Simon
February 15, 2021 at 2:50 am #26786

elvin
Moderator

Is this a sensible solution? Or is there a better one?

It’s definitely a sensible solution as setting a fixed height makes it easier for the masonry script to calculate the positioning relative to the sizes of the articles.

Thank you for letting us know. Glad you got it sorted.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

[Support request] Masonry layout with images