Pro blog featured image portrait instead of landscape

[gebigoma]

Hello!

Son Mat Kitchen - Korean cooking and everything else

Is it possible to change the featured images for my blog on my home page only to show as portrait instead of landscape? I want to keep the layout as standard.

Thanks!

[paul.r]

Hi,

To achieve that, you can add this in Theme Options > CSS

.home a.entry-thumb {
    padding-bottom: 100%;
}

Hope that helps.

[gebigoma]

Yes, it works perfectly! I just adjusted the percentage to 130% and it looks great ratio-wise. But how would I decrease the overall size of the image?

Another question please :
The excerpt that you see on the home page used to pull automatically from the post and I only had to change the setting at Theme Options >> Blog >> Content >> Excerpt Length.

But that stopped working and there was no excerpt so I was told to manually input the excerpt from the post itself.

I realllly don’t like the second option. Is there no fix for this?

Thanks again!!

[christopher]

Hi there,

Please change the suggested code to:

.home a.entry-thumb {
    padding-bottom: 130%;
    background-size: cover;
}

The background option can take cover, contain, 100% 100% and any variation of percentage. So test them to find the best one which will work for you.

For the second question, unfortunately, there is no alternative and that is the side effect of using builders for the posts, most of the elements in Cornerstone cannot be rendered correctly in the listing and that is natural as the builder is meant to be for the single blog page.

So you do not have a choice, unfortunately.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

[gebigoma]

Thanks for the new code however there are a few issues:

1. When I change the background-size to 92% the featured images that are landscape images are not forced to be a portrait image as it does when the background size is set to cover (or if there is no background option set) How do I force it to portrat?:

2. The hover animation is still at the original size with the background cover set to 92% :
   

3. I’d like to set the excerpt background size to match the image size so it is aligned:

[ruenel]

Hello There,

Thanks for updating in!

1.) I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Please have your code updated and use this instead:

.entry-featured {
    overflow: hidden !important;
}

.home a.entry-thumb {
    padding-bottom: 90%;
    background-size: auto 100%;
}

a.entry-thumb:before {
    background-color: transparent;
}

2.) The hover animation will always be larger because this is the container of the background image. If your set the background image size to less than 100% or contain, there will always be a space around it.

3.) It will not be align unless you set the background position to start at the top. You can make use of this code:

.home a.entry-thumb {
    padding-bottom: 90%;
    background-size: auto 100%;
    background-position: top;
}

Hope this helps.

[gebigoma]

Cool thank you Rue Nel! I fiddled around with the codes you gave me and also changed some of the images to a portrait ratio rather than forcing it with CSS.

This is the code I’ve settled on:

.home a.entry-thumb {
        padding-bottom: 130%;
        background-size: 92%;
        background-position: top;
    }

a.entry-thumb:before {
    background-color: transparent;
}

Some more questions re hover animation:

1. How can I get rid of View post text?

2. How about changing the hover cover color to be a white opaque rather than the gray opaque? Then this wouldn’t show the overhang since it’s a white opaque on a white background … (is what I’m thinking…) ??

[thai]

Hi There,

Please find this custom CSS:

a.entry-thumb:before {
    background-color: transparent;
}

And change to this:

a.entry-thumb:before {
    background-color: rgba(255, 255, 255, 0.8);
}
a.entry-thumb .view {
    display: none;
}

[gebigoma]

Perfect! Thank you!!

[thai]

You’re welcome.