same image height - portfolio masonry blog style

Heilstollen · March 2021

Hi,

I would like to have the same image height for all portfolio items masonry blog style.

I tried to set it like this:

.img.scale-with-grid, #Content img { height: 330px }

but it affects all images on the site.

Could you recommend a better approach?

Thanks in advance,

Miguel

Background: The source images have different ratios. The grid portfolio won't display the excerpt, so is not an option. Masonry blog style could work, and I already figured out how to limit the excerpt, but the images should have the same height.

Phil · March 2021

Hi,

To change the size of the images used in portfolio/blog, please navigate to theme options -> blog, portfolio & shop -> featured image.

Notice!

Remember to use thumbnail regeneration after you make your changes. Otherwise, the images will not change their size.

Thanks

Heilstollen · March 2021

Thanks!

I did it for the Blog & Porfolio; I set the new width and height (440x330), select "Resize & Crop", save changes.

Then Installed the Regenerate thumbnails plugin and Forced Regenerate Thumbnails from the Media Library for the items involved.

The images will be resized, BUT they won't be cropped - also some images will have a different height than 330px, depending on the ratio of the image. I need the images to be displayed/cropped with same height (330px) in the Portfolio Masonry Blog Style.

Pablo · March 2021

Are you sure that all of your images are having minimal height value of 330px (declared value) ?

If they are smaller than declared width and height, then they will stay at the same resolution, they won't be even touched.

Thanks

Heilstollen · March 2021

Thanks Pablo,

Yes, the original images are having a bigger height than 330px.

However it seems they won't be cropped with that heigh if the ratio is smaller than 3:4 (for my setting of 440x330). Only linking a featured image with that ratio or bigger will get me the result that I need.

Probably is because the function first resizes the width and then crops.

Thanks anyway,

same image height - portfolio masonry blog style

Comments