[Resolved] Blog header image

Home Forums Support Blog header image

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #261188
    Faye

    I have tried several options, but am going round in circles now.
    I can’t seem to change the blog header image to be full width (as I have on the other pages). Is this possible?

    Thanks 🙂

    #261206
    Jamal

    Hi

    As a starting point, have you tried setting the container type to full width? Like this ? (Imgur)

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #261209
    Faye

    Yes, I’ve tried adding a page header (under edit page) and setting to full width (that’s how I did the images on the other standalone pages). However, on the blog page, adding a header doesn’t even make the image appear.

    I’ve also tried under customise -> blog -> page header image. The image appears, but there is no option for full width.

    #261210
    Jamal

    Can you please try blog > Page header content, write something in the content box and you should see options like the image in my previous post. Set that to full width and then save to see if it makes the image full-width.

    If that works and you don’t want any content on the image you can delete the content in the Page header content tab and see if image remains full width.

    Worth trying that and if it doesn’t work i’m sure Tom or Leo will have a solution for you.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #261292
    Tom
    Lead Developer
    Lead Developer

    Forcing an image to be 100% wide can cause quality issues, but it’s possible with some CSS:

    .page-header-image.grid-container {
        max-width: 100%;
    }
    
    .page-header-image img {
        width: 100%;
    }
    #299322
    Faye

    Just thought I’d update (so you can close this off!) and say that I got this working with a really nice static background using the following method. If anything seems like a dreadful idea, please do point it out.

    I used the premium blog add on and added

    <span class="I"></span>

    to the content to generate a space for the background image, and set the container to full width. Then I used some css to set a background image (it was a very simple woocommerce shop page that I wanted to get the header on this time – which is the same as the blog page and doesn’t display a header by default):

    div.page-header-content.generate-page-header.generate-content-header.generate-blog-page-header {
    background-image: url("http://path-to-optimised-image.jpg");    
    min-height:240px;
    background-attachment: fixed;
    background-position:center;
    background-repeat:no-repeat;
    background-size: cover;
    }

    Finally, to make sure it only appeared on the shop page (instead of the default blog page – so if you want to add a blog header, ignore this part), I added just the filter as described here:

    https://docs.generatepress.com/article/blog-page-header/

    Perfect 🙂

    Thank you.

    #299486
    Tom
    Lead Developer
    Lead Developer

    Awesome! Glad you found a solution. Thanks for sharing it 🙂

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