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:
http://nivo-uploaded-image/
… 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.
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:
<?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( '/' ) ); ?>">
<?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 : ?>
<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 ?>
and replace it with boom_header_image().
Please let me know if it worked.
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?
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.
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">
</div>
</div>
<script>
jQuery('div.headerSlider').nivoSlider();
</script>
And this is my actual Header.php,
<?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 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>
</hgroup>
<?php boom_header_image(); ?>
<?php
// 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(); ?>
</div>
<?php
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.
Chrizze,
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 ?
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?
Chrizze,
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.
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…
Thanks!
Shazdeh,
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! 🙂
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?
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?
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…
@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.
@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.
