Follow for free plugins, new theme releases and theme news
Plugin Description
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?
- Cycles Images/backgrounds via slideshow with transitions and preloading (use it as background or as slideshow)
- Resizes images to fill browser while maintaining image dimension ratio
- Navigation controls with keyboard support
- Integration with NextGEN Gallery and with the WordPress Media Gallery – choose images from NextGEN galleries or attached to post/page
- Integration with Flickr – pull photos by user, set, tag, or group
- Integration with Picasa – pull photos by album, user,or tag
- Integration with Smugmug – pull photos by keyword, user, gallery, category
- Accepts jpg, gif, and png images
- Simple selection of your images source for each page/post separately (also options for advanced users, using an XML file)
- HTML and links can be used within the images captions (when using WP Media Gallery, NextGEN Gallery, or an XML file as source of images).
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.
Options
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
- Select the page(s) where Supersized should be used
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.
- Select the page template(s) where Supersized should 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.
- Post ID where Supersized will be used
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.
- Page ID where Supersized will be used
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.
- Category ID for the posts/pages where Supersized will be used
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.
- Tag ID for the posts/pages where Supersized will be used
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 width allowed, Minimum height allowed
Minimum dimensions the image is allowed to be. If either is met, the image won’t size down further (default is 0).
- Center the background vertically
Centers image vertically. When turned off, the images resize/display from the top of the page (default is on).
- Center the background horizontally
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:
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)
- How many pictures to pull
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).
- How many pictures to pull
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.
- How many pictures to pull
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.
Thanks
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.
Screenshots
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).
