[Plugin: Header Image Slider] Heres a solution to make banners clickable

I installed your template and the options to add URLs are there, but when I click on the header, nothing happens.

Any suggestions?

Thanks for sharing this asbrown!

It works for me on 3.2.1. A nice simple solution for linking the slides to pages. I hope the plugin developer considers including this functionality in an updated version of the plugin.

I installed this, but I’m still not seeing the option to add URLs.

I’m trying to narrow in on my issue. When I go into the edit screen for the plugin, it shows “header-image-slider/urls.php (inactive)” even though the main header-image-slider files show as active. Any help would be greatly appreciated!

I also need to make the images clickable.

I figured out my issue. I was hardcoding the images using the functions.php file. As soon as I started uploading them through the header control panel, bang, there’s the URLs button. Thanks!

Hmmm… I’m actually having the same issue as MarcFolch. I plugged the URLs in, but nothing happens when I try to click the header.

Okay, narrowing in on it now. The links work when I use boom_header_image(), but not when I auto-insert. My site is pretty dependent on auto-insert as of now (because I have static headers replacing the slider on sub pages), so I’d really like to get this working with auto-insert. Any ideas?

I ended up recoding things to use boom_header_image() instead of auto-insert and it’s working now, but it would be awesome if you could get the code working for auto-insert for others who have the same issue.

@asbrown : can you explain a little how to install your fix? I am working on my first WP site and am in a pickle figuring the header image slider would easily link to separate pages. Ouch.

Any help is appreciated!

hi to all, i am new here and i need all help to develop sites

Working on the code provided by asbrown, I’ve made some updates so that the modified plugin works when auto-inserted.

First, I added a function in general-template.php to grab the link array. I added it right after the boom_get_header_images function, around line 59.

/**
 * ADDED TO GRAB LINKS FOR auto_insert FUNCTION ON header-image-slider.php - m.
 * Returns a one dimensional array of header image links.
 *
 * 6/30/12
*/

function boom_get_header_image_links() {
	$available_links = array();
	if( get_theme_mod( 'header_image', '' ) == 'boom-slider-uploaded' ) {
		$available_links = unserialize(get_option( 'boom_available_headers_links' ));
	} else {
		return array();
	}
	return $available_links;
}

Second, I modified the auto_insert function in header-image-slider.php to call the function above, and to insert the anchor if the link value was not blank. I simply commented the current version of auto_insert, and dropped this one in below it, around line 270.

/**
 * THIS IS THE UN-MINIFIED VERSION OF THE CODE ABOVE, FIXED TO USE LINKS PROPERLY - m.
 *
 * 6/30/12
 */
function auto_insert() {
	if( boom_slider_get_option('autoinsert') ) : ?>
	<script>
		jQuery(function($){
			function boom_build_slider( slides ) {
				imgs = '';
				$.each(slides, function(i, value){
					if (slidelinks[i] != "") { imgs += '<a href="' + slidelinks[i] + '"><img src="' + value + '" alt="" /></a>' }
					else { imgs += '<img src="' + value + '" alt="" />' };
				});
				return '<div class="slider-wrapper theme-default"><div class="ribbon"></div><div class="nivoSlider headerSlider">'+ imgs +'</div></div>';
			}
			var slides = <?php echo str_replace("\\/", "/", json_encode( boom_get_header_images() ) ) ?>;
			var slidelinks = <?php echo str_replace("\\/", "/", json_encode( boom_get_header_image_links() ) ) ?>;
			var $header = $('img[src="https://boom-slider-default"], img[src="https://boom-slider-uploaded"]');
			var $parent = $header.parent();
			if( $parent.is('a') ) { // in case the header image is wrapped in a link, also remove the link
				$parent.after( boom_build_slider(slides) ).remove();
			} else {
				$header.after( boom_build_slider(slides) ).remove();
			}
			var $slider = $('div.headerSlider');
			$slider.find('img:first').load(function(){ // we have to wait for an image to be loaded to get the width and height
				var width = $(this).width(),
					height = $(this).height();
				$slider.css({
					'width': width,
					'height': height
				}).nivoSlider({
					<?php echo boom_nivo_slider_options() ?>
				})
			});
		});
	</script>
	<?php endif;

}

You’ll notice that I used the non-minified version of auto_insert that I found in the 0.2 build on the subversion repository. I’m not sure what, if anything, might break when using this earlier version of auto_insert, but my php and javascript aren’t strong enough to modify the minified version.