How to integrate Supersized 3.1.1 in WordPress

[az_alert_box type_acc=”alert-warning”]Although mentioned in this post, the demo of Supersized is currently not visible anymore on this website.
[/az_alert_box][az_alert_box type_acc=”alert-info”]UPDATE: I have now written a WordPress plugin taking care of the integration of Supersized 3.1.3 in WordPress, with many options available to choose how and where to display it. Have a look at WP Supersized!!

UPDATE: This tutorial should also be valid for Supersized 3.1.2 and 3.1.3.

[/az_alert_box]

[az_column_text]Since my previous post on the integration of Supersized 3.0 in a WordPress page, a new version of Supersized has appeared: Supersized 3.1.1.

I thought that it would be useful to update my tutorial on the integration of Supersized in WordPress to reflect the changes from Supersized 3.0 to 3.1.1 as this latest version makes it much easier than before.
I will first describe a clean install of Supersized 3.1.1 for WordPress. For those of you who have installed Supersized 3.0 according to my previous tutorial, I will also show how to update your existing installation of Supersized 3.0.
What I describe here is valid at least for WordPress 3.0 and above but is probably also valid for earlier versions of WordPress.

This tutorial is also available as a pdf file.

[/az_column_text]

[az_special_heading heading_type=”2″ heading_style=”italic” content_heading=”Integrate Supersized 3.1.1 in a WordPress page – clean install”]
[az_column_text]This time, I will do it a little bit differently than in my previous tutorial: I will now assume that you want to integrate Supersized in all your pages/posts. If you only want to include it in particular pages, then you will need to create a new set of page template, footer, and header for the pages where you want to use Supersized, with the appropriate calls to the corresponding header and footer.
I describe here the procedure for installing Supersized 3.1.1 in a WordPress page, using the slideshow/ folder of Supersized 3.1.1. The same should be valid for the core/ or flickr/ folders if you want to use these ones. Check the Supersized website for the correct usage of these files. As explained above, my tutorial is valid at least for WordPress 3.0 and above but is probably also valid for earlier versions of WordPress.

1. Download the Supersized 3.1.1.zip file from buildinternet.com and unzip it. Create a folder supersized/ within your theme folder and copy the slideshow/js/, slideshow/img/ and slideshow/css folders into that new folder (i.e. in: www.yourwebsite.com/wordpress/wp-content/themes/yourfavoritetheme/supersized/). If you want to use the other versions (core or flickr), copy the corresponding contents of those folders instead.
Within the supersized/ folder, create a slides/ folder where you will store your own images to be displayed by Supersized.
2. Go to the WordPress Appearance Editor and edit the header file.
In the &#60head&#62, after the call to the standard stylesheet, add the call to the Supersized stylesheet:

[/az_column_text][az_column_text]

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/supersized/css/supersized.css" type="text/css" media="screen" />

[/az_column_text]

