Hi Abi, you can do this by using a conditional tag in your template file where you are adding the slideshow. So instead of using the slideshow template tag like this:
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
And replace it with this:
<?php // If on homepage, load Meteor Slides, otherwise load static image from theme
if ( is_front_page() ) {
if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); }
} else {
echo '<img src="' . get_template_directory_uri() . '/images/banner.jpg" alt="" />';
} ?>
Thank you, that’s really helpful. I am now at the stage where the slide show only shows on the home page (great). How can I now have a static image, different for each subsequent page? Is that possible?
Many thanks, Abi
Just to add I have added the plugin: WP Header Display – I thought that might do it?
Yes, you could do this by adding featured images to the pages and then loading a featured image instead of the static image. But if you are using the WP Header Display plugin you should be able to use their header_image function to load images on the other page like this:
<?php // If on homepage, load Meteor Slides, otherwise load WP Display Header images
if ( is_front_page() ) {
if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); }
} else {
?><img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /><?php
} ?>
Hi Josh, sorry not got on very well with the WP Header Display as it adds the image in the wrong place (behind the logo – rather than in place of the slider within the header template).
Just going back to your comments – “you could do this by adding featured images to the pages and then loading a featured image instead of the static image” …
Can I clarify this please …. I tried adding a unique image per page in the featured image section (right hand side of the edit page) and no luck.
Thanks for any help you can give, Abi
Yeah, you can use the page’s featured image, you just have to switch from loading the slideshow to loading a featured image, like this:
<?php // If on homepage, load Meteor Slides, otherwise load page's featured image
if ( is_front_page() ) {
if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); }
} else {
$jl_page_id = get_queried_object_id();
if ( has_post_thumbnail( $jl_page_id ) ) :
$jl_image_array = wp_get_attachment_image_src( get_post_thumbnail_id( $jl_page_id ), 'featured-slide' );
echo '<img src="' . $jl_image_array[0] . '" alt="" />';
endif;
} ?>
Thank you Josh, that worked a treat!!!
Sorry Josh, me gain … just another thought … the slides look great on my screen but on a differnt (very large screen) the slides are left aligned – leaving space to the right which doesnt look great … I dont want to make the slides wider … so wondered how can I centre align the slides so that it will look great on both screen sizes, and therefore leaving equal amounts of space to the left and right?
Its set to full width head which Im hoping to keep.
http://94.136.40.103/~secret-bakery.co.uk/
Many thanks, Abi
Thanks, how would I go about adding this centre alignment to the code you have given me? Thanks
<?php // If on homepage, load Meteor Slides, otherwise load page’s featured image
if ( is_front_page() ) {
if ( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow(); }
} else {
$jl_page_id = get_queried_object_id();
if ( has_post_thumbnail( $jl_page_id ) ) :
$jl_image_array = wp_get_attachment_image_src( get_post_thumbnail_id( $jl_page_id ), ‘featured-slide’ );
echo ‘<img src=”‘ . $jl_image_array[0] . ‘” alt=”” />’;
endif;
} ?>
You can add it as metadata to the meteor_slideshow function:
<?php // If on homepage, load Meteor Slides, otherwise load page's featured image
if ( is_front_page() ) {
if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow("", "align: 'center'"); }
} else {
$jl_page_id = get_queried_object_id();
if ( has_post_thumbnail( $jl_page_id ) ) :
$jl_image_array = wp_get_attachment_image_src( get_post_thumbnail_id( $jl_page_id ), 'featured-slide' );
echo '<img src="' . $jl_image_array[0] . '" alt="" />';
endif;
} ?>
Thanks Josh, that worked great on the home page slides, but not for the subsequent pages that use the featured image – any chance for some final advice for centering these images too please? Thank you so much!
You can use CSS to style the regular images on the other pages, but you need to add more markup to the image. add a class to the image, like “image-banner”:
.image-banner {
margin: 0 auto;
display: block;
}
