[Feature Request]: Reduce the size of the featured image

[counterfitninja]

Feature Description

I have used a number of themes and the feature image is way larger than the actual file size. Is there a way to reduce the features image size on a page?

[bobmitro]

Moved from the Publii repository to the discussion, as this is not related to the app. The image sizes can be configured through the config.json file of the theme. You can find more information on how it works in the developer docs.

[counterfitninja]

Thanks @bobmitro I knew it wasnt an issue but didnt notice the discussions tab.

I did look through the Developer Docs and it didnt see clear as to what i needed to alter to reduce the Hero image size, but ill take another look and see if i can work it out.

[candidexmedia]

Just to clarify: are you talking about the dimensions (ex: 1080 pixels x 1080 pixels), or the size of the file in terms of kb and mb?

[counterfitninja]

The Dimensions of the image. I know responsive images create multiple copies. What i want to avoid is this massive Hero image https://www.1stand7thfromescouts.org.uk/centaur-hike/

[candidexmedia]

Which theme are you using?

Not sure how comfortable you are with Inspect Tools and CSS, but I'd recommend just manually decreasing the width sizing, or hiding them entirely:

.post__featured-image > img {
	display: block; /*change to `none` to hide the hero images*/
	height: 100%;
	width: 100%; /*Tweak the percentages, or unset this value to use the image's actual dimension*/
}

Some themes let you pick the size of the hero image (Mercury, for example), and I'll usually add a Post Settings option to hide hero images. This way, I can turn it off for some posts and not others:

Here are my instructions on how to add "None" option for hero images (old forum).

[counterfitninja]

Wow.. thank you for your in depth reply. The site is using the TechNews theme and i dont think there is a featured image with in the config. I did start to look at creating my own override files for this so once i have a solution would look to go that route.

Im not a coder but i know my way around websites etc ( engouh to be slightly more than dangerous) so ill take a look at what looks like excellent examples you have sent and hopefully this is all that i need.

Many Thanks

[candidexmedia]

No worries!

Since you're using a theme that doesn't have Featured Image presets in the Post Options, the instructions I sent might not be relevant, since it leverages the existing Theme Settings API. You would have to add those options in manually, which is doable but requires a few steps. For now, I think some simple CSS tweaks (either with overrides or in the GUI) should fix things.

Don't hesitate to post in the forum if you have any further customization questions!

[counterfitninja]

I just added the following as a CSS override. Thats enough for now for what i want to do. If i have some time i may look to add Feature image post options so i can have some more control.

.post__featured-image>img {
display: block;
height: 100%;
width: 300px;
}

[counterfitninja]

Thank your for your help. I found that adding.

.post__featured-image>img {
display: block;
height: 100%;
width: 300px;
}

to the customer CSS will override the size and for what i want makes the hero image a much more managable size.

Thanks you