How to assigne different Header images to different pages?

[ricottime]

Hello,

I would like to know how to set up a Header image on the pages: I need to select and assign one specific image to one specific page, and to repeat the process for different images and pages

I don’t want to randomize images on a set of pages, nor to select one single image for a set of pages, as already available in the menu: Customize > Header > Image & Video

thank you for your assistance!

marco

[Zex]

Hello Marco!

Unfortunately, for now, there is no such option in the theme.
At this time, you can only place a Custom Logo on each page, not the header image.
I will put this request on my to-do list for the next theme update.

Until we release the update, you can do it in the following way:

First, you need to find the specific page ID number on the page which you want to apply the
custom header image.

to discover the page id, please follow the steps below :

1. Navigate in your browser to the page you want to work with.
2. Right-click on that page (anywhere) and select “Inspect Element“.
3. Search inside the site’s markup for the body tag. It should be one of the first element in the source.
You’ll see it has many classes. Look for the class that starts with “page-id-…”. That’s the class you should use.

You can check THIS video guide

then, Open the Customizing->General->Additional CSS
and Copy/Paste the code below for every page you want to change the header image and replace the page ID.and URL to the image.

.page-id-5 .wp-custom-header img
 {  
    content:url(https://media-cdn.tripadvisor.com/media/photo-s/09/c2/5b/2b/nature-1-14-largejpg.jpg);    
}

For the Homepage:

.home .wp-custom-header img
 {  
    content:url(https://media-cdn.tripadvisor.com/media/photo-s/09/c2/5b/2b/nature-1-14-largejpg.jpg);    
}

For the Blog page:

.blog .wp-custom-header img
 {  
    content:url(https://media-cdn.tripadvisor.com/media/photo-s/09/c2/5b/2b/nature-1-14-largejpg.jpg);    
}

Regards

[ricottime]

sorry Zex, I tried as suggested, but no effect… 🙁
In Additional CSS I put the following:

.page-id-69 .wp-custom-header img
{
content:url(http://www.nuclearenergy.test.polimi.it/wp-content/uploads/2016/12/cropped-2014-mangiarotti-2.jpg);
}

without success…
I tried also with “Enable On” and “Enable Off” in Customizing > Header > Image&Video
but no effect

thx for your help!
marco

[Zex]

Hello Marco!

Can you give me your WP login credentials and link to the website in private reply?
(Check the “Set as private reply” checkbox below the post).

Thanks!

[ricottime]

This reply has been marked as private.

[Zex]

This reply has been marked as private.

[ricottime]

This reply has been marked as private.

[Zex]

Hi, Marco!

The code works, you just need to go to the Customizing ▸ Header ▸ Image & Video menu and enable the header image on the page where you want to appear the custom header image, then add Custom CSS code, as I explained to you earlier.

https://prnt.sc/j06z88

Best Regards

[ricottime]

Zex, not really, sorry… if you reload that page 69, you will see that the header image changes randomly
I don’t want a RANDOM image (as it is now), I want EXACTLY a specific image (not changing randomly) as header on that page… (and I want to select a specific image on each specific page)
I already did what you did… but no success, as you
it seems that the additional CSS code is overcome by the Image&Video enabled header, so the CSS doesn’t work

please try again… thx!!!!! 🙂
ciao
marco

[Zex]

Hello,

I think now will work as you expected.

I have inserted custom codes for every page where you have activated a header image.(Customizing->General->Additional CSS)

It’s up to you to enter the URL of the image into the codes.

To find the right URL for the image, go to Dashboard->Media,
https://prnt.sc/j080jh
click on the desired image, to open an Attachment details page, then copy the image URL from the URL field, and paste it into the code.

https://prnt.sc/j0814j

https://prnt.sc/j0838d

Regards

[ricottime]

sorry again Zex.. I did it, but no way… 🙁 it doesn’t work

now in the CSS code I have put the same image:
http://www.nuclearenergy.test.polimi.it/wp-content/uploads/2017/01/sample-slide-2.jpg
on pages PEOPLE, RESEARCH, EDUCATION,
while two different images on pages LABS and CONTACT US
but as you can see, there is the same image – another one – on all the pages… i.e. the same image present as “Current Header” in the Customising > Header > Image&Video menu

I tried also a combination of different options: hiding or randomising the image, enable “on” or “off”, and in Additional CSS also putting a value 1200px into Media Width or tagging Start Fresh to activate the option “Don’t use the theme’s original CSS.”…
but no effects!

I think the problem is that the Additional CSS code is overcome by the Image&Video code…

please check and see if you can find a solution, it is quite strange..

ciao! thx again…
marco

[Zex]

Hi,
I don’t see the problem you describe.
Everything looks OK on my side.
Try to clear your browser’s cache, or try to open the site from another computer.

Please Check the video:
https://drive.google.com/file/d/1eIUfbgKsrygUriNhehJ6y6bXYC9_Aeor/view?usp=sharing

Regards

[ricottime]

GREAT! IT WORKS!!!
thx Zex!…

but I can see it only with a new browser (Safari), I cannot see it with my usual Firefox (even if I deleted the cache!… unbelievable, I don’t know what to do!… suggestions?… I tried to exit and reboot, clear cache, clear cookies, clear web site data, …)

thx Zex!
ciao
marco

[Zex]

Hi, Marco!

Sorry for the misunderstanding, it’s my fault that I did not ask you which browser you are using.

I found some temporary workaround for you until we release the update for the theme (I hope it will be done in next2-3 days), In which we’ll add an option to set the custom header image on each page separately.

Thank you for the understanding.

Best Regards

[ricottime]

Sorry Zex, one last question: is it possible to resize the header image, while you reduce the size of the browser? I understood that it should be done via the part of the code you wrote:

display: block;
margin: auto;
text-align: center;

but it seems not working…
thx once more!

best regards
marco

[Author]

Posts