I want to show a different slideshow on each page where header image would be
-
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 – https://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!!
-
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.
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!
oh i have made a menu with pages…
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, theelse
, 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.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?
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!!! : )
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 ofmeteor_slideshow( "slideshow-blah" )
.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="https://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( 'https://localhost:8888/veryfoodEN' ) { meteor_slideshow( "vfhome" ); } elseif ( is_page( 'https://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">
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( 'https://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 beis_page( 'veryfoodEN'
or perhapsis_page( 'veryfooden'
.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??
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 } } ?>
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………….
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.
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….
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….
- The topic ‘I want to show a different slideshow on each page where header image would be’ is closed to new replies.