Minimum Pro: Different header image on each page…

Community Forums Forums Design Tips and Tricks Minimum Pro: Different header image on each page…

This topic is: not resolved

Tagged: 

This topic contains 4 replies, has 3 voices, and was last updated by  samw 5 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #107104

    inga
    Member
    Post count: 13

    I would like to have a different header image on each page, on this site. I tried to follow this tutorial: http://sridharkatakam.com/how-to-make-background-in-minimum-pro-appear-on-selected-pages/ but it didn’t work out as I wanted.

    Are there anyone here who know how I can do that?

    Thank you:-)

    All the best

    Ingebjørg

    http://ilzerudzite.com
    #107130

    braddalton
    Participant
    Post count: 10563

    If you want a different header image on every page a plugin is the best way to go otherwise you’re going to have a heap of CSS classes of conditional tags as well as images.

    There’s 2 which are the best.

    https://wordpress.org/plugins/wp-display-header/

    http://wordpress.org/plugins/custom-header-extended/

    If its only for a handful, you can use CSS and/or PHP code.


    #107194

    inga
    Member
    Post count: 13

    Thank you Brad, I tried the plugins, but I find it hard to make them do what I want them to… The woman I am making this site for is an artist, and she want to show her art using 5 different big header image ( as on the homepage ) on the 5 pages: About, Contact, Blog, Portfolio and Event page…

    It will be so great if this was possible, and I have tried to do this in different ways but with no luck so far.

    #107200

    braddalton
    Participant
    Post count: 10563

    In that case use CSS or PHP.

    I have written about this many times.


    #109879

    samw
    Participant
    Post count: 55

    Hi

    This worked for me after many hours of trying the same – BUT I am only using static pages with templates I created for this example. They are very basic templates – just full width thats it. Not tried with default template. I do have an issue with the other pages images not resizing or showing in mobile at the moment. The default bgd image works fine

    `//* Minimum custom body class
    function minimum_add_body_class( $classes ) {
    $classes[] = ‘minimum’;
    return $classes;
    }
    //* Enqueue scripts
    add_action( ‘wp_enqueue_scripts’, ‘minimum_custom_enqueue_scripts’ );
    function minimum_custom_enqueue_scripts() {
    if ( is_page(array(3953,4034,3890))){

    wp_enqueue_script( ‘minimum-backstretch’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/backstretch.js’, array( ‘jquery’ ), ’1.0.0′ );
    wp_enqueue_script( ‘minimum-backstretch-set’, get_bloginfo(‘stylesheet_directory’).’/js/backstretch-set.js’ , array( ‘jquery’, ‘minimum-backstretch’ ), ’1.0.0′ ); wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => ‘http://met3.dev/wp-content/themes/minimum-pro/images/head5.jpg’) );
    if (is_page(’4034′)) :
    wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => ‘http://xx.dev/wp-content/themes/minimum-pro/images/head7.jpg’ ) );
    elseif (is_page(’3890′)) :
    wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => ‘http://xxdev/wp-content/themes/minimum-pro/images/head8.jpg’ ) );
    else:
    wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => get_background_image() ) );
    endif;
    //* Add custom body class
    add_filter( ‘body_class’, ‘minimum_add_body_class’ );
    }

    }

    You also need to add this class to css .minimum .site-tagline {
    margin-top: 600px;
    margin-top: 60rem;
    }

    this sets the correct div to display images on the pages in the array – and only for the pages in the array so the rest of the site stays the same

    I also commented all of this out of front-page.php which was odd as im using a static page for home but guess its still calling stuff out of this

    //* Enqueue scripts
    /*add_action( ‘wp_enqueue_scripts’, ‘minimum_front_page_enqueue_scripts’ );
    function minimum_front_page_enqueue_scripts() {

    //* Load scripts only if custom background is being used
    if ( ! get_background_image() )
    return;

    //* Enqueue Backstretch scripts
    /*wp_enqueue_script( ‘minimum-backstretch’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/backstretch.js’, array( ‘jquery’ ), ’1.0.0′ );
    wp_enqueue_script( ‘minimum-backstretch-set’, get_bloginfo(‘stylesheet_directory’).’/js/backstretch-set.js’ , array( ‘jquery’, ‘minimum-backstretch’ ), ’1.0.0′ );

    wp_localize_script( ‘minimum-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => str_replace( ‘http:’, ”, get_background_image() ) ) );

    //* Add custom body class
    add_filter( ‘body_class’, ‘minimum_add_body_class’ );

    }*/

    //* Minimum custom body class
    /*function minimum_add_body_class( $classes ) {
    $classes[] = ‘minimum’;
    return $classes;
    }*/

    HTH


    SEO & Online Marketing Consultant

    Metta3 | G+ | LinkedIn

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.