WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] I want to show a different slideshow on each page where header image would be (24 posts)

  1. michellebeth
    Member
    Posted 1 year ago #

    Hey all, I want to use a different meteor-slides slideshow for each page of my site, where the header image would normally be in twentyeleven. I have replaced the one on the home page no problem, but don't know how to go about using different ones on each other (static) page that requires it: a working html version is available to view here - http://www.michellegrant.com/veryfood

    Can you set featured image to be a slideshow instead of a static pic?

    Do I need to take out the slideshow in header.php and instead do something with functions.php?

    Any help much appreciated!!

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Cormac Bracken
    Member
    Posted 1 year ago #

    This shows a few ways to do this:

    function rhl_select_slide_header() {
    	if ( function_exists( 'meteor_slideshow' ) ) {
    		if ( is_page( 'page-slug-1' ) {
    			meteor_slideshow( "slideshow-slug-1" );
    			}
    		elseif ( is_page( 'Page Title 2' ) {
    			meteor_slideshow( "slideshow-slug-2" );
    			}
    		elseif ( is_category( 'my-category' ) || in_category( 'my-category' ) ) {
    			meteor_slideshow( "slideshow-slug-3" );
    			}
    		else
    			meteor_slideshow( "slideshow-slug-4" ); //default-fallback if none of the above are true
    		}
    }

    Note that you need to create the pages, categories or slideshows first, so that you know what the slug text is; and if the site user later edits the slugs you'll have to modify the code. Consider using posts instead of pages, and selecting based on category instead, as shown in 3rd choice above.

    I use something like this in functions.php, called with a hook. But off the top of my head, I believe you could drop that in place into headers.php.

  3. michellebeth
    Member
    Posted 1 year ago #

    hmmm.... I am very new to this whole wp thing, so although I understand what you mean I have no idea how to do it!

  4. michellebeth
    Member
    Posted 1 year ago #

    oh i have made a menu with pages...

  5. Cormac Bracken
    Member
    Posted 1 year ago #

    oh i have made a menu with pages..

    Then forget my ramblings about categories and hooks, and stick with pages and directly editing the template.

    Can you set featured image to be a slideshow instead of a static pic?

    Nope. Well, you can achieve the effect you want, but not by using the featured image functionality.

    I have no idea how to do it

    Make a few slideshows, one for each page. Also decide which one is to be the default - probably one that should go on your home page. As you're creating them, you'll be asked to provide a slug. Make a note of each one. In my code above, these slugs appear as "slideshow-slug-1" etc.

    Make a few pages. The content can be blank for now, but you'll need to provide a title. Then WP will automatically create a slug, which appears below the Title field in the page editor. You can edit that slug if you want. Make a note of each one. In my code above, *these* slugs appear as "page-slug-1" etc.

    Open headers.php. As I understand it, you've already put in a line there, to display a single slideshow. Delete that line, and paste the code above. Now modify the code, so that each is_page() contains one of the page slugs you noted, and each meteor_slideshow() contains the appropriate slideshow slug to match that page. For the last pair of lines, the else, put your default slideshow slug. If WP doesn't recognise which page it's on from the previous options, it'll show this one. Typically that might be the homepage, but it could also be any other page, such as pages added after you've finished the design.

  6. michellebeth
    Member
    Posted 1 year ago #

    thanks so much for this....!!

    I seem to be missing something though as all of the function text above is all that's showing in place of the slideshow? Sorry I would show you but i'm using MAMP...

    also... not all of the pages will need a slideshow in the header spot. 2 will require a static image like featured image, and one section no image at all (products). Do i just put if/else statements for these other pages too and set what they should be?

  7. michellebeth
    Member
    Posted 1 year ago #

    would another way of doing this (selecting between static images and slideshows) be to take it all out of the header.php and create another page template or 2 - and put the code in these templates instead? I am slowly learning php and wp!!! : )

  8. Cormac Bracken
    Member
    Posted 1 year ago #

    all of the function text above is all that's showing in place of the slideshow?

    To clarify, you mean when you view the site in your browser, you can see the code?
    If so, you just need to put <?php before the start of that code, and ?> after the end. Most template files are a mixture of html and php code. We use those two things to indicate the start and end of a section of php code.

    would another way of doing this (selecting between static images and slideshows) be to take it all out of the header.php and create another page template or 2 - and put the code in these templates instead?

    That's possible -with some extra stuff to do - but since you'd have to create a page template for each individual page - and then maintain each one if you change something else in the page design - I wouldn't recommend it.

    not all of the pages will need a slideshow in the header spot. 2 will require a static image like featured image, and one section no image at all (products). Do i just put if/else statements for these other pages too and set what they should be?

    Yes.

    Does your theme currently put featured images into the header area? If so, you should be able to use get_header_image() (with nothing inside the brackets) instead of meteor_slideshow( "slideshow-blah" ).

  9. michellebeth
    Member
    Posted 1 year ago #

    yup can see the code, so I already tried putting the php tags around it (I think it's correct) and then the whole site disappeared...

    I'm making a child of twentyeleven. This is the code for my header.php:

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     * @since Twenty Eleven 1.0
     */
    ?><!DOCTYPE html>
    <!--[if IE 6]>
    <html id="ie6" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 7]>
    <html id="ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html id="ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php
    	/*
    	 * Print the <title> tag based on what is being viewed.
    	 */
    	global $page, $paged;
    
    	wp_title( '|', true, 'right' );
    
    	// Add the blog name.
    	bloginfo( 'name' );
    
    	// Add the blog description for the home/front page.
    	$site_description = get_bloginfo( 'description', 'display' );
    	if ( $site_description && ( is_home() || is_front_page() ) )
    		echo " | $site_description";
    
    	// Add a page number if necessary:
    	if ( $paged >= 2 || $page >= 2 )
    		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
    
    	?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <?php
    	/* We add some JavaScript to pages with the comment form
    	 * to support sites with threaded comments (when in use).
    	 */
    	if ( is_singular() && get_option( 'thread_comments' ) )
    		wp_enqueue_script( 'comment-reply' );
    
    	/* Always have wp_head() just before the closing </head>
    	 * tag of your theme, or you will break many plugins, which
    	 * generally use this hook to add elements to <head> such
    	 * as styles, scripts, and meta tags.
    	 */
    	wp_head();
    ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed">
    	<header id="branding" role="banner">
    			<hgroup>
    				<h1 id="site-title"><span><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    			</hgroup>
    			<nav id="access" role="navigation">
    				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
    				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    				<div class="skip-link"><a href="#content">"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    				<div class="skip-link"><a href="#secondary">"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
    				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    			</nav><!-- #access -->
    			<?php
    				// Check to see if the header image has been removed
    				$header_image = get_header_image();
    				if ( $header_image ) :
    					// Compatibility with versions of WordPress prior to 3.4.
    					if ( function_exists( 'get_custom_header' ) ) {
    						// We need to figure out what the minimum width should be for our featured image.
    						// This result would be the suggested width if the theme were to implement flexible widths.
    						$header_image_width = get_theme_support( 'custom-header', 'width' );
    					} else {
    						$header_image_width = HEADER_IMAGE_WIDTH;
    					}
    					?>
    			<a>">
    				<?php
    					// The header image
    					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
    							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
    							$image[1] >= $header_image_width ) :
    						// Houston, we have a new header image!
    						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    					else :
    						// Compatibility with versions of WordPress prior to 3.4.
    						if ( function_exists( 'get_custom_header' ) ) {
    							$header_image_width  = get_custom_header()->width;
    							$header_image_height = get_custom_header()->height;
    						} else {
    							$header_image_width  = HEADER_IMAGE_WIDTH;
    							$header_image_height = HEADER_IMAGE_HEIGHT;
    						}
    						?>
    					<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
    				<?php endif; // end check for featured image or standard header ?>
    			</a>
    			<?php endif; // end check for removed header image ?>
    
    			<?php
    				// Has the text been hidden?
    				if ( 'blank' == get_header_textcolor() ) :
    			?>
    				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
    				<?php get_search_form(); ?>
    				</div>
    			<?php
    				else :
    			?>
    				<?php get_search_form(); ?>
    			<?php endif; ?>
    
    <?php function rhl_select_slide_header() {
    	 if ( function_exists( 'meteor_slideshow' ) ) {
    		if ( is_page( 'http://localhost:8888/veryfoodEN' ) {
    			meteor_slideshow( "vfhome" );
    			}
    		elseif ( is_page( 'http://localhost:8888/veryfoodEN/azienda' ) {
    			meteor_slideshow( "vfazienda" );
    			}
    		else
    			get_header_image(); //default-fallback if none of the above are true
    		}
    }
    ?>
    
    	</header><!-- #branding -->
    
    	<div id="main">
  10. Cormac Bracken
    Member
    Posted 1 year ago #

    That looks almost right to me. On line 98 you have this code fragment that doesn't make sense: <a>">. In the original file it's <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> I'd guess that's why you're getting a white screen; if not, you'll have to check through your code line by line for similar typos. (Or get a fresh copy of that file and insert your changes again, checking each one at a time).

    Also in our select function, you've got is_page( 'http://localhost:8888/veryfoodEN'. is_page can accept a few different types of variable, but as far as I know, it won't work with a full URL. The slug that I mentioned, is the part you can see/edit, while you're editing that page. Just under the title field. Most likely it would be is_page( 'veryfoodEN' or perhaps is_page( 'veryfooden'.

  11. michellebeth
    Member
    Posted 1 year ago #

    It's still not working.... I replaced the header.php with a new one, and put the select function back in with php tags and just the slug bit without the full URL..... and it went white. Took the select function section out again and all fine but obviously no slideshow, so is the problem in the function code?

    This is it, same as you wrote basically with those little modifications:

    <?php function rhl_select_slide_header() {
    	 if ( function_exists( 'meteor_slideshow' ) ) {
    		if ( is_page( 'veryfoodEN' ) {
    			meteor_slideshow( "vfhome" );
    			}
    		elseif ( is_page( 'azienda' ) {
    			meteor_slideshow( "vfazienda" );
    			}
    		elseif ( is_page( 'cosafacciamo' ) {
    			meteor_slideshow( "vfcosafacciamo" );
    			}
    		else
    			get_header_image(); //default-fallback if none of the above are true
    		}
    }
    ?>

    what do you think??

  12. Cormac Bracken
    Member
    Posted 1 year ago #

    Ahhhh... a missing closing bracket at the end of every is_page line.

    It should be like this:

    <?php function rhl_select_slide_header() {
    	 if ( function_exists( 'meteor_slideshow' ) ) {
    		if ( is_page( 'veryfoodEN' )) {
    			meteor_slideshow( "vfhome" );
    			}
    		elseif ( is_page( 'azienda' )) {
    			meteor_slideshow( "vfazienda" );
    			}
    		elseif ( is_page( 'cosafacciamo' )) {
    			meteor_slideshow( "vfcosafacciamo" );
    			}
    		else
    			get_header_image(); //default-fallback if none of the above are true
    		}
    }
    ?>
  13. michellebeth
    Member
    Posted 1 year ago #

    arghhhh thankyou I didn't see that at all..! well we're getting somewhere... Site is back, but still minus the slideshow or header image. Maybe it's the plugin though - I tried just inserting the shortcode for each one on the relevant page and it just put the same slideshow on every page - I double checked that i'd selected the right slideshow for each image.............

  14. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Try to get the shortcode working first, then worry about the header function.

    Doublecheck that you are using the slideshow slug and not the title. I noticed some mixing of slugs and titles in this thread, like the slug will always be lowercase with dashed, no uppercase letters or spaces.

    So make sure you don't have a shortcode that looks like this:

    [meteor_slideshow slideshow="Test Slideshow"]

    It should look something like this:

    [meteor_slideshow slideshow="test-slideshow"]

    And doublecheck that the slideshows do have slides added to them.

    You are working on this locally? If you could get it online I could be of more assistance.

  15. michellebeth
    Member
    Posted 1 year ago #

    ok... so i have re-installed meteor slides, deleted and remade the 3 slideshows (of 6 images each) with slugs like veryfood-home etc, and still no joy - all 3 slideshows are showing the same 6 images although called differently... I am using the shortcode [meteor_slideshow="veryfood-home"] etc....but i did work out a clue: it seems to be taking the images for all 3 slideshows from the top six images listed in the slides list. I added an image and as it was published last it's at the top of the list, and lo it's now the 1st image in all 3 slideshows.

    I am working on the site locally but will try to get a version on the back of another site if i can....

  16. michellebeth
    Member
    Posted 1 year ago #

    i think it would help though also if i read what mr leuze wrote properly :)

    shortcode works... missed out the double "slideshow"

    on to the header function....

  17. michellebeth
    Member
    Posted 1 year ago #

    hmm. i just don't know enough about php to get this function code to work... I need it to call the 3 slideshows on 3 different pages and then 4 other pages to have different static images, no slideshow, and one page to have no image at all .............

  18. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Good, if the shortcode is working that is a good start. Now for the next step, I would try and just get the slideshow in the spot that you want it, once you have it showing up and working how you want it, I can help you get the PHP conditions going that you'll need.

    I'm not sure how far you got with that or if you already got it in the header. I have a gist on Github with a modified version of the Twenty Eleven header.php file with the slideshow tag in there, that might be a good place to start: https://gist.github.com/JLeuze/3151274

    That doesn't remove the existing header image, you'd need to do that in the header options. Are you using a child theme I'd recommend doing that if you haven't already made changes to the theme.

  19. michellebeth
    Member
    Posted 1 year ago #

    ahhhh brilliant.... thanks, that code helped a lot - i checked that each of the slideshows was working just inserting into the header with
    <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow( 'veryfood-home' ); } ?> etc and they all worked fine... then i managed to get the function code to call the right slideshow onto the home page with your github code but there's something wrong with the rest of the if/else statements as the other slideshows don't appear:

    <?php if ( is_front_page() ) {
    if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow( 'veryfood-home' ); }
    elseif ( is_page( 'azienda' )) {
    			meteor_slideshow( 'veryfood-azienda' );
    			}
    		elseif ( is_page( 'cosafacciamo' )) {
    			meteor_slideshow( 'veryfood-cosa-facciamo' );
    			}
    		else {
    			 //default-fallback if none of the above are true
    		}
    }
    ?>

    And then there's the other bits i need to do... : )

  20. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    The braces aren't quite right so the whole thing is wrapped in an is_front_page conditional and only runs on the homepage. Try this:

    <?php if ( function_exists( 'meteor_slideshow' ) ) {
    	if ( is_front_page() ) {
    		meteor_slideshow( 'veryfood-home' );
    	} elseif ( is_page( 'azienda' ) ) {
    		meteor_slideshow( 'veryfood-azienda' );
    	} elseif ( is_page( 'cosafacciamo' ) ) {
    		meteor_slideshow( 'veryfood-cosa-facciamo' );
    	} else {
    		 // Default slideshow or image.
    	}
    } ?>
  21. michellebeth
    Member
    Posted 1 year ago #

    It works! Thank you so much for all your help, both of you....

  22. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    You're welcome!

  23. jrobie23
    Member
    Posted 10 months ago #

    First of all... Thanks to y'all for the help w/ this code. I'm rather new to PHP. So, I've been tweaking this and have added an "array". I'm just curious if THAT is what is messing up my code or if you see something else that is causing errors. Are "arrays" allowed?

    <?php if ( function_exists( 'meteor_slideshow' ) ) {
    	if (is_page(array('about','company-profile','michael-riess','patrick-riess','robert-riess','contact','directions','quotes'))) {
    		meteor_slideshow( 'home' );
    	} elseif (is_page(array('metal-buildings','sales','concept','maintenance','erection','design'))) {
    		meteor_slideshow( 'metalpage' );
    	} elseif (is_page(array('wood-construction','residential','commercial','industrial','municipal','panelized'))) {
    		meteor_slideshow( 'woodpage' );
    } elseif (is_page(array('crane-service','on-site-operator','rental'))) {
    		meteor_slideshow( 'cranepage' );
    } elseif (is_page(array('insulated-metal-panel','vertical','horizontal','roof-application','interior-partitions','firewalls'))) {
    		meteor_slideshow( 'panelpage' );
    } elseif (is_page(array('photogallery','completed-project'))) {
    		meteor_slideshow( 'home' );
    } else meteor_slideshow( 'home' );
    }
    } ?>
  24. jrobie23
    Member
    Posted 10 months ago #

    oops... don't know how to delete a post... Found the extra "}" at the end and that fixed it... perhaps this code will help someone wanting to do multiple pages??

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic