[Resolved] Adjusting Feature Image Size

Home Forums Support Adjusting Feature Image Size

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1299844
    Mike

    Hello,
    Is it possible to scale my featured image so it shows the whole complete image?

    I tried using this, but it doesn’t seem to be working

    https://docs.generatepress.com/article/adjusting-the-featured-images/

    Please see example url. Currently my image gets cut off

    Thank you

    #1300129
    David
    Staff
    Customer Support

    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.

    #1300993
    Mike

    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

    #1301263
    Tom
    Lead Developer
    Lead Developer

    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%;
    }
    #1301506
    Mike

    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

    #1301528
    Mike

    .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

    #1301661
    David
    Staff
    Customer Support

    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%.

    #1302469
    Mike

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

    Page Hero
    Single Posts
    Global Header
    Home Header

    #1302706
    Leo
    Staff
    Customer Support

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

    #1303004
    Mike

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

    #1303130
    David
    Staff
    Customer Support

    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.

    #1303962
    Mike

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

    #1303980
    Mike

    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!

    #1304234
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #1304496
    Mike

    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.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.