Docs

[sasocreative]

Awesome theme. Very versatile.

I am currently using X to do a touch screen installation for a small regional art gallery (cartoons). Each cartoon is a post. As such, the feature image is the main thing that people want to look at.

Is there a way to set the feature image on a single post so that it fits automatically, either by width or height, whichever is smaller dimension.

So that the ENTIRE image is always displayed without have to scroll, regardless of whether it is landscape or portrait orientation.

Hope that makes sense. Thanks.

[Paul R]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[sasocreative]

Hi Paul,

Unfortunately, the site is only running locally, so I cannot give you a URL.

[Lely]

Hi There,

That is possible with some customization. We really need to see your site to check possible solution. We can set the feature image as background instead. Please do setup a staging site online and then give us a link.

[sasocreative]

Thanks Lely, but there’s more than 27,000 posts, each with its own feature image. It’s not practical to set up a staging site. Because it’s essentially a gallery catalog, it was only ever going to run locally. That said, I really want to get this working. Is there another way?

[Paul R]

Can you provide us a screenshot on how it currently looks on your end.

Thanks

[sasocreative]

Have attached a screenshot of a single post. Because this feature image is portrait orientation, it is cut off at the bottom. For a user perspective, that’s not great. It would be far better to have the whole image fit on screen so the user doesn’t have to scroll to see the rest of the image.

Thanks

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.single-post .entry-featured{
width:50%;
margin-right:auto;
margin-left:auto;
}

Hope that helps.

[sasocreative]

Thanks, but unfortunately that scales all images — so landscape-oriented images, especially ones that are very wide, end up quite small on screen.

I was hoping that:

If an image was a portrait (tall) image it would fill available height (and set width accordingly)
If an image was landscapte (wide) it would fill available width (and set height accordingly)

So that, regardless of its aspect/orientation, it is always as big as it can be, but always contained within the screen.

[Rupok]

Hi there,

You can’t determine which type of image is being used and apply CSS for that. So I’d suggest you to use same type of image to get expected result.

Thanks!

[Author]

Posts