Adjusting Feature Image Size

Hi there,

Header Elements place the image as a Background image.
To change the visible size - you need to adjust the Top and Bottom Padding.

Edit the Header Element and select % and add 30% to Top and 30% to bottom for example.

For Elements, since my post is a page post
I see two options
Page Hero
Single Posts

I played with both % but was not able to see a difference

The trouble with showing the full image when using a background image is your aspect ratio needs to be perfect.

For example, look what it looks like with the full image shown:

.page-hero {
    background-size: contain;
}

Or, if you want to force it to be full width while displaying the full image:

.page-hero {
    background-size: 100% 100%;
}

hmm, so current page looks like this: **

Is there anyway to get it like my previous theme?

**

Thanks. Can you delete the urls after viewing

.page-hero {
background-size: 100% 100%;
}

This code is almost there! Full image is shown, which is great, but its a bit stretched. The previous theme was able to show image without stretching. Any idea how to achieve it? I was playing around with the different sizes and this is very tricky

https://www.w3schools.com/cssref/css3_pr_background-size.asp
Thank you

Hi there,

this CSS is the reason why the image is being stretched:

.page-hero {
    background-size: 100% 100%;
}

Remove that CSS.
Edit the Header Element and increase the Top and Bottom padding try changing them to 20%.

Thanks.
Which element would it be? Under elements, I see different pages for

Page Hero
Single Posts
Global Header
Home Header

The page you linked is a single post so it should be the single posts header element.

unfortunately, doesn't seem to change anything when i play around with the variables

I feel that this and this issue:
https://generatepress.com/forums/topic/two-separate-titles/page/2/#post-1303124
are both related.

And the problem is most likely Display Rule conflicts.

A post, page or archive can only display one Header Element.
If you create multiple Header Elements that have the same Display Rules or overlapping rules then whichever Header Element you created first will be displayed.

For example:

You create your First Header Element and set the Display Rules to Entire Site.
This header will apply everywhere. If a new Header Element was created for just the Posts this new header element would not be displayed as the First Header Element still applies and was created first

So you must make sure that your Display Rules are explicit and if need be use the Exclude rule to break conflicts.

Thank you! This is exactly the reason! I disabled a duplicate global element setting and the changes are now showing!

Ok so now, I managed to get the full image width, but is there a way to make it smaller? I tried padding changing, but can't get the desired size that I want

This is what I am trying to achieve: https://tokyotravelguide.com/tokyo-districts/odaiba/

vs current: https://tokyotravelguide.com/wp/tokyo-districts/odaiba/

Thanks!

Hi there,

You can reduce the height by reducing the top/bottom padding of the Hero :)

The trade off is. I have the correct height that I want, but of course, the image is cropped and won't show the full image.