31 Dec How to integrate Supersized in a WordPress page
Supersized 3.1.1 is now available and a new version of my tutorial is available.
I really wanted to use Supersized as a slideshow for the background of my photography website based on WordPress. After a lot of experimenting, I finally managed to integrate it into a WordPress page. It seems that I am not the only one who has tried to make it work so I thought that my experience could be useful for others. Here is how I have done it. I am no specialist in coding so this can probably be done more efficiently but the essential is that it works ! You can have a look at the result on my About page.
Read below for the detailed procedure that I used.
I have not modified anything in the code itself so all the credits go to Sam Dunn at buildinternet.com for creating this superb full screen background !
My goal was to have only a slideshow with no navigation in the background but I guess that most of what follows remains the same if you want to use Supersized on a Post page or if you want to include the navigation part of Supersized.
This tutorial is based on the idea that you want to keep the standard page templates untouched. So I created a new set of css, page template and header for the page where I wanted to use Supersized.
Here is the procedure that I followed.
1. Download the Supersized 3.0.zip file from buildinternet.com. Copy the content of the Supersized folder into the theme folder that you will use (i.e. in: www.yourwebsite.com/wordpress/wp-content/themes/yourfavoritetheme/supersized/)
2. In your theme folder, make a copy of the standard header, giving it a new name (e.g. header-supersized.php).
Go to the WordPress Appearance Editor and edit this new header-supersized file. At the end of the <head>, add the scripts for Supersized. You can not copy text from this page but this code comes right from the default.html file that you find in the Supersized folder. You can copy it from there.
At the start of the <body>, add the following lines:
This last line is important: the content-wrapper div starts here in the header page but is not closed in this header file. It will be closed later in the page template (see below).
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 slides folder. Above, I show an example with two images but add as many as you wish, making sure to leave out the comma after the last image.
3. In you theme folder, make a copy of the standard Page Template, giving it a new name (e.g. Supersized Page Template).
Go to the WordPress Appearance Editor and edit this new template. At the top of the template, instead of calling the standard header, replace
This calls the new header containing the Supersized code that has been created above.
Add the following lines at the end of the page template:
CORRECTED: You need to create a copy of the footer.php file, rename it to footer-supersized.php. The following lines should then be added at the end of the footer-supersized.php file (instead of the end of the page template), just before wp_footer();
As you see, the content-wrapper div is closed here.
The very last line calls the Supersized background itself.
In this case, you will of course need to modify the call to the footer, at the end of the template: instead of calling the standard footer, replace
4. Copy the full supersized.css content into the standard Stylesheet (style.css) or add a call to the supersized.css file in your new header-supersized.php.
5. If you use the WP-Minify plugin, make sure to exclude supersized.3.0.js from minify, otherwise Supersized does not work correctly.
Everything should now be ready ! So far, I tested it successfully with WordPress 3.0.3 in Chrome 8.0 and Firefox 3.6. I still have an issue with IE8: it behaves erratically and several attempts are sometimes needed to get to the page. Also, it takes ages to load the first image or it just hangs there loading and loading… The good news is that IE9beta works without problem !
Enjoy Supersized in WordPress !
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 !
Bill SPosted at 00:18h, 12 January
Interesting- appreciate the sharing of your research.
I am trying to integrate Supersized into WP where the scrollable site lies on top of Supersized. Thus far, I cannot achieve the normal site scrolling (vertically) using Supersized. Have you had any success with a scrollable WP page and Supersized?
BenPosted at 20:16h, 12 January
I still have not tried it on a scrollable page. But Supersized 3.0 can do it in a simple html page (there is an example on the Supersized web page) so I guess it should work as well with WP.
I will try it when I have time.
BenPosted at 20:53h, 26 January
I have now tried a scrollable page.
Have a look at my About page . It is a scrollable page with Supersized in the background. To achieve this, I only had to apply the steps described in my tutorial.
Make sure that you do not have a background that is hiding Supersized.
ZakPosted at 17:18h, 14 January
Thanks for sharing. Do you know how to install this using existing headers in a template? I’m trying to avoid creating a new header as my theme uses several templates depending on the page. I’m basically trying to find out if I can install by just using a js function call in the header and css and code addition to the target template?
BenPosted at 19:26h, 14 January
As I explained in my tutorial, I only created a duplicate of my template and header because I wanted to create a unique page with Supersized in the background without modifying the rest of my site. But you can of course use exactly the same procedure on your usual template and header. Something I did not mention in my post is that you should of course remove any existing background to your page !
IvánPosted at 23:33h, 26 January
Thanks for the tutorial, I used it with Thematic Framework and works like charm. If someone are trying with this theme, follow the instruccions, just in the part to add this code:
Use the hook ‘thematic_before’ in your file functions.php
hellisloosePosted at 12:56h, 17 September
I was able to fumble my way thru SMF forum theme index.template.php and successfully added supersize3.2.4 code . thanks
PeterPosted at 13:01h, 05 March
Is it possible to view a specific background image for the projects in this theme?
The problem might be, that the pages doesn’t load new when clicking in the next project
BenPosted at 19:56h, 03 April
With the latest update, you can easily choose different images for each page or post by selecting them in the page/post editor (in the WP Supersized source of images box).
BenPosted at 19:57h, 03 April
I forgot to mention that you must be careful to have a transparent background for your theme, otherwise the WP Supersized background images will not be visible. Have a look at the FAQ for more details.
expresscmsPosted at 09:22h, 18 July
can you with this script make the site slide away so yo can only see the bagground and go thrug the gallery
BenPosted at 08:39h, 22 July
If what you ask is to be able to have full screen slideshow without anything else on screen (no menu or widgets), this is very easy by creating a new template in WP (removing all elements that you do not need). I am preparing a post describing how to build a full screen slideshow with WP Supersized. I hope to have it ready soon.
Joshua ZuckermanPosted at 17:12h, 12 March
Can’t seem to get swipe viewing on Ipad to work. Does WP-SS work for swiping on Mobile?
laxmanvelPosted at 14:37h, 13 August
will you solve my problem?
I hope you will solve my problem.
I’m using wp-supersized wordpress plugin in my site and even using Google language translator plugin. when i click different language in google language translator plugin all contents are changed suddenly but wp-supersized plugin image slider captions first show english language then load after changed selected language.
how will i do it?
Kindly help my problem.!
I’m waiting for your reply.!
Advance thanks for reply.!
EnochPosted at 08:15h, 09 November
Hi, Peter. I sent you a message before as I had some problems with the image being cropped at the bottom and also a black strip constantly appearing on the left hand side of the page as the images slide. I have tried all the different settings that change how the images appear such as fit portrait etc but to no avail.
The correct URL is: http://www.enitan.co.uk/
Any help with these 2 issues will be extremely helpful!