Archived topic
Create Header Template
7 replies · Started by Alan on August 26, 2021
Not sure the best way to handle this, but I have over 200 Headers created with GP's Elements feature. The (custom image) header photos are 1500 x 600 pixels. The pages that each header appears on also have (uploaded) featured images of 450 x 300 pixels. Obviously, the smaller photos would be much better for mobile devices, which we are all trying to optimize for. Is there a way to create a template where the only things swapped out are the page hero text (currently either set to <h1>{{post_title}}</h1> or <h1>Argentina Tours & Travel</h1>) and the photos? Here is an example of one page https://www.savacations.com/destinations/argentina-tours-travel/
Please let me know your thoughts.
Thanks,
Hi Alan,
Not sure I understand your question, can you tell me what are you trying to achieve?
Maybe explain some more?
Is there a way to have just one header element for all page headers, where the only thing that changes (dynamically) is the photo and text? As I indicated, I have over 200 header elements and would like to consolidate them into one element to speed up the site.
Is there a way to have just one header element for all page headers, where the only thing that changes (dynamically) is the photo and text?
Yes, you just need to choose featured image as background image in the header element.
https://docs.generatepress.com/article/header-element-overview/#background-image
https://www.screencast.com/t/kexycep5t
Use <h1>{{post_title}}</h1> as the header element content.
So, if I previously uploaded 450x300 pixel photos for each of the featured images, I should change them to the 1500x600 pixel version? Also, I may need to have a lot of different pages selected under the display rules section (conceivably, I could have four different header elements with 50 display rules pages each). Could this slow down the site the same as having over two hundred header elements?
What about setting display rule as pages > all pages?
Any specific reason you need to separate the 200 pages into 4 groups?
I should change them to the 1500×600 pixel version
Yes, to present the image better, I think so.
So if I use <h1>{{post_title}}</h1> for the header title, and set the background image to featured image, and display rules to pages > all pages, I can eliminate most of the header elements and not need to separate the pages into groups. I would probably still need to keep some custom images, but this will allow me to remove a lot of header elements.
I think it is clear now. Thanks for your help.
Yes, you basically only need 1 global header element for all pages.
But for example, if you have page-a needs a custom image as background, then you can exclude this page from the global header element in display rule.
Then assign a new header element to page-a.
Hope that's clear :)