[az_column_text]In the supersized.css file, you will need to adapt the file paths to the img/ folder according to your own installation (only necessary if you do not put the img/ folder (only necessary if you put the /img folder somewhere else than its original location).

At the end of the &#60head&#62, add the scripts for Supersized shown below. You may not copy text from my page but this code comes right from the fade.html file that you find in the Supersized folder. I also have prepared an example header.php file (based on the Twenty Ten theme) that includes the changes. Download this header file along with the footer that you will need in the next step.
All the options can be modified as you wish, just follow the usage described on the Supersized website. Do not forget to add your images in the supersized/slides/ folder. Add as many images as you wish in the list in the slides option as shown below, making sure to leave out the comma after the last image.

[/az_column_text][az_column_text]

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/js/supersized.3.1.1.min.js"></script>
<script type="text/javascript">  
			jQuery(function($){
				$.supersized({
					//Functionality
					slideshow               :   1,		//Slideshow on/off
					autoplay				:	1,		//Slideshow starts playing automatically
					start_slide             :   1,		//Start slide (0 is random)
					slide_interval          :   3000,	//Length between transitions
					transition              :   1, 		//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
					transition_speed		:	500,	//Speed of transition
					new_window				:	1,		//Image links open in new window/tab
					pause_hover             :   0,		//Pause slideshow on hover
					keyboard_nav            :   1,		//Keyboard navigation on/off
					performance				:	1,		//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
					image_protect			:	1,		//Disables image dragging and right click with Javascript
					image_path				:	'img/', //Default image path
					//Size & Position
					min_width		        :   0,		//Min width allowed (in pixels)
					min_height		        :   0,		//Min height allowed (in pixels)
					vertical_center         :   1,		//Vertically center background
					horizontal_center       :   1,		//Horizontally center background
					fit_portrait         	:   1,		//Portrait images will not exceed browser height
					fit_landscape			:   0,		//Landscape images will not exceed browser width					
					//Components
					navigation              :   1,		//Slideshow controls on/off
					thumbnail_navigation    :   1,		//Thumbnail navigation
					slide_counter           :   1,		//Display slide numbers
					slide_captions          :   1,		//Slide caption (Pull from "title" in slides array)
					slides 					:  	[		//Slideshow Images
									{image : 'http://www.votresiteweb.com/wordpress/wp-content/themes/votrethemefavori/supersized/slides/image1.jpg', title : 'title of the slide', url : 'urlofyourchoice'},
					                                {image : 'http://www.votresiteweb.com/wordpress/wp-content/themes/votrethemefavori/supersized/slides/image2.jpg', title : 'title of the slide', url : 'urlofyourchoice'}
												]							
				}); 
		    });
		</script>

[/az_column_text][az_column_text]3. Optional. If you want to use the Supersized navigation, you will need to go to the WordPress Appearance editor and edit your footer file, adding the following code at the end of the footer, right before wp_footer():[/az_column_text][az_column_text]

	<div id="prevthumb"></div> <div id="nextthumb"></div>
	<div id="controls-wrapper">
		<div id="controls">		
			<div id="slidecounter">
				<span class="slidenumber"></span>/<span class="totalslides"></span>
			</div>			
			<div id="slidecaption"></div>			
			<div id="navigation">
				<img id="prevslide" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/img/back_dull.png"/><img id="pauseplay" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/img/pause_dull.png"/><img id="nextslide" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/img/forward_dull.png"/>
			</div>
			&#60a href="https://www.worldinmyeyes.be/wp-content/uploads/2011/03/supersized3" class="stamp"><img src="img/supersized-logo.png"/></a>			
		</div>
	</div>

[/az_column_text]

[az_column_text]Again, you can find this code in the fade.html file or in the footer I included in my zip file. Make sure to set the Slideshow controls and Thumbnail navigation on otherwise you will not see the navigation controls.

4. Still two advices:
Make sure that the background of your theme has at least some transparent parts, otherwise you will not see Supersized in the background.
If you use the WP-Minify plugin, make sure to exclude supersized.3.1.1.min.js from minify, otherwise Supersized will not work correctly.

Done ! Enjoy Supersized 3.1.1 in WordPress !
You can see it in action on my About page.[/az_column_text]

[az_special_heading heading_type=”2″ heading_style=”italic” content_heading=”Updating an existing Supersized 3.0 installation in WordPress to Supersized 3.1.1″]
[az_column_text]
I describe here the procedure for updating Supersized 3.0 to 3.1.1 in a WordPress page, using the slideshow/ folder of Supersized 3.1.1. The same should be valid for the core/ or flickr/ folder if you want to use that one.
1. Download the Supersized 3.1.1.zip file from buildinternet.com and unzip it.

2. In the supersized/ folder within your theme folder, delete the content of the js/ folder (keep the folder). Delete also the images/ folder.

3. Copy the supersized.3.1.1.min.js file (already minified) from the Supersized 3.1.1 folder that you have unzipped into the existing js/ folder of the supersized/ folder within your theme folder. You can find it in the slideshow/ folder. If you want to use the other parts (i.e. core or flickr), the procedure should be similar.
Copy also the img/ folder from the Supersized 3.1.1 folder that you have unzipped into the Supersized folder within your theme folder.

4. In your css file corresponding to your page, replace the whole css from Supersized 3.0 by the css from version 3.1.1, making sure to adapt the file paths to the img/ folder according to your own installation.
5. In your header-supersized file (or your standard header if you modified it based on my previous tutorial), replace the whole scripts for Supersized part by the ones shown in point 2 of the fresh install procedure. You may not copy it from my page but you can copy it from the fade.html file that is included in the Supersized distribution folder or from my example header.php file (based on the Twenty Ten theme) that includes the changes. Download this header file along with the footer that you will need in the next step. If needed, update the paths to your own scripts files and slides folder. Of course, you may modify the options as you wish.

6. Still in the header file, at the start of the &#60body&#62, remove the following lines:

<div id="loading">&nbsp;</div>
<div id="content-wrapper&qu

7. In your Page Template, (e.g. the Supersized Page Template if your followed my previous tutorial), remove the last lines:

</div>
<div id="supersized"></div>

If you had put these lines in the footer (as explained in my corrected previous tutorial), then you should remove them from there.

Actually, there should be no trace of Supersized modifications in your page templates with this new version of Supersized.

8. Optional. Same as Point 3 of the fresh install procedure.

9. If you use the WP-Minify plugin, make sure to exclude supersized.3.1.1.min.js from minify, otherwise Supersized will not work correctly.

Done ! Enjoy Supersized 3.1.1 in WordPress !
You can see it in action on my About page.

I hope that this is clear. If you have questions, do not hesitate to ask me. And if you have improved on this, please tell me !

[/az_column_text]

35 Comments
  • Eric
    Posted at 02:55h, 23 March Reply

    this is useful, thanks. but how do you get post images to work? i.e. you can’t hard-code image array. are you using a preg_match_all() inside of WordPress theme single.php to get URLs and then foreach() to pick out just img tags in your single.php loop to retrieve post images and format into supersized array? this is the approach i used successfully with supersized2 but i can’t figure out how to do it with supersized3…

    • Ben
      Posted at 18:54h, 27 March Reply

      Eric,
      Sorry I can’t help you there. I didn’t try this approach.
      Try asking the question on the Supersized forum ?
      And if you find a way to do it, I would be interested !

  • Jason Leow
    Posted at 11:02h, 04 April Reply

    Hi Ben,

    Great detail on the tutorial here. Thanks so much for the guidance.

    I’m not good with doing all the coding, so would like to ask you for some rough directions/guidance please! πŸ™‚

    I want to intergrated the Supersized slider only to my Home page. I tried a mix of the methods you outlined in your previous tutorial, and this tutorial, creating the new set of page, header, footer php files by following your instructions for this tutorial, plus making the additional changes you mentioned in the previous tutorial.

    After that, I tried going to edit my Home page under WP admin panel -> Pages->Edit Page->Home->Page Attributes (in right side bar of edit page)->Templates to change the page template to the Supersized one, but I don;t see the option to select there.

    Any ideas what I can do?

    • Ben
      Posted at 20:09h, 06 April Reply

      Jason,
      The reason your new template does not appear in the list of templates in the Page attributes is probably that you did not modify the name of your new page template within the file. Have a look in the WordPress codex for the explanation. If this is your issue, it is very easily resolved by giving a new name to your template.
      Hope it helps.
      Ben

  • Erwin
    Posted at 22:56h, 04 April Reply

    This is a great script and your tutorial is clear, but I’m not getting it to work. I’m trying the twentyten team with your header-file. Updated the imagelinks and scriptlinks, but it doesn’t work. Am I missing something?

    • Ben
      Posted at 20:06h, 06 April Reply

      Erwin,
      Can you be more specific ? What have you done and what is happening/not happening ?
      Ben

  • Erwin
    Posted at 22:19h, 08 April Reply

    I was looking for what I did exactly and find a couple of faults myself. The path was not correct even as the version of the script wasn’t matching. So its working now.
    Thank you for the tutorial and the attempt to help!
    Erwin

  • Peter
    Posted at 19:47h, 21 April Reply

    hi thare, i got it working thanks to your tutorial for all the pages. But when i tested it in ie 6,7,8 and 9 my background is black?! Safari, Firefox, Opera all do the job?!

    • Ben
      Posted at 10:12h, 22 April Reply

      You are right. There seems to be a problem with IE 6 at least. I just tested my own page on IE6 and it does not appear correctly. The Supersized background appears indeed but the rest of the page is below on the screen instead of on top of the background image. I wonder if this would be solved by the latest version (3.1.3) that is supposed to solve some IE issues. I will investigate this asap. I need to update my Supersized 3.1.1 to 3.1.3 anyway.

      • Ben
        Posted at 20:48h, 10 May

        Peter,
        Version 3.1.3 does not solve the IE6 issue. Not surprising as Sam Dunn has announced on his blog that he would not support IE6 anymore. He also said that he was preparing a new version that should improve some scaling problems in IE7 and above.
        It seems that the problems with the black screen on IE are related to the presence of a comma at the end of the list of images. Remove it and everything should be fine.

  • Anna Bouchard
    Posted at 19:26h, 28 April Reply

    Hi, Ben! Thank you so much for your thorough explanation of how to implement Supersized. I am a complete web dev noob, so I hope you can help me in very simple terms with a problem I am having. I can get Supersized to work because of this error returning: Fatal error: Call to undefined function has_post_thumbnail() [in file] on line 126. Is there somewhere I should be defining this function? Can I comment this section out? I am running Supersized on a “splash” front page only, and all I need is the image to be called up. Thanks for any help you can give me.

    • Ben
      Posted at 20:37h, 10 May Reply

      Anna,
      I am probably not much more than an amateur at web dev πŸ˜‰
      As far as I can see, your problem should not be related to Supersized as it does not use this function anywhere.
      Maybe due to one of your plugin or to your theme ? Have you tried the installation of Supersized in the Twenty Ten theme to check if it works ? It should work with that theme.
      I will soon post a slightly improved tutorial, incorporating the improvements suggested by Matthew Garvin on his blog (Thanks Matthew !). This could also help.

  • Kelly
    Posted at 11:56h, 11 June Reply

    Anna, I’m guessing you used the example header file provided with this page? I had the same problem, till I customised the twentyten theme to my old themes style then used the files from here. No more problem. It’s calling to something specific to that theme I think. I’m no expert!

    Ben – YOU are an absolute genius. I would never have figured this out on my own! I had the same problem as someone above in that the version number was incorrect in the call to the javascript file – simply changed a 1 to a 3 and all was good πŸ™‚
    You can check out my usage on the front page of my site where I’ve set up a new page template, all other pages revert back to my original style.
    Thanks for all your hard work, you’ve made this little webmistress a happy gal!

    • Ben
      Posted at 20:14h, 15 June Reply

      Kelly,
      Thanks for the kind words πŸ™‚
      I checked your front page. It looks very nice but there seems to be a broken image in your title: looking at your source, I see an empty src (src=”” width=”940″ height=”198″) that leaves an empty space with a broken image. The Supersized logo is also broken (wrong path or removed image ?). If you want to remove it completely, you should remove the corresponding line in the footer of your theme.
      This should be easy to fix.
      To help you (and others) to install Supersized in WordPress, check out my new WP Supersized plugin that will soon be available. Almost ready but not completely. I expect to have it ready within a week or two. It will enable the easy integration of Supersized in a WordPress page/post, with all the options available in the admin page of WordPress. No need to modify the theme anymore !
      I will publish a post about it when it will be ready.

      • Kelly
        Posted at 23:29h, 15 June

        I only became aware of the broken images myself a couple of days ago – seems to be the twentyten theme as you can customise the header image, which I don’t use! Will recheck the paths for the supersized logo when I take a look at how to remove the one from within the theme.
        Looking forward to the plugin release, will definately take a look and pass the word around too!
        Once again, thanks πŸ™‚

      • Kelly
        Posted at 01:09h, 16 June

        I think I’ve fixed both issues, thanks for the heads up on the supersized logo – didn’t even notice!
        Cheers,
        Kelly

  • Fliberty
    Posted at 04:25h, 28 September Reply

    Hello, I am making direct integration with my theme, but I want to do it automatically, so that shows the images of the entrance, but the function does not allow me to use.
    For example, where image is the statement I’ve replaced with this:
    [php]
    slides : [ // Slideshow Images

    {image : ”, title : ”, thumb : ”, url : ”},

    ],
    [/php]

    Where I created a php function that extracts the first image thumbnails post, however not work since the declaration of the final image should not lead “coma” at the end.

    I hope I can help.

    • Ben
      Posted at 20:21h, 04 October Reply

      If I understand your question correctly, you would need to use something like the slides_list() function that I have written for my plugin. What it does is to loop through the array of images, stopping 1 image before the last one and then outputs the last image line separately, without the comma.

  • Jone
    Posted at 19:19h, 18 February Reply

    Hello Ben,

    Thanx for your plugin its great but, its dosn’t work in my website its load the images but i didn’t see the Navigation and thumbs check it please here
    Navigation http://demo.indexjo.com/amazon/collections/

    • Ben
      Posted at 19:24h, 28 February Reply

      Jone,
      Is your problem now solved ?
      I checked your link and I can see the navigation and the thumbnails (when clicking on the small arrow in the bottom left).

  • EJB
    Posted at 13:56h, 29 February Reply

    Hello Ben,

    I got a question about your plugin, It works on my site generally but the Images are not shown in a random order. Although I adjusted the settings to random in general settings and use a custom folder for images the pictures follow the same order every time, so not randomly.
    I use a custom field in the pages where i want to show the slideshow. I tried to use a cutom xml file but that doesn’t respond.

    • Ben
      Posted at 19:26h, 01 March Reply

      EJB,
      In all the tests that I have done, the random order is working very well. The only issue is in the thumbnails. There is a small bug in the Supersized jQuery plugin itself that I cannot solve myself right now: although the order of the images is indeed random (if you selected the option random), the slides displayed in the thumbnail trail are not displayed in the right order. Strangely, if you click on one of the thumbnails, you go to the correct slide (according to the random order), not the one corresponding to the thumbnail!

  • EJB
    Posted at 13:58h, 29 February Reply

    Sorry one more question, On top of the background slideshow I want to show embedded video’s but they start to stutter when de slideshow plays. Do you have any experience with that?

    thnx for your time!

    • Ben
      Posted at 19:28h, 01 March Reply

      EJB,
      I did not try this but I guess it must be related to the use of resources by the various scripts that are running at the same time. If you video is in flash, there is a good chance that this is due to the high load on the processor.

  • Michael
    Posted at 18:18h, 22 March Reply

    I just stumbled on your tutorial, which is really great! Thanks for taking the time.

    I might have missed it, but I’m curious if you could have the script pull all images from a directory, rather than listing each individual image in the script. Is there a way to have a “slide_path” with the value of ‘slides/’ so that all images are pulled automatically?

    • Ben
      Posted at 20:13h, 03 April Reply

      Michael,
      You should try my plugin WP Supersized.
      It allows you to do exactly that (and many other possibilities as well).

  • simon
    Posted at 11:33h, 13 September Reply

    Hi Ben

    Thank you so much for making the WP Supersized plugin.

    Everything runs smoothly, except that I am experiencing problems with constraining proportions on my background images when i resize the browserwindow.

    I have tried all possible combinations under Size and Position in my WP Supersized control panel, but nothing seems to help.

    Heres a link to the page I am working on:
    http://www.tingen.dk/test

    Heres a link to another page where I did a manual install where everything works fine:
    http://www.nordarchitects.dk

    Hope you can help

    Best
    Simon

    • Ben
      Posted at 20:33h, 04 October Reply

      Simon,
      Have you tried to set Fit Always to on while setting the others (Fit portrait and Fit landscape) to off ?
      This should then always work.
      The difference between your manual install and the plugin is that your manual install uses a very old version of supersized (3.0) where these options did not exist yet, I think.

  • Gojak
    Posted at 12:03h, 14 June Reply

    Hi,
    I have noticed that image_path option in header code doesn’t work. It accepts only ‘img/ path stated in supersized.shutter.js. Do you have any clue how to override this so I can use image_path:’/supersized/img/’, in theme header path?
    Thank you

  • Falko Knizia
    Posted at 19:32h, 31 July Reply

    Hello Ben,
    thank you for providing this wonderful wordpress-plugin!

    By chance I’ve discovered a small problem: Everything works fine… until there’s a 4th image while using the autostart-option – it will break/stop after the 3rd image.

    If I don’t use autostart, the fourth image is available via the (dot-)navigation.

    Special: When I use autostart but click on the 4th image (dot-navigation) first, it will show up and after that the loop will work without breaking.

    Any idea?

    Greetings
    Falko

  • juegosdeautos
    Posted at 21:16h, 07 May Reply

    Nice tutorial!!!

    thanks you

  • roksana
    Posted at 06:35h, 08 May Reply

    Is it possible to set this super sized slider from wordpress custom post? Slider functionality is in a script tag, how to write php code for custom post query inside a script tag?or is there any other way to do this? I want to set slider image upload facility from dashboard. is it possible?

    I am a new coder and sorry for so many questions. anyway, I am impressed to see your site,there are so many things to learn.

  • Irina
    Posted at 19:34h, 28 July Reply

    Hi Ben, thank you for your plugin, but it doesn’t work to my site πŸ™ I don’t know where the problem is!

    I have uploaded 5 images in 1440×900 into wordpress media thek and linked them into my first page. The slideshow runs, BUT – it shows me 3 images of each photo in different resolutions! So there are photos with good resolution and the others are really bad… Why are there everytime 3x the same photos?

    How can I stop it. Hope you understand what I mean.
    Thank you!
    Irina

    • Ben
      Posted at 12:09h, 05 August Reply

      Irina,
      It looks like the import into the WP media library has generated additional image sizes and the plugin is finding them all.
      I need to do additional tests to see why this happens.
      In the meantime, I would advise to try and remove the smaller images generated by WordPress from the library.

Post A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.