Header Image Slider
[resolved] Does not show slides... (26 posts)

  1. chrizze
    Posted 4 years ago #

    I love this Nivo-slider, but it does not show the images on my Twentyeleven theme. It only shows the loading "circle", but no images.
    Would you please give us your header-code for instructions on how to install and implement this plugin into our TwentyEleven themes?

    I tried changing this code in header.php, but no luck.

    <?// Check to see if the header image has been removed
    				$header_image = get_header_image();
    				if ( ! empty( $header_image ) ) :

    It's if it does not find the images...
    I have no other plugins than Custom Contact Forms and this installed...

    Please help! :)


  2. Donnacha
    Posted 4 years ago #

    Wonderful idea for a plugin but, unfortunately, this is broken.

    When the slider is turned on, images appear as broken and the image URL is:


    ... so, clearly, it is a fairly simple bug.

    I hope that Shazdeh, the plugin developer, gets the chance to fix this because this plugin has a lot of potential.

  3. shazdeh
    Plugin Author

    Posted 4 years ago #

    Are you using the boom_header_image() template tag? Built-in header_image() function only returns the image URL, so except using Output Buffering in PHP, I have no choice but to make you use a template tag.
    Now, in TwentyEleven you must remove this whole chunk in header.php:

    				// Check to see if the header image has been removed
    				$header_image = get_header_image();
    				if ( ! empty( $header_image ) ) :
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    					// 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 : ?>
    					<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 ?>
    			<?php endif; // end check for removed header image ?>

    and replace it with boom_header_image().
    Please let me know if it worked.

  4. pwnixon
    Posted 4 years ago #

    This is (I think...) exaclty the plugin I'm looking for!

    What I want to do is pull the Featured image from a post (with the catagory of 'Featured') and populate the slideshow (on the home page) with that image and link it to the post.

    I'm building a child theme of 'twentyeleven' and I'm pretty new to WordPress. Do you have any suggestions?

  5. Donnacha
    Posted 4 years ago #

    Shazdeh, thank you so much for your incredibly quick reply.

    Your solution of editing TwentyEleven's header.php does work but it would be better, for most users, if there was a way to achieve this without destructively editing a file in the default theme.

    In your TwentyEleven screenshot, I see that the navigation circles appears within the photo area but on my test installation, http://AmsterdamTalk.com , those circles appear on the menu bar, where they can be obstructed by the menu items.

    Also, is there any way to change the transition animations to something more subtle?

    Thanks again for creating this great plugin.

  6. chrizze
    Posted 4 years ago #

    Donnacha or Shazdeh, how did you get it to work?
    I tried the above methods, but my installation does not work?
    I can get Nivo-slider to work elsewhere..but not on my "test-site".

    Could you please help?

    This is what my Header.php outputs on the frontpage,

    <div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div class="headerSlider nivoSlider" style="width: 1000px; height: 288px">
    <img alt="" src="http://christerjohansson.net/wp-content/uploads/2011/08/wheel.jpg">
    <img alt="" src="http://christerjohansson.net/wp-content/uploads/2011/08/header2.jpg">

    And this is my actual Header.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(); ?>>
    <!--[if IE 7]>
    <html id="ie7" <?php language_attributes(); ?>>
    <!--[if IE 8]>
    <html id="ie8" <?php language_attributes(); ?>>
    <!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
    <html <?php language_attributes(); ?>>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    	 * 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 ) );
    <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>
    	/* 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.
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed">
    	<header id="branding" role="banner">
    				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" 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>
    <?php boom_header_image(); ?>
    				// Has the text been hidden?
    				if ( 'blank' == get_header_textcolor() ) :
    				<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
    				<?php get_search_form(); ?>
    				else :
    				<?php get_search_form(); ?>
    			<?php endif; ?>
    			<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 class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?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 assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    			</nav><!-- #access -->
    	</header><!-- #branding -->
    	<div id="main">

    Have I implemented the code-tag for Nivo-slider wrong?
    Any ideas?

    Thank you for all your help, and this great plugin.

  7. Donnacha
    Posted 4 years ago #


    Yes, you seem to have inserted the code-tag correctly in header.php.

    Are you sure that you have correctly selected the slider in Appearance > Header ?

  8. chrizze
    Posted 4 years ago #

    Donnacha, how do you mean?
    I selected the Nivo slider under Apperance > Header > Nivo Slider (Uploaded images)

    I have set up a testweb too... http://christerjohansson.net/
    But I can't seem to figure it out...You got it to work, why can't I do it?

    Any ideas?

  9. Donnacha
    Posted 4 years ago #


    I don't know why it isn't working for you, I looked at your test site and the continuous loading image you're getting is nothing like the problem that I had.

    The best way to troubleshoot it would be to set up a completely new installation of WordPress, install only the Header Image Slider plugin and then, in Appearances > Header, select Nivo Slider and the default images i.e. do not upload any images of your own until you establish that it works with the default images.

  10. chrizze
    Posted 4 years ago #

    Yes, I just tried that method on my local WAMP-server, and the slider works fine there. I guess there is some sort of conflict between the jQuery-libraries.

    About the slider "menu"..these "dots" must be moved through CSS, I guess they are controlled from the plugin's CSS-file. I'll look into it...


  11. chrizze
    Posted 4 years ago #

    Can you please tell us how you got the "nav" for the slider to sit inside the image?
    I moved my menu down 37px, but I feel that there's got to be a better way?

    Did you move the navigation (the dots) by CSS? If yes, please inform us on how you do it.

    Thank you for an otherwise nice plugin! :)

  12. shazdeh
    Plugin Author

    Posted 4 years ago #

    The position of slider nav controls should actually be controlled by the theme. For example, on a minimal design, it makes it more beautiful if the controls are below the slider itself. Nonetheless I'm planning on a visual UI to control their position.
    You can use this bit of CSS to change it's position:

    .nivo-controlNav {
    bottom: 5px;

    @chrizze: I saw your website. I'm not sure what's the problem, but I continue to debug it and I'll let you know as soon as I find out.

    for most users, if there was a way to achieve this without destructively editing a file in the default theme

    As I said, the header_image function only returns the URL of the image. I could do output buffering, but AFAIK it slows down the pages.
    One way to address this is to use JavaScript to remove the header image and then replace it with the slider. Do you think it's a good idea?

  13. shawnhoefer
    Posted 4 years ago #

    I've got the images to show, but I would like to eliminate the lower row of navigation dots that tend to obscure the menu in 2011. Help?

  14. shawnhoefer
    Posted 4 years ago #

    For now, I've edited the theme's CSS to give the header some room, but ideally, I'd rather eliminate the bullet nav beneath the slider...

  15. Donnacha
    Posted 4 years ago #

    @shazdeh - thanks for the CSS tip, that worked for me, I found that moving controlNav bottom: 50px looked good and moving it right: 50px centered it up a lot better.

    One thing that would be good, in the case of most themes, would be if the navigation circles acted like the direction arrows and only became visible when the user hovers over the slider area, allowing the photos to remain completely unobscured unless the user specifically interacts with the area.

    I have no idea whether Javascript would be a better solution but it sounds as if it would be a lot trickier for you and would possibly increase the number of conflicts with other plugins.

  16. shazdeh
    Plugin Author

    Posted 4 years ago #

    @chrizze: I think the problem is with the date-picker script in Custom Contact Form. It makes this error: "Uncaught TypeError: Object [object Object] has no method 'datepicker'" and as a result it stops the execution of other scripts in the page.
    Disable the plugin and check if it fixes the problem.

  17. chrizze
    Posted 4 years ago #

    Great! I uninstalled my Custom Contact Forms plugin, and Voila!
    I now use the Gravity Forms instead, seems better.

    I figured out the CSS-part last night... I added bottom: 50px;

    Thank you for this nice plugin...it will be very useful.

  18. paulgt4rc
    Posted 4 years ago #


    Hi Shazdeh, thanks for a superb plugin, I'm new to WP and was asked by a friend to insert a sliding header.. gave me a real headache until I found Nivo and your plugin!

    I have question related to this post with regards to the control navigation.

    I see you have gave the code to change this but which CSS file do I put this in and where?

    I also noticed that in settings you have put in 'nav control bottom position' default was -45 so I changed to 50 but the position does not move.

    As I'm here ill also ask about IE 9 compatibility, when viewing it doesn't show the slider image.. just a broken image symbol, this works if I use the IE compatibility button.. is there a way around this?


    Many thanks in advance

  19. shazdeh
    Plugin Author

    Posted 4 years ago #

    @paulgt4rc: You are also using Nivo Slider plugin which load its stylesheet after Header Image Slider so it overwrites the CSS rules. Use one or the other! :)
    And about IE, I really don't know what's going on, it's working perfectly fine in IE8 but not 9! Weird weird. I'll investigate further.

  20. paulgt4rc
    Posted 4 years ago #


    Thanks for your help, located the default.css in the nivo slider theme folder.. works a treat :o)

    Ill keep my eye on the forum for any news the ie9 issue.

    Thanks again

  21. superpotion
    Posted 4 years ago #

    @ chrizze

    To use Custom Contact Forms with Header Image Slider, go to Custom Contact Forms -> General Settings and change Frontend jQuery: Disabled

    You'll have to sacrifice CCF's Datepicker and Tooltips tho'.

  22. Rendo
    Posted 4 years ago #


    thx, works fine for me!

  23. bacodesign
    Posted 4 years ago #

    Thanks very much, Shazdeh help was really useful for me (boom_header_image() template tag)

  24. bcmarketing
    Posted 4 years ago #

    I cannot get this plugin to show any of the header images. It's just blank. I doesn't show the default header options or the header images I've uploaded and ticked. Any help?

  25. lagstrom
    Posted 4 years ago #

    I have a problem with IE on PC. There is a huge gap between the image slider and the content at first. This goes away with a refresh page.
    In the slider settings the image is broken and only show up a huge white area.
    What could be the problem here?
    MAybe I should insert shortcode in header.php? How do I do that then?

    On mac /chrome / Firefox this does not occur.

  26. Jorge Jaral
    Posted 4 years ago #

    Hi there shazdeh; I guess that you've been working hard on several things, I started to use your plugin and it works awesome, however there is still room for improvement.

    In example, is there a way that you make the images clickable? I mean, to click them and redirect the user to a specific page, maybe a form to register or to make a requirement.

    Also; I'd love to have the ability to select the slider to only work on the homepage.

    I guess I'm exceeding my Santa Claus letter, but if you can make at least the first one you will gain a friend in Mexico :D


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Header Image Slider
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic