Feature an image without it affecting the header image within the post
-
Hello!
I’m trying to find a CSS solution to make it possible to select a featured image without it then becoming the header image for an individual post. I’d like the usual random rotation of header images I have on the blog to be the header selected for any post or the main page, but right now the default is that when I choose a featured image for a post, it becomes that post’s header image, which doesn’t look good.
Thanks for your help,
Seth
The blog I need help with is: (visible only to logged in users)
-
Hello,
Maybe to use a same image for all your website:
.site-header-image { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Salar_de_Uyuni%2C…HDR.JPG/1280px-Salar_de_Uyuni%2C_Bolivia%2C_2016-02-04%2C_DD_10-12_HDR.JPG); }Or use a color:
background-image: none; background-color: grey; -
Thanks for this idea @dianakcury, but at the moment we have a very nice selection of about twenty photos that rotate randomly, and I don’t want to lose that!
-
@ setheinman,
Hi,
but right now the default is that when I choose a featured image for a post, it becomes that post’s header image, which doesn’t look good.
I haven’t figured out why, but this occurs on some posts and not on others. For an example of a post on which you have a featured image set, and yet the header image (or images with random setting) remains, see: Growing Hops & Crafting Beer.
See also the posts Inside Out and A Perfect Day in the Hemingway Rewritten demo.
I thought perhaps it was only replacing the header image with the featured image on Featured posts (sticky posts), but this doesn’t seem to be the case, as it happens on your second and fifth most recent posts, but not on the most recent, Bird of the Day: Abbott’s Babbler, and the third most recent, Growing Hops & Crafting Beer.
-
Hi @musicdoc1,
Thanks for your thoughts!
Actually the Growing Hops & Crafting Beer post does not have a featured image, and none of the Bird of the Day series posts have featured images either, so that explains why you didn’t see those posts reflect a change in the header image.
-
Hi @setheinman,
You’re welcome. I suspected those might not have been featured images. Should have asked you first. Also, the same may be true of “A Perfect Day” on the Hemingway Rewritten demo, but what about the “Inside Out” post? The image appears above the title of that post on the front page, which suggests to me that it might be a featured image.
-
-
Hi @musicdoc1,
Those posts you linked to might be a different post format, yes, but the header image, which is the image of the barn behind the “Hemingway Rewritten” block, is still the same. What I would like to do with CSS coding is be able to feature an image without it replacing that header image once you enter the post.
-
Those posts you linked to might be a different post format, yes, but the header image, which is the image of the barn behind the “Hemingway Rewritten” block, is still the same.
The image of the barn is the custom header image. It hasn’t been replaced by what may be a featured image on the post “Inside Out.” That seems to be, unless I’m misunderstanding you, precisely what you’re aiming to do.
What I would like to do with CSS coding is be able to feature an image without it replacing that header image once you enter the post.
You goal appears to have been accomplished without CSS coding in the example cited above, the “Inside Out post on the Hemingway Rewritten demo.
Have you tried testing the various post format settings on a post to see if you get different results depending upon the selected format?
-
we have a very nice selection of about twenty photos that rotate randomly, and I don’t want to lose that!
In the “Inside Out” post example, the image of the barn could easily have been one of 20 randomized images. Randomized header images (if created) vs. a single header image, customized or default, are just a matter of a single setting at Customized > Header Images.
-
@setheinman, to change the behavior of the theme, so it did not put featured images in the header area, would require modifications to the theme php script files, and we cannot edit those here at WordPress.com.
-
hi @thesacredpath,
Thanks for that clarification. What about the solution provided in this thread here?
It looks like if I could add all my uploaded header images in a list within the background-image field, I could achieve the intended effect. What do you think?
-
If you specify more than one background image, only the first will display. There is no way to cause a rotation with CSS alone. That would require jQuery or Javascript, neither of which we can add to our sites here for security reasons. There are some possibilities, but from looking at this one CSS only solution, it would take a lot of code in order to do it.
-
You could set the featured images and then override them with CSS but there’s no real way to pick a random one of your 20 images. You could specify a particular image for each post and update your CSS every time you post but that sounds like a lot of extra work.
A different approach is to use the post ID number, which is included as part of the body element class, to distribute the backgrounds between posts.
For example something like this, but duplicated with a different URL and final digit:
body[class*="0 single-format-"] .site-header-image { background-image: url("https://raxacollective.files.wordpress.com/2016/06/cropped-gbark.jpg"); } body[class*="1 single-format-"] .site-header-image { background-image: url("https://raxacollective.files.wordpress.com/2016/06/cropped-3.jpg"); } body[class*="2 single-format-"] .site-header-image { background-image: url("https://raxacollective.files.wordpress.com/2016/06/cropped-img_89221.jpg"); } body[class*="3 single-format-"] .site-header-image { background-image: url("https://raxacollective.files.wordpress.com/2016/07/cropped-img_95601.jpg"); } .site-header-image { background-image: url("https://raxacollective.files.wordpress.com/2016/07/cropped-img_90521.jpg"); }It uses the last digit of the post ID as these are more random (see: Benford’s law) and assumes that the following class is always the post format one. This might not be the case so I’ve included a default image as the last rule, but it seems to be consistent in your theme.
If you expanded this from 0 up to 9 you could set up 10 different images that should appear. They wouldn’t be random, it would always be the same image for a given post but there would be different images split between posts in a way that approximates a random distribution. If you wanted to go crazy you could use the final 2 digits and set up 100 rules, 5 of each per background image you have.
If that’s really confusing (it’s late here in the UK) then let me know and I can talk you through it with a complete example.
-
thank you once again @thesacredpath for your help and the reference for a potential solution, and wow, thanks so much @hallluke for your in-depth example of how I could try to work around this issue!
I agree with both of you that this is a little too much coding work for what I’d like to achieve; I think I’ll try fixing the problem from the other end and simply stop featuring images in the first place.
Thanks again!
Seth -
- The topic ‘Feature an image without it affecting the header image within the post’ is closed to new replies.
WordPress.com Forums 