Rotating headers for ONE category?

  • Admin

    Syahir Hakim

    #19024

    You can hook to the graphene_header_image filter. Something like this should work:

    function graphene_custom_header_image( $image ){
    if ( is_category( 'blog' ) ){
    // The script to rotate through possible images here.
    // Make sure the resulting image is assigned to the $image variable
    }

    return $image;
    }
    add_filter( 'graphene_header_image', 'graphene_custom_header_image' );

    raindance

    #19025

    Syahir-

    Thanks so much. I’m still not quite there…

    1. I don’t know what:

    // Make sure the resulting image is assigned to the $image variable

    means.

    2. Do you have an example of the kind of script to use? Like a next gen thing or a jquery carousel thing? I mean is it like what I’d use on any other site or more specifically tailored to this purpose? If you can point to an example of a script I might use I’d appreciate it.

    Admin

    Syahir Hakim

    #19026

    Here’s a treat for you:

    function graphene_custom_header_image( $image ){
    if ( is_category( 'blog' ) ){
    /* The script to rotate through possible images here. */

    // The directory where the images reside
    $dir = get_stylesheet_directory() . '/images/custom-headers/';

    // Get all images from the $dir above
    $images = @glob( $dir, "*.jpg" );

    if ( $images !== false ){
    // Pick a random image
    $key = array_rand( $images );

    // Make sure the resulting image is assigned to the $image variable
    $image = get_stylesheet_directory_uri() . '/' . $images[$key];
    }
    }

    return $image;
    }
    add_filter( 'graphene_header_image', 'graphene_custom_header_image' );

    The above code would allow you to place the images in the /images/custom-headers/ directory inside your child theme. It’s untested though, so it may or may not work.

    raindance

    #19027

    Oh I like your treat πŸ™‚ Happy Halloween! I like chocolate too…

    Ok so you are saying

    1. paste that code into my child functions.php file

    2. make a new folder /images/custom-headers/ and put the images there.

    And that’s all?

    Trying now…

    Anonymous

    #19028

    Unbelievable, Syahir. It’s kinda starting to make sense to me πŸ™‚

    raindance

    #19029

    Ok I must have missed a step πŸ™‚

    Here is what in my child functions.php file now:

    <?php
    function graphene_slider_post_types(){
    return array('post', 'page');
    }
    add_filter( 'graphene_slider_post_type', 'graphene_slider_post_types' );
    ?>
    <?php
    function graphene_custom_header_image( $image ){
    if ( is_category( 'Blog' ) ){
    /* The script to rotate through possible images here. */

    // The directory where the images reside
    $dir = get_stylesheet_directory() . '/images/custom-headers/';

    // Get all images from the $dir above
    $images = @glob( $dir, "*.jpg" );

    if ( $images !== false ){
    // Pick a random image
    $key = array_rand( $images );

    // Make sure the resulting image is assigned to the $image variable
    $image = get_stylesheet_directory_uri() . '/' . $images[$key];
    }
    }

    return $image;
    }
    add_filter( 'graphene_header_image', 'graphene_custom_header_image' );
    function graphene_filter_gettext( $translated, $original, $domain ) {
    $strings = array(
    'View full post' => 'Read More',
    'Category Archive: <span>%s</span>' => '<span>%s</span>',
    );
    if ( ! empty( $strings[$original] ) ) {
    $translations = &get_translations_for_domain( $domain );
    $translated = $translations->translate( $strings[$original] );
    }
    return $translated;
    }
    add_filter( 'gettext', 'graphene_filter_gettext', 10, 3 );
    function laura_sharethis (){
    if(!(is_front_page())){
    ?>
    <div id="sharethis"><span class='st_twitter_hcount' displayText='Tweet'></span><span class='st_facebook_hcount' displayText='Facebook'></span><span class='st_fblike_hcount' ></span><span class='st_plusone_hcount' ></span></div>
    <?php
    }
    }
    add_action( 'graphene_after_post_content', 'laura_sharethis' );
    /******
    * these next two remove the graphene breadcrumb and then add one
    * which does not appear on the home page
    *****/
    // has to be called after the action is added
    add_action ('after_setup_theme', 'wmrt_remove_graphene_bc');
    function wmrt_remove_graphene_bc() {
    remove_action ('graphene_top_content', 'graphene_breadcrumb_navxt');
    }
    add_action('graphene_top_content', 'wmrt_breadcrumb_navxt');
    function wmrt_breadcrumb_navxt () {
    //by calling this at this point is_home() works!
    if ((function_exists('bcn_display')) && (!(is_front_page()))) {
    echo '<div class="breadcrumb">';
    bcn_display();
    echo '</div>';
    }
    }

    I uploaded a folder /images/custom-headers/

    in my child theme folder

    With the new headers in it.

    But I still see only the original headers on the new blog test post which is assigned to the “blog” category…

    http://juicytravels.com/category/juicy-travels-blog/

    http://juicytravels.com/blog-post-test/

    Ok so two questions:

    1. Should I have capitalized Blog in your code as I did? Was trying to make it match exactly when it didn’t work, but maybe that is not right in PHP?

    2. Still don’t know what to do for the:

    /* The script to rotate through possible images here. */

    Thank you for your help πŸ™‚

    raindance

    #19030

    I changed Blog back to blog. Still none of the images in the images/custom-headers directory are showing up in the header spot…

    I’m sure I missed something…oh like the SCRIPT I don’t know what to use πŸ™‚

    ?

    raindance

    #19031

    Here is the path I have to the images

    http://juicytravels.com/wp-content/themes/graphene-child/images/custom-headers/juicytravelsblog-header-1.jpg

    From 1-24 in the directory

    And they show up live if I put in that path the browser

    But not in the header spot…

    So…missing the script must be the issue?

    Not sure what to use for the script?

    Thank you for your patience with me!

    Anonymous

    #19032

    @ Laura,

    Here is one example of code… there are lots out there in Google Land:

    <script type="text/javascript">

    //store the quotations in arrays

    var images = [],
    index = 0;

    images[0] = "<a href = 'http://www.computerhope.com/index.htm'><img src='http://www.computerhope.com/banners/banner.gif' alt='Visit Computer Hope'></a>";

    images[1] = "<a href = 'http://www.computerhope.com/history/index.htm'><img src='http://www.computerhope.com/banners/banner2.gif' alt='Computer History'></a>";

    images[2] = "<a href = 'http://www.computerhope.com/index.htm'><img src='http://www.computerhope.com/banners/banner3.gif' alt='Visit Computer Hope'></a>";

    images[3] = "<a href = 'http://www.computerhope.com/newslet.htm'><img src='http://www.computerhope.com/banners/banner4.gif' alt='Computer Hope Newsletter'></a>";

    index = Math.floor(Math.random() * images.length);

    document.write(images[index]);

    //done

    </script>

    Anonymous

    #19033

    You can take out the alt description and the link from each image if you like.

    UPDATE: Looking back at the function, I’m not so sure about my post above. Might want to wait on that one.

Viewing 10 posts - 11 through 20 (of 53 total)

  • You must be logged in to reply to this topic.
Graphene Themes Forum