Full screen background slideshow in any page/post, with images from WP Media Gallery, NextGEN Gallery, Flickr, Picasa, Smugmug, folder, or XML file
WP Supersized allows you to display a resizable full screen background slideshow on pages/posts of your choice.
After activation you will find a new WP Supersized section in your Settings where you can manage the plugin options.
A WP Supersized panel will also be available in the post/page editor to select the source of images used by the plugin individually for the current post/page.
Users may use images from NextGEN Gallery, the WordPress Media Gallery, Flickr, Picasa, Smugmug, their own choice of directory within the wp-content folder, or a list of slides defined in an xml file (for advanded users).
WP Supersized integrates the Supersized jquery extension in the pages/posts of your choice. I am not the developer of the original Supersized jquery extension itself, Supersized was written by Sam Dunn. My plugin only integrates it into your theme and gives you easy access to many options for displaying this resizeable slideshow background where you want on your website or blog.
So, what exactly does WP Supersized do?
You can see an example of Supersized in use in a WordPress page on the WP Supersized page or on my About page.
For more details about Supersized itself and its development, check Supersized.
WP Supersized allows you to display Supersized on the pages/posts that you want in your current theme. Many options are available to choose where and how it will be displayed.
There is a number of available options, shown below with their default values. Not every option is functional in the Single image mode.
WP Supersized also adds an additional option tab in the page/post editor for easy selection of the source of images for each post/page individually. A source selected on an individual page/post will override the general options choice. When no value has been set for these options yet, they use the general options.
Functionality
Determines which type of slideshow will be used.
Slideshow: The images that you have uploaded to your /wp-content/supersized-slides/
directory or the ones attached to the post/page through the WordPress Media Gallery (have a look at the FAQ to find out how this works) will be shown.
Single image: A single image will be used (the first one found in the slides folder if you have more than one). Slideshow controls will not appear in this mode.
Flickr images: Images will be pulled from Flickr (by user, set, group, or tags see the Flickr options below). If you choose this, please be aware that not all Components options and none of the Supersized Shutter theme specific options will be available with the current version of Supersized.
Determines whether the slideshow begins playing automatically when the page is loaded.
The slide the slideshow starts on (default is 1). Slides are sorted in alphabetical order of their filename.
In the Single image mode, it controls which image is loaded, 0 causes a random image to be loaded each time (assuming that you have several images in the /wp-content/supersized-slides/
directory).
When on, slides are shown in a random order and the starting slide number will be disregarded. Default is off.
Time between slide changes in milliseconds. The default is 3 seconds.
Controls which effect is used to transition between slides. Options are as follows:
No transition effect Fade effect (Default) Slide in from top Slide in from right Slide in from bottom Slide in from left Carousel from right to left Carousel from left to right
The time transitions take in milliseconds (default is 500 milliseconds).
Whether or not slide links open in a new window (default is on).
Pauses the slideshow when the current image is hovered over. If navigation is enabled, the pause button will become active to show paused state. Disabled by default.
Pauses the slideshow upon reaching the last slide (default is off).
Keyboard navigation (default is on).
Spacebar pauses, Up/Right go to next slide, and Down/Left go to previous slide.
Uses image rendering options in Firefox and Internet Explorer to adjust image quality. This can speed up/slow down transitions. Webkit does not yet support these options.
Normal - No adjustments Hybrid Speed/Quality - Lowers image quality during transitions and restores after completed (Default) Optimizes image quality Optimizes transition speed - Faster transition speed, lower image quality
Disables right clicking and image dragging using Javascript (default is off).
Type here the URL of the link you want to access when clicking on the background image (www.example.com). The same link will be used for all images. Leave this field empty if your do not want any link to be used. Default is empty.
Display
Choose where you want to apply Supersized. These are the most general options. More precise selections are possible below.
Everywhere (except admin pages) All pages (except homepage) Homepage (of your blog) Front page (landing page) Error page (404) Search results page All posts (not pages) Sticky post Category archive Tag archive Date archive Any archive
From version 2.0, the option Only on posts/pages with custom field SupersizedDir
has been removed. Any page/post that has an image source other than none
will display Supersized.
If you select All posts, All pages, or Everywhere, posts/pages with an image source other than none
will show images from the corresponding folder while all others will show the default directory images.
In each of these options, unless a specific image source was defined in the page/post, the default slides directory will be used.
This option lists all available custom templates in the current theme. You may select one or several of them.
The list is empty if your current theme does not use any custom template.
Please reset the options when you change theme to make sure that the list is updated.
Type here a comma-separated list of the post IDs where you want Supersized to appear.
Don’t forget to deselect All posts
or Sticky post
above.
You can find your post IDs in the Posts admin menu by hovering on the name of the post. The ID will be displayed at the bottom of your browser. Alternatively, you can use the WP Show IDs plugin.
Type here a comma-separated list of the page IDs where you want Supersized to appear.
Don’t forget to deselect All pages
, Homepage
, Front page
, or Error page
above.
You can find your page IDs in the Pages admin menu by hovering on the name of the page. The ID will be displayed at the bottom of your browser. Alternatively, you can use the WP Show IDs plugin.
Type here a comma-separated list of the category IDs where you want Supersized to appear.
You can find your Category IDs in the Posts > Categories admin menu by hovering on the name of the category. The ID will be displayed at the bottom of your browser. Alternatively, you can use the WP Show IDs plugin.
Type here a comma-separated list of the tag IDs where you want Supersized to appear.
You can find your Tag IDs in the Posts > Post Tags admin menu by hovering on the name of the tag. The ID will be displayed at the bottom of your browser. Alternatively, you can use the WP Show IDs plugin.
Slides source
Select here the slides directory that will be used by default (default is supersized-slides if it exists). Only folders are shown by the selector. Some folders such as plugins
, themes
, cache
, and a few others are not shown by the selector.
The images from the selected directory will be displayed by Supersized unless you use a custom directory in each post/page.
Please put your images folders (default or custom) for Supersized in your wp-content
directory. You may create folders within folders, e.g. /wp-content/supersized-slides/slidesforpost###/
.
If you have been using the SupersizedDir
custom field in your pages/posts, it is still used but is now shown and selected with a selector. You do not need to fill the custom field yourself anymore.
WP Supersized will look first for a custom images source that you would have set up for the current page/post. If not found, it will then use the default directory selected here (do not forget to create it and fill it with images!). If none of these can be found, the default Supersized images will be shown.
When on, WP Supersized will generate comments in the source of the web page (in the slides list) with some variables and arrays values, useful to find out the origin of file path problems. If you have problems with displaying your images, send me these comments from the source of the page and I will be able to help you more easily.
This is not necessary for normal operation. Use only if you have trouble with displaying your images.
(default is off)
Size and position
Minimum dimensions the image is allowed to be. If either is met, the image won’t size down further (default is 0).
Centers image vertically. When turned off, the images resize/display from the top of the page (default is on).
Centers image horizontally. When turned off, the images resize/display from the left of the page (default is on).
Prevents the image from ever being cropped. Ignores minimum width and height. (default is off).
Prevents the image from being cropped by locking it at 100% height (default is on).
This will usually cause vertical images to not cover the window entirely.
Prevents the image from being cropped by locking it at 100% width (default is off).
This will usually cause horizontal images to not cover the window entirely.
Components
The following options are not taken into account when in Single image mode.
Displays arrows for navigation (default is on).
Turns the navigation on/off (default is on).
When turned off, the whole Supersized footer is hidden and the navigation controls are hidden. You may still display the captions (if the Slides captions
option is on) even when this option is turned off. This allows the use of html in captions without the Supersized footer being displayed.
When turned off, the controls will not be visible but the keyboard navigation will still be available (unless you disable it in the corresponding option).
For custom navigation buttons, replace the images in your /wp-content/plugins/wp-supersized/img/
folder.
Toggles forward/backward thumbnail navigation (default is off). When on, thumbnails from the next/previous posts are generated and can be clicked to navigate. If there is no thumbnail available for the slide, it will simply scale down the full size image, which can slow performance.
For both Thumbnail navigation and Thumbnail links in thumbnail tray, thumbnail files must be present in a thumbs/
directory within the corresponding slides folder, each thumbnails having the same name (+ suffix) as its corresponding image, i.e. the slide image_1.jpg
in wp-content/supersized-slides
and its thumbnail image_1-1.jpg
in wp/content/supersized-slides/thumbs
.
Thumbnails must be 150 px high to avoid resizing by Supersized.
The suffix to use for recognizing the thumbnails. Default is -1.
Thumbnail tray appears at the bottom of the screen when clicked on bottom right arrow (default is on).
If you select this option and do not select the next one, there will be no thumbnail in the tray which is not really useful.
See the Thumbnail navigation
option above for details about thumbnails.
Thumbnail links in thumbnail tray
Generates a list of thumb links in the thumbnail tray that jumps to the corresponding slide. If there is no thumbnail available for the slide, it will simply scale down the full size image, which can slow performance (default is on)
Slide links
None
Numbers
Slide title
Empty (default)
Shows a list of the slides in the navigation bar – Better to leave it on Empty
or None
for now, as there are still some issues with how Supersized is displaying this.
Enables/Disables the slide counter (default is on).
Enables/Disables slide captions (default is on).
According to the source of images, captions are extracted from:
IPTC caption
field of the jpg image file for default or custom folderscaption field
of the image for WP Gallery images.description field
of the image for NextGEN gallery images.The title field
of the corresponding image in the xml file.
Progress bar
Enables/Disables the progress bar shown at the bottom of the screen (default is on).
Enables/Disables the fluid move of the thumbnail bar to the left or right based on mouse location (default is off).
Flickr
The following options are specific to the Flickr mode.
Tells Supersized which of the options to pull the images from.
Set: pulls images from a set.
User: pulls images from a user.
Group: pulls images from a group (default).
Tags: pulls images by tags.
You must provide the ID number of the desired set (located in the URL).
You must provide the ID number of the desired user (idgettr.com).
You must provide the ID number of the desired group (idgettr.com)
You must provide the desired tag(s)
Between 1-500 (default is 100).
The image size to pull – t,s,m,z,b (smallest to largest, default is z).
Details on flickr.com
Sort images by date posted, date taken, or interestingness (Default is Date posted).
Select the sort direction (Default is Descending).
You need this in order for this to work. You need to get your own at flickr.com
Picasa
The following options are specific to the Picasa mode.
Tells Supersized which of the options to pull the images from.
Album : pulls images from a Picasa album (default).
User: pulls images from a user.
Tags: pulls images by tag.
You must provide the ID of the desired album. It can be found in the URL of the link to this album.
You must provide the ID number of the desired user (either you Picasa user name or the long number in the URL to your profile).
You must provide the desired tag(s). You may combine several tags (comma- or “+”-separated = AND, “|”-separated = OR).
Between 1-500 (default is 100).
The image size to pull – 512, 640, 720, 800, 1024, 1280, 1440, 1600. The Picasa API will return the largest size available if your selection is larger than the original.
Sort images by date published or date updated (none uses default Picasa order) (Default is Date published).
Select the sort direction (Default is Descending).
You need this in order for private albums to work. It can be found in the URL of the link to a private album (each album has a different author key)
Smugmug
The following options are specific to the Smugmug mode.
Tells Supersized which of the options to pull the images from.
Keyword: pulls images by keyword.
User: pulls images from a user.
Gallery: pulls images from a gallery.
Category: pulls images by category.
Comma-separated Smugmug keywords (they are combined).
You must provide the nickname of the desired user. You may combine it with keyword(s).
You must provide the ID of the desired gallery
You must provide the desired category.
Between 1-100 (default is 100). This is currently the maximum allowed by the Google Feed API used by the plugin to get the images.
The image size to pull – Tiny, Thumb, Small, Medium, Large, XLarge, X2Large, X3Large, Original.
Details on help.smugmug.com
Sort images by date published or date updated (none uses default Smugmug order) (Default is Date posted).
Select the sort direction (Default is Descending).
Click here and your options will updated!
To reset all WP Supersized options.
Required when you change theme.
A big Thank You to Sam Dunn for developing the Supersized jquery extension.
Thanks to the many developers who make so much information available for those (like me) who need to learn from more experienced people.
Special thanks to Joke and Sandro who helped me finding the solution to a bug present in the plugin when WordPress is installed in its own folder.
Thanks to the generous donators who encourage me to develop my plugin further (and start working on new ones!) by making a donation.
/wp-content/plugins/
directory. Alternatively, use the WordPress plugin install in Plugins >> Add New >> Upload
to upload and install the zip file.Plugins
menu in WordPress.supersized-slides
directory within your wp-content directory. This will be the default folder where images should be uploaded for WP Supersized.Settings >> WP Supersized
menu and modify the options as desired. The source of images can also be defined independently for each post/page in the post/page editor.Page/post specific options - You may choose the source of images for each post/page independently.
General options/Functionality - Define the behaviour of Supersized.
General options/Display - Choose where Supersized will be displayed.
General options/Slides source - Choose which images source should be used as default.
General options/Size and position - Choose how the images will be displayed.
General options/Components - Fine-tune the navigation controls for Supersized.
General options/Flickr - Enter here the details of your Flickr account and the choice of Flickr images.
General options/Picasa - Enter here the details of your Picasa account and the choice of Picasa images.
General options/Smugmug - Enter here the details of your Smugmug account and the choice of Smugmug images.
Example of selection of images in the post editor (individual selection for each post/page).
/wp-content/plugins/
directory. Alternatively, use the WordPress plugin install in Plugins >> Add New >> Upload
to upload and install the zip file.Plugins
menu in WordPress.supersized-slides
directory within your wp-content directory. This will be the default folder where images should be uploaded for WP Supersized.Settings >> WP Supersized
menu and modify the options as desired. The source of images can also be defined independently for each post/page in the post/page editor.Simply attach images from the WordPress Media Library to your new post or page. You do not need to insert them in the post/page, only attach them.
The images will be shown by Supersized in the menu order. So moving them up or down the list in the Media Gallery menu will have the effect of changing their order when displayed by WP Supersized.
WP Supersized will use the caption defined in the Media Gallery. If it is not present, it will use the image title (filename).
To let WP Supersized know that it should display the images from the Media Gallery, select WP Gallery in the Supersized meta box (below the editor) in the page/post editor.
If you have used the SupersizedDir
custom field before, do not worry, your data is not lost; it is simply shown in an easier way. You do not need to fill in the custom field yourself anymore.
Posts or pages using the Media Gallery images will all use the options defined in the plugin admin.
Simply use NextGEN Gallery as you would normally to define galleries.
The images will be shown by Supersized in the order that you chose in NextGEN. So moving them up or down the list in the NextGEN Gallery menu will have the effect of changing their order when displayed by WP Supersized.
For the caption, WP Supersized will use the Description field that you defined in your NextGEN gallery. If it is not present, it will use the image Alt&Title field, also defined in NextGEN.
To let WP Supersized know that it should display the images from the NextGEN Gallery, select NextGEN Gallery in the Supersized meta box (below the editor) in the page/post editor.
To select the NextGEN gallery that you want to use on this page/post, choose it in the WP Supersized panel or in the plugin options.
Posts or pages using the NextGEN Gallery images will all use the options defined in the plugin options.
There are several ways to do it:
Alternatively, you may create folders containing images for specific pages/folders:
1. Create a folder that will contain your images in your wp-content folder, e.g. the folder /wp-content/images_for_post_1
will contain the images for a particular post. It is also possible to create folders inside folders, e.g. /wp-content/images/images_for_page_x
.
2. Once the folder(s) created, add the desired images there.
3. In the post/page editor, select the folder that you want to use from the list displayed in the Supersized meta box below the editing window (only folders are displayed).
From version 2.0, WP Supersized allows advanced users to choose almost all options separately for each page/post, including:
Details of how to use the XML file can be found in the example.xml
file provided in the WP Supersized plugin folder. Simply make a copy of this file in your wp-content
directory or another location within this directory, rename it, and edit it as you wish.
To use an XML file, go to the page/post editor and select the option in the page/post Supersized meta box below the editing window. You also need to enter the path inside the wp-content
directory and the name of the XML file in the XML file
field.
IMPORTANT: if you use xml files for defining your images, two slides field names must be renamed from version 3.0: slide-link
to slide_link
and slide-thumb
to slide_thumb
in the xml files.
For example, if you want to use an xml file containing specific options and/or slides for a particular page/post, let’s suppose that you have copied the example.xml
file and created a file called my_slides_list_and_options.xml
in directory wp-content/my_wpsupersized_slides_definitions
(choose the names as you wish).
You would then need to enter my_wpsupersized_slides_definitions/my_slides_list_and_options.xml
in the Supersized meta box below the editing window.
That’s all, WP Supersized will now use your own definitions of the slides/options on this particular page/post.
WP Supersized will use default options (as defined in the plugin admin) for any options not defined in the XML files.
Similarly, if you do not define any slides within your XML file, the default directory slides (usually in the supersized-slides
directory) will be used.
In order to see the slideshow, you must make sure that the background of the current page/post is at least partly transparent or leaves some transparent space around it.
If you want your page/post to appear over a semi-transparent background that lets the Supersized slideshow visible, you should modify the css of your template(s).
Here is a useful link showing the css needed for a cross-browser transparent background.
This is not available for the default or custom folders as captions for images from these are extracted from the IPTC caption field of the file.
You have several possibilities to have links in the captions:
caption field
of the images. It will then be displayed automatically by WP Supersized.description field
.title field
Sam Dunn has made the choice not to support IE6 anymore. If you are still using IE6, you should seriously think about upgrading!
Although it seems to appear only sporadically, this was a known bug of Supersized 3.1.x. The latest version of Supersized (from 3.2.4) used in this plugin should solve this issue but is not yet available for the flickr mode.
It has been reported that Supersized images are not resized correctly on iPad and Android tablets. As far as I know, this is mostly due to the way they are handling images and their interpretation of some css. There is currently no clear solution for this.
Since version 1.2 of WP Supersized, the following formats are recognized: jpg, jpeg, gif, png.
If you see an image indicating an error, it should point you to one of the possible causes for this problem.
First of all, make sure to update to the latest version of the plugin.
If the issue is still present, there is probably a problem with file access permissions on your server. This has mostly been observed when running servers based on Windows. Try changing access rights to your image folder to solve this.
It could also be that your provider has disabled the glob() function in php. Some providers seem to have done this to avoid a security issue with glob() in versions of php earlier than 5.2.4. It is not necessary anymore from php version 5.2.4 and higher so there should be no reason to leave the glob() function disabled. If you are in this case, contact your provider and ask them to enable the glob() function. Thanks to Sandro for finding out about this.
THIS IS NOT NEEDED ANYMORE FROM VERSION 3.0 BUT IS LEFT HERE FOR YOUR INFORMATION
At the bottom of the page/post you are creating/editing, you should see a box called Custom Field. If it is not visible, go to Screen Options (top right of the page) and check Custom Field.
In the Custom Field box, enter the new Custom Field name SupersizedDir (next time, it will appear automatically in the list of Custom Field names).
According to what you want to do, you can then give it a value that is the name of the folder to use for this particular post/page, or the value wp-gallery
to use the WordPress Media Gallery, or (for advanced users) the location of an xml file containing all slides, titles, links, and options for this particular page/post.
slide-link
to slide_link
and slide-thumb
to slide_thumb
in the xml files.Only on posts/pages with custom field SupersizedDir
. Any post/page that has a custom field SupersizedDir filled in will use Supersized.slides
folder must now be renamed supersized-slides
and be placed in the /wp-content
directory instead of the /wp-content/plugins/wp-supersized
directory. This allows updates without losing your images./wp-content
folder as a default slides folder.SupersizedDir
.