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
by
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
by
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 S
Posted at 00:18h, 12 JanuaryInteresting- 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?
Thanks.
Ben
Posted at 20:16h, 12 JanuaryI 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.
Benoit
Ben
Posted at 20:53h, 26 JanuaryBill,
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.
Benoit
Zak
Posted at 17:18h, 14 JanuaryHi Benoit
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?
Cheers
Ben
Posted at 19:26h, 14 JanuaryZak,
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 !
Benoit
Iván
Posted at 23:33h, 26 JanuaryThanks 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
Iv.
hellisloose
Posted at 12:56h, 17 SeptemberI was able to fumble my way thru SMF forum theme index.template.php and successfully added supersize3.2.4 code . thanks
Peter
Posted at 13:01h, 05 MarchIs it possible to view a specific background image for the projects in this theme?
http://themetrust.com/themes/reveal
The problem might be, that the pages doesn’t load new when clicking in the next project
Plz help!
Ben
Posted at 19:56h, 03 AprilPeter,
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).
Ben
Posted at 19:57h, 03 AprilPeter,
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.
expresscms
Posted at 09:22h, 18 Julycan you with this script make the site slide away so yo can only see the bagground and go thrug the gallery
Ben
Posted at 08:39h, 22 Julyexpresscms,
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 Zuckerman
Posted at 17:12h, 12 MarchCan’t seem to get swipe viewing on Ipad to work. Does WP-SS work for swiping on Mobile?
laxmanvel
Posted at 14:37h, 13 AugustHi,
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.!
Regards,
Laxmanvel
Enoch
Posted at 08:15h, 09 NovemberHi, 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!