WP Supersized

Beskrywing

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

• Type of background

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.

• Autoplay on/off

Determines whether the slideshow begins playing automatically when the page is loaded.

• Start on slide #

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).

• Random slides

When on, slides are shown in a random order and the starting slide number will be disregarded. Default is off.

• Slide interval

Time between slide changes in milliseconds. The default is 3 seconds.

• Transition

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

• Speed of transition

The time transitions take in milliseconds (default is 500 milliseconds).

• New window

Whether or not slide links open in a new window (default is on).

• Pause on hover

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.

• Stop loop

Pauses the slideshow upon reaching the last slide (default is off).

• Keyboard navigation

Keyboard navigation (default is on).
Spacebar pauses, Up/Right go to next slide, and Down/Left go to previous slide.

• Performance

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

• Image protection

Disables right clicking and image dragging using Javascript (default is off).

• Background URL

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

• Default slides directory

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.

• Debugging mode on/off

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).

• Always fit

Prevents the image from ever being cropped. Ignores minimum width and height. (default is off).

• Fit portrait

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.

• Fit landscape

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.

• Navigation arrows

Displays arrows for navigation (default is on).

• Slideshow controls

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.

• Thumbnail navigation

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.

• Thumbnail suffix

The suffix to use for recognizing the thumbnails. Default is -1.

• Thumbnail tray

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.

• Slide numbers

Enables/Disables the slide counter (default is on).

• Slide caption

Enables/Disables slide captions (default is on).
According to the source of images, captions are extracted from:

• The IPTC caption field of the jpg image file for default or custom folders
• The caption field of the image for WP Gallery images.
• The 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).

• Fluid thumbnail bar

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.

• Flickr Source

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.

• Set

You must provide the ID number of the desired set (located in the URL).

• User

You must provide the ID number of the desired user (idgettr.com).

• Group

You must provide the ID number of the desired group (idgettr.com)

• Tags

You must provide the desired tag(s)

• How many pictures to pull

Between 1-500 (default is 100).

• Flickr Size

The image size to pull – t,s,m,z,b (smallest to largest, default is z).
Details on flickr.com

• Sort Images By

Sort images by date posted, date taken, or interestingness (Default is Date posted).

• Sort Direction

Select the sort direction (Default is Descending).

• Flickr API key

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.

• Picasa Source

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.

• Album

You must provide the ID of the desired album. It can be found in the URL of the link to this album.

• User

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).

• Tags

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).

• Picasa Image Size

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

Sort images by date published or date updated (none uses default Picasa order) (Default is Date published).

• Sort Direction

Select the sort direction (Default is Descending).

• Picasa Author key

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.

• Smugmug Source

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.

• Keyword

Comma-separated Smugmug keywords (they are combined).

• User

You must provide the nickname of the desired user. You may combine it with keyword(s).

• Gallery

You must provide the ID of the desired gallery

• Category

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.

• Smugmug Size

The image size to pull – Tiny, Thumb, Small, Medium, Large, XLarge, X2Large, X3Large, Original.
Details on help.smugmug.com

• Sort Images By

Sort images by date published or date updated (none uses default Smugmug order) (Default is Date posted).

• Sort Direction

Select the sort direction (Default is Descending).

• Update

Click here and your options will updated!

• Reset

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.