[Resolved] Cover image does not show in Blog page

[generatepressuser]

Hello

I have used the “Cover” image on some pages in my website and its working fine, except on the blog page where I have some posts. The cover image is not showing up on that page. On any other pages its working fine.

Any ideas why a cover image is not working on that particular blog page where I have some posts? In edit mode I can see the cover image, but not in online mode.

Best regards

GeneratePress 2.2.2

[Leo]

Hi there,

Your site is under maintenance mode so I can’t really tell.

Any chance you can unlock it so we can see?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[generatepressuser]

Hello,

Yes sure, its online now.

Thanks

[Leo]

I assume you are referring to the “Tipps” page?

That’s an archive page automatically generated by WordPress and cannot be edited like a static page.

You can use our header element module though:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/page-hero-examples/

I would recommend using that for other pages as well.

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[generatepressuser]

Thank you I will try it as soon as possible, I didnt know that the blog page is not editable, since it looks like other pages too with all the edit options. Good to know that and about element feature thanks 🙂

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[generatepressuser]

Hello,

Why do you suggest using header element rather than the cover picture?

I have now watched the tutorial video about element header but whatever I tried, the photo is not showing up. I checked anything but no idea why. As in the tutorial video said, I have left the Page hero blank, only uploaded the custom image and then set in display rules the specific page I wish the image to be shown. But it does not show up. I have to mention, the page I have selected is a normal page where I have put new blogs. So its my blog page.

But I also tried different pages, no one worked with the element header.

If you want to check it, now currently the page I have set the element header to is /tipps .
The image file name is “Blog.jpg”. I have deactivated the maintenance mode.

I wonder what the reason could be.

Best regards

[David]

Hi there,

The Header Element hero content must contain something for it to display.
If you want it without content then you can add a HTML comment which won’t show on the front end:

Example:

<!-- Featured Image -->

Make sure you also have top and / or bottom padding to size the container.
If all your images are the same size and you want them in full view then use % padding.
A good method is to work out your image aspect ratio ie. height divided by width and then add that as a percentage to only the top ( or bottom padding ).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[generatepressuser]

Thank you, I did that but in the blog page with posts, its still not showing up.

Its only showing up on other pages I have. And only, if I activate “Merge” with “full screen”. But its not merging the menu into the image, its just showing the image full screen.

I have also created a new page (without a cover image) and tested, but header is not showing. Now currently the element header is set to “merge” and “full screen” to page “tipps”, but its not showing up. I have add the html comment in Page Hero <!– Featured Image –> and set the top padding to 3%.

Is it maybe because I have a sticky nav menu?

[Tom]

In your Display Rules for the blog header, try setting it to the “Blog” instead of the “Tipps” page.

Let me know if that does it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[generatepressuser]

thank you, now it worked (strange, I already tried yesterday with blog and it wasnt working). I realised that I had also to put padding Top to 430px as the other sites header (cover image) was like that, so that was also my mistake.

Now the blog site has its header with elements, thanks!

One question regarding my other normal pages: they currently have a header with a “Cover Image” and their cover image background is fixed (it looks nice when you scroll down). Can I fix the image in elements too? I only found the option “Parallax” in elements, but its not as nice as fixed.

Thank you

[Tom]

You can try turning off parallax and then adding this CSS:

.page-hero {
    background-attachment: fixed;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[generatepressuser]

Thank you that was a good idea 🙂
its not exact same look as cover image but the background is fixed yes.

Anyways, is there any disadvantage to use cover image instead of header with element? I mean, if one does not need the features from elements.

I am still not sure if I should change all pages to elements since I dont need to merge the nav menu. I think as soon as I wish to merge it, I will replace cover image with element header.

Thanks.

[Tom]

It totally depends on your needs. If the cover image works for you and you don’t need the additional features from Elements, then it’s definitely not a bad direction to take 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts