ThemeShaper Forums » Thematic

[closed]

Adding a random Header-Image

(7 posts)
  • Started 9 years ago by J.Corax
  • Latest reply from J.Corax
  • This topic is not resolved
  1. Hi Themeshaper,

    I am using the Thematic Feature site child theme and would like to make a few changes. The one that I seem to be struggling with the most is replacing the search form in the header with a random image/laoded with the visit of a new site/ page

    http://www.solutions-training.com/blog - that's the blog i'm working on.

    Thanks in advance

    Posted 9 years ago #
  2. Hi,

    do you have any php code for the random pictures in mind? .. or do you want to use a plugin?

    Need some more details to help you.

    Chris

    Posted 9 years ago #
  3. Hi Chris,

    thank you for the quick reply.
    I used a code snippet before on http://www.universitybusinessangel.de that shows a random image every time the page is refreshed.
    The second option would be to assign a certain image to a certain page. Which might actually be better.
    Here is a suggestion how to do that (also for the wordpress cutline theme)
    http://cutline.tubetorial.com/forums/showthread.php?p=3092

    Do you think is code would work with thematic too?

    Posted 9 years ago #
  4. Mmmh .. if you want to assign a certain image to a certain page, you could do that within your style.css using the body class.

    Will be back with some code for you this evening.

    Chris

    Posted 9 years ago #
  5. Thanks a lot.

    Posted 9 years ago #
  6. OK .. here's some recycled code ..

    We start with the basics and rearrange the header part a bit (this code goes into the child theme's functions.php):

    // First we remove the thematic_brandingopen() .. we're going to make one addition for this one.
    // And we remove thematic_access() .. will be added later unchanged with a priority of 10.
    function remove_branding() {
    		remove_action('thematic_header','thematic_brandingopen',1);
    		remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_branding');
    
    // We wrap #branding and #header-aside with #header-box
    function childtheme_brandingopen() { ?>
    	<div id="header_box">
        	<div id="branding">
    <?php }
    add_action('thematic_header','childtheme_brandingopen',1);
    
    // And we add our #image-box
    function image_box() { ?>
    		<div id="image-box">
    		</div>
    <?php
    }
    add_action('thematic_header', 'image_box', 8);
    
    // Now we need to close #header-box
    function header_box_close() { ?>
    	</div>
    <?php }
    add_action('thematic_header', 'header_box_close', 9);
    
    // And we add the unchanged thematic_access() with the new priority 10
    add_action('thematic_header','thematic_access', 10);

    .. and a bit CSS for the child theme's style.css:

    #header_box {
    	clear: both;
    	margin: 0 auto;
    	overflow: hidden;
    	position: relative;
    	width: 960px;
    }
    
    #branding {
      float: left;
      width: 620px;
    }
    
    /* Moves the image box to the right and levels it with #branding */
    #image-box {
      float: right;
      width: 300px;
      padding: 88px 0 44px;
    }
    
    /* This will clear the floats and keeps the access bottom line
    from jumping into the air */
    #access {
      clear: both;
    }

    Ok .. the original code created a widgetized area in the header. This one will create the #image-box. If all of your pictures are the same size, you could assign a certain picture to a certain page using the body class. Btw. .. you might need to add a height to #image-box and play with the padding .. it still uses the values to level a widgetized area with #branding.

    Using the body class would look like this:

    /* Add an image to 'Home' */
    .home #image-box {background: url(images/home.jpg);}
    
    /* Add an image to 'Blog' */
    .blog #image-box {background: url(images/blog.jpg);}
    
    /* Add an image to 'Category Archive' */
    .category #image-box {background: url(images/category.jpg);}
    
    /* Add an image to 'Category Archive: Uncategorized' */
    .category-uncategorized #image-box {background: url(images/category-uncategorized.jpg);}

    And so on :)

    Btw: I would add a generic picture to #image-box for everything without a special picture defined.

    In case you want to use php code .. just change the image_box function:

    // And we add our #image-box
    function image_box() { ?>
    		<div id="image-box">
    <?php
    
    // here goes your code displaying a random picture
    
    ?>
    		</div>
    <?php
    }
    add_action('thematic_header', 'image_box', 8);

    Hope this helps ;)

    Chris

    Posted 9 years ago #
  7. Great Chris.

    Thank you.

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.