Unique Header Image for Each Post

  • Hello,

    I was hoping someone could help me figure out how to set a unique header image for each post. I’ve seen some solutions on here to do this for categories, but given that they all seem to use if loops, it would get out of control for a site with hundreds of different pages.

    I was hoping there would be some way to use Custom Fields to accomplish this – where I could set a post to have a custom field named ‘headerImage’ with a value of ‘foo’, and then the page for that could include a class in the header div of equal to ‘foo’, that way I can just set the images in a stylesheet. Or, even more directly, if I could set the value to ‘foo’ and have the page have <div style=”background-image:url(“img/bg/foo.jpg”>

    I really have no idea how to do any of this – I can write in xhtml and css, but haven’t played around with WordPress much, and any handholding would be very appreciated.

    Thanks!

Viewing 15 replies - 1 through 15 (of 18 total)

  • that’s an interesting idea. Please post if you find a solution.

    Thread Starter brendanmcguigan

    (@brendanmcguigan)

    Still working on this – I just don’t have a good enough understanding of WP to figure it out, but if no one has any leads I guess I might just have to spend a week learning this structure a bit more.

    If anyone can point me in the right direction, though, I would appreciate it a bunch!

    Thanks!

    Try this inside the <head> of your theme…

    <?php
if(is_single() & !is_home()) {
  $myfield = 'custom_field_name'; // Change this to the name of the custom field you use..
  $postimage = get_post_meta($post->ID, $myfield, true);
?>
  <style type="text/css">
  <!--
    .yourheaderclass {
        border:none;
        color:black;
      <?php
      if($postimage) { // If the field has a value.. set background image using value...
      ?>
        background-image: url('some/path/to/image/<?php echo $postimage; ?>.jpg');
      <?php
      } elseif(!$postimage) { // If no value
      ?>
        background-image: none;
      <?php
      }
      ?>
    }
  -->
  </style>
<?php
}
?>

    Adjust the CSS, field name, image extension etc… as needed…

    Untested but should work..

    Thread Starter brendanmcguigan

    (@brendanmcguigan)

    Works perfectly! Thank you so much, exactly the result I was hoping for!

    Glad i could help… ??

    Please be sure to mark the topic resolved [to the right] —->

    great solution!

    would it be possible to apply the $postimage as background to a title .class in css without using a custom field?

    I found this thread:
    https://www.ads-software.com/support/topic/140609?replies=49

    and get it to work,
    but am stuck at applying it as an image background for individual post-titles.

    the goal would be to have a category listing of posts, each w/ their own specific background image.. and post title overlapped.

    Awesome thread!

    One question..
    Will it work for a Theme that has the img header in the CSS as background, and in an installation of WPMU, I want all the rest of subdomains to have the same theme, but different images?
    I have Artificial Intelligence theme, the img is in “intro_right”, but it is not called in the header…as this example, instead of “if(is_single()…may I call it for a different subdomain?
    Thanks!!

    Raul

    You’ll need to give a more clear example of what you want to archieve before i can suggest anything…

    When asking if something is possible in PHP, 9 out of 10 times the answer is yes, the question is how… some things are easy, others not so…

    Sebastosh & Raulor please provide a more detailed descriptions of what you want, where and when…

    I have a custom few lines of code on my site that checks if a post has a matching CSS file with the post name, if it does, then include it in the page. I created it for when i need to include some custom CSS without having the need to include it on every page…

    So basically if ?p=26 or a post with the ID of 26 is on the page, it checks to see if ‘post-26.css’ exists, if it does then it gets included along with the normal code, and so on for each post…

    It’s a simple case of ‘ if the page is a post and a file exists with a particular name ‘ then include it in the page…

    It can be done for the home page, category pages, single pages (post pages), or any other number of if/else scenarios….

    The above was an example of something basic… i’m just pointing out what it’s usage was as an example, which is what i’ll need to suggest anything, a clear cut scenario of what you need, when you need it and what function it serves….

    I’m more a visual person, so getting a clear picture of the scenario is always where i like to start.

    Thanks t31os!

    Ok, I have WPMU 2.7 on my site, https://axlesscorp.com , I want the entire site (meaning subdomains too) to use Artificial Inteligence theme, but changing for each subdomain (since they are different topics), the background picture at the right upper corner, in the cascade style is as “intro_right”/background:url(images/intro.jpg).
    I would like to be able to switch different images for each sub-domain,like a customized header as Cutline is, the difference is that AI, doesnot call the image in Header.php, like Cutline does.
    I have NextGen Galleries on site, and I have been able to even set a Rotating header on the “intro_right” however it doesnot allows the prime layers (blog desc and title) to go up frt, meaning as “background slideshow”.
    At this point I will be happy, just by been able to set static images choices as different subdomains with this theme.
    It may sound simple for you, but I can not resolve this problem myself.And the reason for staying “stuck” with AI, is because of some aspects the theme has that fits the purpose of the site, without much effort.

    Thanks in advance for your time, I really appreciate it!!

    Well it certainly handles that intro area in the header.php….

    <div id="intro_right">
			<p class="white"><?php bloginfo('name'); ?></p>
			<h1><?php bloginfo('description'); ?></h1>
			<p>A branch of computer science that studies how to endow computers with capabilities of human intelligence. For example, speech recognition is a problem being worked on by AI scientists.</p>
		</div>

    I’m assuming what you’re suggesting is that rotating a static image obviously sits over your text or screws up the display, so you need something to rotate the CSS instead based on domain/sub-domain?

    I’ve no idea how WPMU works, but PHP is still PHP at the end of the day, so it can’t be all that difficult to do…

    You could always dynamically change the ID on the intro DIV based on the domain….

    class="example"

    becomes…

    class="example" <?php if some check {do some code.. etc etc...} ?>

    Purely an example, but we’d just add a unique ID depending on the domain, you then just make a few CSS definitions that style the DIV based on the ID it is given.

    If you can dig out some WPMU code that determines the current domain/sub-domain then i’ll happily write some code to accompany it for you..

    Hello and thanks very much t31os!!

    At this time I will be ok with just the ability to be able to replace the background image, like in any other theme like Cutline that does it, but again Cutline does it without being a “background layer”.
    I will love to be able to change also the <p> text </p> also in Header and Index of the templates for the different sub-domains.
    If you could get this written for me, I am willing to pay you for your time, I already contacted Genkisan (the designer of Art. Int. and he is not able to help me, ’cause the same reasons you mentioned about not knowing the way WPMU works, however You are more positive about it :).
    I will look into domains versus sub-domains in WPMU, I think it a subdomain is <(‘_’).maindomain.com>, but not sure.

    Again thanks a lot

    Oh!
    And you could contact me at [email protected]
    Thanks!

    I’m prepared to offer a hand, and would prefer here, that way anyone else in the same spot gets to benefit also.

    You’ll need to determine a way to differentiate the domains/sub-domains.

    Being as i don’t know WPMU code it could be way over my head, and it’s not something i’m willing to spend hours over if it’s beyond me. Changing a header image dynamically is easy as pie.. so i’ve no problem doing that, i’ve answered question of the nature previously…

    From what i can gather, WPMU allows a WordPress installation that allows your registered users to also have their own blogs etc…

    And from that you wish to change an image which shows differently for each blog…

    So simply put, each user using your site that has his/her own blog will have a different image (of your chossing), or something to that degree….

    Am i on track?

    Yes t310os, You are on the Track,
    Except, that Axless Corp. will be the only one user as to create a new blog or sub-domain within the site, our users will be the different topics related to the main site, in this case will be the applications of the technology.
    Example, dedicated to Robotics, there is already a sub-domain <https://robotics.at.axlesscorp.com&gt;, so I will like it to keep A.I theme, but changing the image to a robot or related pic. (if you had notice I have set already a different “intro_right:image” as the original in A.I, but it is site wide.)
    I am sure that once that you test drive a theme in wpmu as in wp standalone version, and it is fine, it will work in every subdomain independently to the main site(wpmu), I have done it with prior versions of wpmu (1.3)and the example is Cutline and many others.
    The problem is the way that A.I has been written, and the fact that the image is in the background (as frt. layer is the blog desc. and title)
    I have open a themes with related background images and frt. layer title and desc. in frt. they have different CSS files…CSS1,CSS2,CSS3,etc.I believe it is called Vista Lake?…but it gets complicated (at least for me) as they write the header and functions pretty clever.
    Thanks again for the replies and your time, I will keep looking into this , if I find the solution I will be posting it here for sure.
    I know of a long way of solving this myself…by re-writing all the needed Artificial Inteligence Themes and naming them differently in all the templates of each (to avoid conflicts with the theme reader in wpmu, and with the original one)…Ex: A.I_Robotics,A.I_Motors, etc..one for every sub-domain, but you know the kind of job that is.

    Took a couple of hours to get WPMU working on the local install, but it’s working…

    Using the sub-domain option you should be able to change a theme image based on the address…

    <?php
$baseDomain = 'yoursite.com'; // Enter your main domain name here... without www. but including extension, ie. .com, .co.uk etc...

$imgp = 'path/to/where/images/are'; // Enter a path without starting and ending slashes

$imagepath = '/'.$imgp.'/'; // Now i add the slashes for you.. ;-)
$cssname = 'someid'; // Which name to give the CSS ID..

$bdLen = strlen($baseDomain);
if (strlen($_SERVER['HTTP_HOST']) > $bdLen) :
   $subDomains = substr($_SERVER['HTTP_HOST'],0,-($bdLen + 1));
   $domName = str_replace('.','',$subDomains);
else :
   $domName = NULL;
endif;

if(!is_null($domName)) {
  $sitecss = stripslashes(strip_tags($domName));
?>
<style type='text/css'>
	#<?php print $cssname; ?> {
		background-image: url('<?php print $baseDomain.$imagepath.$sitecss;?>.jpg')!important;
	}
</style>
<?php } ?>

    This sets the background image for id=”someid”…

    So basically an element with the ID of “someid” will have the background image… “https://yoursite.com/the/path/subname.jpg&#8221;

    Plonk that inside the <head> tag of the theme…

    Took a while to figure out an easy way to do it…. but got there in the end.

    Let me know if you want some help adjusting it…

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Unique Header Image for Each Post’ is closed to new replies.