-
Posts
-
Please look at the Highlighted News section on the home page here.
The first post (Test Headline…) has a Featured Image set using a portrait image sized at 311 px by 467 px, a 1:1.5 aspect ratio.
The second post (Tesco and Nomad…) has a Featured Image set using a landscape image sized at 700 px by 467 px, a 1.5:1 aspect ratio.
In other words the height of each original image is the same, but one is wider than the other.
In the Blog Grid the Tesco… thumbnail has correctly been reduced to 80 x 53 px, keeping the aspect ratio at 1.5:1
The Test Headline… thumbnail should have been reduced to 35 x 53 px to match the height of the thumbnail in the Tesco… post, but as you can see the thumbnail is too big, being 53 x 80 px.
How can I get the portrait image thumbnail to display as 35 x 53 px so that the thumbnail heights match?
Hey zimbo,
Try the following:
1. Install this plugin: https://wordpress.org/plugins/simple-image-sizes/
2. Go to Settings > Media
3. Change theattachment portfolioimage size (increase its width / height).
4. Regenerate the thumbnails by clicking the button at the bottom.Best regards,
YigitHi Yigit
I have that plugin installed as I was looking at resizing other images, but I do not have an ‘attachment portfolio’ image size listed, I only have a ‘portfolio’ and ‘portfolio_small’ size – did you mean either of those?
Hi,
Confused by this suggestion I’m afraid: portfolio size is currently set as W 495 H 400 px and this is the image that is being used in the Top Stories section for the Tesco… post, yet it appears as if it’s the following line of ‘<span class=”image-overlay…’ that is setting a W 240 H 185 px boundary to somehow to reduce/resize the image. So how will altering the size of the portfolio image itself change anything?
And that image/post is not the problem, it’s the Test Headline… post to the left where the portrait image being used is W 311 H 400 px (i.e. smaller than the Tesco… image) but the image-overlay is set to W 240 H 295 px which is larger than the Tesco… post with the consequence that a smaller image is displayed as a bigger thumbnail on the page – see here.
The images are being resized on the fly so surely the image-overlay on the Test Headline… post (or whatever controls the resizing) should be set as W 145 H 185 px, not W 240 H 295 px, to create an inverse aspect ratio for this thumbnail in relation to the Tesco… thumbnail but more importantly to have both thumbnails the same height in the Blog Grid?
Hi,
Did you set the Preview Image Size settings of the blog posts element to manuall? If yes, what is the thumbnail that you set? If you want to force the images to be resize to the exact dimension specified in the thumbnail, go back to the “Simple Image Sizes” panel then tick the “Cropping” option to “Yes”. Regenerate the thumbnails afterwards.
Best regards,
IsmaelHi,
I do not have the Preview Image Size set to manual, it’s auto.
Why is the portrait image (Test…) is displaying nearly 50% bigger than the landscape one (Tesco…)? The original portrait image is about half the size of the landscape image, the thumbnail Enfold is choosing is also smaller yet the image-overlay (if that’s what’s doing the resizing) is 50% taller, hence the image in the post on the left is 50% bigger than the post in the centre. In a Blog Grid like this I think the same image height should be the primary aspect so that the grid images line up in a row horizontally. Is this possible?
Hi,
Alright. Please set the Preview Image Size to manual then select the thumbnail size. Play around with the settings until you find the best thumbnail size for your setup. Or upload images with the same size and aspect ratio for every posts.
The images have the same height but the “test” image is narrower than the other images so it doesn’t have to be resize via css to maintain its aspect ratio.
Best regards,
Ismael
- The topic ‘Blog Grid thumbnail aspect ratio’ is closed to new replies.