How do I set Blog post images to thumbnail size in Lodestar?

mattvjacobs · Member · Sep 29, 2021 at 3:00 pm
Copy link

Add topic to favorites
Hi,

On my blog page, which is called ‘Views’ on my website, the images for each post are very large, despite being relatively small in terms of pixels e.g., 600 x 400. How do I get Lodestar to display them as thumbnail size?

The blog I need help with is: (visible only to logged in users)
aisajib · Member · Sep 30, 2021 at 4:59 am
Copy link
Hi there!

I checked one of the featured images from your posts and I found that they are quite large (larger than they appear on the site). Take this image for example. It’s 5200 x 3744 pixels. If you wanted them in a smaller size, please resize the image.

We have some instructions for optimizing images before uploading on this page: https://wordpress.com/support/media/image-optimization/

Also, please note that your WordPress.com Premium plan gives you access to live chat support during the weekdays. Please go to https://wordpress.com/help/contact to start a live chat with us if you have more questions.

Regards
mattvjacobs · Member · Sep 30, 2021 at 9:46 am
Copy link
Hi,

Thanks for this. I’ve downloaded Gimp and optimized the image you selected according to the guidance on the support site but it still appears to be the same size visually on the ‘Views and Opinions’ page. Is there anyway to get these images on that page to appear as thumbnails?

Matt
aleone89 · Staff · Sep 30, 2021 at 11:33 am
Copy link
Hello Matt,

Happy to help you with this.

Is there anyway to get these images on that page to appear as thumbnails?

You could try adding this CSS.
```
/*Change blog featured img size AL */
.post-thumbnail img {
    height: 600px;
    width: auto;
}
```
In order to keep the ratio of the images, you would need to set the width to be auto (or vice versa).

I hope this helps.
mattvjacobs · Member · Sep 30, 2021 at 4:17 pm
Copy link
Hi there,

Thanks for this. I’ve tried adding the code you suggested to the Additional CSS section, but it doesn’t seem to have made a difference….?

Thanks

Matt
staff-doublebassd · Staff · Sep 30, 2021 at 6:25 pm
Copy link
Hi there,

You would need to change the number on the height to a smaller size to make the images smaller.600px is the current size before any changes. I would say about 200px would be a good thumbnail size, but you can play around with the number to find your preferred size. Each image is a different size, so you should keep the width at auto.

Hope this helps.
mattvjacobs · Member · Oct 1, 2021 at 8:22 am
Copy link
Brilliant! I now have control over these images!

Many thanks

Matt
mattvjacobs · Member · Oct 1, 2021 at 9:15 am
Copy link
Hi again,

A slightly different picture related question….

When I view my website on my ipad, it is fine in portrait but when I turn it too landscape it zooms into all the header/featured images to the extent that they are just a blurred mess. How can I stop this from happening?

Thanks

Matt
aleone89 · Staff · Oct 1, 2021 at 11:47 am
Copy link
Hello Matt,

That does sound odd, is this what you’re seeing here (just to check):

I can see the header image moves slightly but I don’t see any pixelation there.
mattvjacobs · Member · Oct 1, 2021 at 1:29 pm
Copy link
Hi,

It doesn’t seem to do it on the Views and Opinions page, for some reason. It does it on all the other pages, though, and looks worst on the Homepage. So it must be something to do with the header image and the featured images. I can’t see how to up load pictures in my reply to you. So, I can’t show you waht I mean here but if you look at the homepage on an ipad in landscape and then flip it to portrait view, you should see what I mean.

Thanks

Matt
aleone89 · Staff · Oct 1, 2021 at 3:17 pm
Copy link
Hello Matt,

Hmm, I’m unable to replicate thus far. A screenshot would be handy if possible.

This can be shared via https://snipboard.io/.

What model is the Ipad?
mattvjacobs · Member · Oct 1, 2021 at 5:44 pm
Copy link
Hi,

Can you see these images? The first two are in landscape, the second two are the same page but in portrait. I’ve got an iPod Air (4th Gen)
staff-doublebassd · Staff · Oct 1, 2021 at 8:11 pm
Copy link
Yes, thank you for sharing these – I do see the pixelation on some of the images for sure. On the iPad, are you viewing your site from a browser or from the WordPress app? If the WordPress.com app, what version are you currently using?
mattvjacobs · Member · Oct 2, 2021 at 8:02 am
Copy link
Hi,

I’m viewing the page in the browser on my ipad.

Thanks

Matt
fstat · Staff · Oct 2, 2021 at 8:34 am
Copy link
What version of iPadOS are you on?
mattvjacobs · Member · Oct 4, 2021 at 8:11 am
Copy link
It’s version 14.7.1
aleone89 · Staff · Oct 4, 2021 at 10:53 am
Copy link
Hello there,

Thank you for all of that information, it’s helped us to replicate the issue successfully.

After doing some research internally, it looks like this is a known issue, and I’ve added this report to the tally so rest assured it’s on our radar.

Thank you for your patience whilst we work on that for you.
mattvjacobs · Member · Oct 5, 2021 at 10:24 am
Copy link
Thank you all for your help with this. I look forward to hearing what the underlying issue is and how to resolve it.

Thanks

Matt

No items found.