Add Header Image to Theme

Hi Marc,

No problem. We’ll look into that for you.

Can you please just elaborate a little bit … are you looking for a different image on each page? Also, can you please take a look at the Cover Block and let us know if that does what you require?

Many thanks,

Oliver

Hi Oliver,

I appreciate your consideration.

I played around with the Cover Block, and it did not really get the look that I was after. Thanks for pointing that out.

I do not need a different image on each page for my use case.

That being said, there may be other users who do, so I would not want to rule that out completely, to consider other use cases. Not sure how much additional work that would require however.

Can you please explain exactly what it is that you are looking to achieve that the cover block does not do? Perhaps you can link to an example? I’m sure we can come up with something ??

Oliver

Hi Oliver,

Thanks for your reply.

It is possible that I missed some functionality with the cover block, and would be open to suggestions on use. I was not able to get the cover block to be right at the top of the page (nothing above it) with a full page width image.

Essentially, I am looking to replicate at least key features of the header image capabilities for the Twenty Seventeen theme, if that helps. If that is not conceptually consistent with the intent of Twenty Twenty-One, I fully understand. I was hoping to be able to have the header image, while also taking advantage of other functionality in the newer theme.

OK, we’ll look further into this.

My first thoughts are that in order to do what you want we’d need to fix the site header to the top of the page so that the page content (for example the cover block) can then appear underneath it.

However, it may be that instead we need to have an option to choose a header image and then to choose the height of the header so that you can choose how much of the header image is seen.

Will get back to you when we have more.

Oliver

Hi Oliver,

I appreciate your consideration here.

If I can assist further in any way, including perhaps some testing, please do let me know.

Thanks!

Of course! In the meantime, there is a similar thread here.

Oliver

Hi Marc,

Can you try this …

Firstly, select a background image in “Customizer – Background Image” and choose the dropdown Preset “Fill Screen”.

Now, to make the image into a header image similar to Twenty Seventeen, add the following CSS to “Customizer – Additional CSS” …

.home #masthead {
	height: 100vh;
}
.home .primary-navigation {
	position: absolute;
	top: auto;
	bottom: 0;
}
.menu-button-container {
	position: static;
}
#content {
	background-color: white;
}

I am not expecting this to completely satisfy your request at all, I just want to see if it would be heading in the right direction?

Oliver

I also wish to use a header image. Using the “featured image” as the header would be very useful. The height control for a header image is most desirable. In some other themes the header image takes over the screen and is all that a visitor sees. Being able to make it fairly small in height would be great.

I am using a workaround that does not require any CSS by using a background image that consists of the header image at the top followed by a blank area in the color of the background color setting ( https://pcphotoclub.org/ ) – A tacky approach, maybe, but it works until you can provide a real solution.

Hi Oliver,

I would say that does get close conceptually. As I suspect you know, it also has the background below the main page text content, which I would not want.

Being able to control the height of the header image area, as Ludwig noted above, would be helpful.

Thanks!

OK guys, there’ll be something for you to test in the plugin coming soon ??

Thanks for the input!

Oliver

We’ve just pushed an update to the plugin that lets you choose a background image for the site header.

It does this by using javascript to wrap the header in a div so as to allow the background image to cover the margins left and right of the header.

You can then use a range selector to choose the height of the header on the home page up to full height (like Twenty Seventeen).

Please take a look and let me know what you think.

Oliver

Great job, Oliver! You guys are on the ball!

I am not sure that I understand your sizing and placement, but I never figued that out for older themes either.

I uploaded two images, one with the 3:2 ration (35mm film format) and the other a strip 1600×495 (I just cut the other down, no reason for this odd ratio).

When using the header image it covers the area for the logo, the site title and menu. That works well.

Of course, some people are never satisfied. If it were possible to optionally decrease the height even further to just the part of the logo, above the site title, that would work even better for me.

My reason is so that title and menu readability is not affected by the image. See my site PCPC

Oliver,

I am not seeing the updated plug-in, only 1.5.0 from about 3 days ago.

I checked the SVN repo also, but nothing there that I see.

Is there someplace else that I should be looking, or do I just have to wait until it shows up as an update?

Thanks for your efforts on this!

Hi Oliver,

My bad, I was looking in the wrong place at the wrong plug-in. Clearly needed more coffee at the time.

I have installed the new version and it appears to work well on the home page. I will likely need to edit my header image, or select a different one, given the size characteristics. More likely the former.

A question. The size adjustments appear to work on the home page, but not on other pages. Is that correct, or am I missing something?

Thanks for all of the work so expediently on this!