Is it possible to display the height of all images the same size in Essential Grid?

Support
#1

Hi, I haven’t had much experience with Essential Grid and I’m finding it hard to find out how to do it so all the heights of the images are the same, without having to crop them all in photoshop first! Is there a setting in the skin editor where I can set the height for the images? I can’t find it anywhere!

Here’s the URL - you’ll see there are a couple of images that are way taller than the others, I’d like these to be the same height!

Thanks!

#2

Hey @core365,

Regretfully, there is no getting around this case. You will either need to crop your images in Photoshop or in WordPress.

If you choose WordPress, please see this guide: https://www.wpbeginner.com/plugins/how-to-crop-and-edit-wordpress-post-thumbnails/.

You can also choose a uniformly sized version of your images like Thumbnail and Medium in the Source Size setting under the Source tab. Just note that WordPress crops images in the center out of the box so you might want to manually adjust the cropping for each of your images using the method mentioned above.

Thanks.

#3

Hi, I tried changing the Source Size but it didn’t make any difference. Is it because it’s taking the info from a post as it’s not a custom grid and that the image is a Featured Image? Is there any way that CSS would be able to set the height to a certain size for all the images, as our client will be adding in more members of staff themselves and won’t be able to crop the images.

Thanks!

#4

Hi, it’s fine, I’ve come across an old post from ThemePunch which involves adding CSS in the Skin Editor and it’s sorted it!

https://www.themepunch.com/faq/masonry-grid-layout-with-even-image-heights/

/* default max height */
/* this number should be the smallest image height used in your grid */
.esg-entry-media-wrapper, .esg-entry-cover {
    max-height: 260px;
}
 
.esg-cc {
    top: 0 !important;
}

Thanks for your time and help!

#5

You’re welcome. Glad that will work for you. I just thought you won’t like the result (see secure note). Though you actually can make them the same size, you need additional code to fix each of those misaligned images. That’s why I recommend that you crop properly. You could also save some page load time because you’ll be using smaller images.

#6

HI, thanks, however I can’t expect my client to crop pictures to an exact size as it’s something they’re not familiar with doing - I wouldn’t expect them to have to do it anyway, as I thought that setting the height images are displayed in Essential Grid would be a standard function to be honest and it would be very useful!

Cheers

#7

Hi @core365,

I think it depends on the setting, example, of your grid setting is set to EVEN then it should have the same sizes. Plus, it’s Wordpress that do the cropping and resizing and not the theme or plugins, and cropping will only work on newly uploaded images. Hence, you will have to regenerate the thumbnails using a plugin to generate new images from old images.

I just tried the even layout and I’m getting the same size images.

Thanks!

#8

Ah ok, that’s a shame as I just think it’d be less confusing if it could be managed within the plugin!

Thanks for your help!

#9

Hi there,

That’s within the Essential Grid plugin.

Thanks!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.