Individual Slide Settings

When you upload an image to a Drupal site, Drupal will automatically create multiple size versions of the image that can be used.  And for your slide’s main background image, you can choose which of these versions you’d like to use.

Common options are “Original Size”, “Medium” and “Large”.  A reasonably sized main background image for web is around 1600×900 pixels.  If your original images are larger than this, you can choose “Large” or “Medium” here, and this will help to improve page loading performance.

From Media Library:

Value is taken from “WP Menu -> Media -> Library -> Select Image -> Alt Text”.

From Filename:

Alt text will be the same as the name of the file (i.e. “my-image.jpg”).

Custom:

Enter your own custom text to be used as the image’s Alt Text.

Cover:

The most common option.  This will ensure that your image will always fill the entire size of the slider (cropping may occur depending on the size ratio of the image in relation to the slider’s layout).

Contain:

Always fit the entire image inside the slider’s boundaries.  Image cropping will never occur, but you may end up with blank space on the sides of the image (similar to a letterbox movie on an older television screen).

Click here for information about “Background Position”.

Click here for information about “Background Repeat”.

To use this option, first make sure “Enable Parallax” is set to “ON” in the slider’s main parallax settings.

Adding a parallax level here will apply some movement to the main background based on mouse-move, scrolling, or both.

Check out the “Parallax Levels” part of the link above for help with choosing a “level” if you wish to use this option.

From:  The starting scale percentage of the image

To:  The ending scale percentage of the image

If you want your image to “zoom in”, set the “From” value to “100” and the “To” value to something larger than 100 (such as 150, which means the image would scale up by 50%).

If you want your image to “zoom out”, set the “From” value to something larger than 100, and then the “To” value to “100”.

These offset values are in relation to your main background image’s Background Position value (see section B above).

For example, if your Background Position is “center center”, entering a Horizontal Offset of “100” would mean 100px to the right of the very center, which would then serve as the starting position of the Ken Burns effect.  And a Horizontal Offset of “-100″ would be 100px to the left of center.

Apply a starting and ending rotation for the effect.  Smaller degrees such as 10-20 work best.

“Easing” is what gives a web animation that “real life” type of movement.  For a traditional Ken Burns effect, “Linear.easeNone” is usually the best choice.  But you can test the other options to see which one you like best.

The total time the Ken Burns effect will last, in milliseconds (1000 = 1 second).  It’s usually best to set this to the same number used for the slide’s delay value (“Edit Slide -> General Settings -> Slide Delay”).

Optional field to write an “alt” attribute for the loaded image.  Useful for enhanced SEO.

Assign a width and height for the loaded image which will be used for resize calculations (it’s best to enter the loaded url’s actual width and height here).

Cover:

The most common option.  This will ensure that your image will always fill the entire size of the slider (cropping may occur depending on the size ratio of the image in relation to the slider’s layout).

Contain:

Always fit the entire image inside the slider’s boundaries.  Image cropping will never occur, but you may end up with blank space on the sides of the image (similar to a letterbox movie on an older television screen).

Click here for information about “Background Position”.

Click here for information about “Background Repeat”.

To use this option, first make sure “Enable Parallax” is set to “ON” in the slider’s main parallax settings.

Adding a parallax level here will apply some movement to the main background based on mouse-move, scrolling, or both.

Check out the “Parallax Levels” part of the link above for help with choosing a “level” if you wish to use this option.

From:  The starting scale percentage of the image

To:  The ending scale percentage of the image

If you want your image to “zoom in”, set the “From” value to “100” and the “To” value to something larger than 100 (such as 150, which means the image would scale up by 50%).

If you want your image to “zoom out”, set the “From” value to something larger than 100, and then the “To” value to “100”.

These offset values are in relation to your main background image’s Background Position value (see section B above).

For example, if your Background Position is “center center”, entering a Horizontal Offset of “100” would mean 100px to the right of the very center, which would then serve as the starting position of the Ken Burns effect.  And a Horizontal Offset of “-100″ would be 100px to the left of center.

Apply a starting and ending rotation for the effect.  Smaller degrees such as 10-20 work best.

“Easing” is what gives a web animation that “real life” type of movement.  For a traditional Ken Burns effect, “Linear.easeNone” is usually the best choice.  But you can test the other options to see which one you like best.

The total time the Ken Burns effect will last, in milliseconds (1000 = 1 second).  It’s usually best to set this to the same number used for the slide’s delay value (“Edit Slide -> General Settings -> Slide Delay”).

i.e. “No Slide Background”.  Useful for when you want to use a single background image for your entire slider.

Use a solid color as the slide’s main background.  Click the “Color” button to choose a color.

To get your YouTube ID, visit the video on YouTube.com, and view the url in the browser’s address bar.

The ID will be after the “v=” part of the url.  In the following url example, the ID is “ZmKdKZOX72Y”.

Click the “Change Image” button to set a poster for the video, chosen from your WP Media library.

The video’s “cover” is what will animate when the slide first appears.

… use the following url format (replacing the “ZmKdKZOX72Y” part with your video’s ID) to download a copy of the original high-res version from YouTube.com.

ON: Have the video cover the entire size of the slider (usually the  best option for video backgrounds).  Depending on the video’s Aspect Ratio in relation to the slider’s size, cropping may occur.

OFF: The video will always respect its Aspect Ratio, and will never be cropped.  Depending on the video’s Aspect Ratio in relation to the slider’s size, blank space on the sides of the video may occur.

Choose to display a “mesh-like” transparent graphic on top of the video, adding some extra style to the video.

YouTube offers 2 versions of the video that can be loaded which are 16×9 or 4×3.  For video backgrounds, 16×9 is usually best.

Choose to start and/or end the video at a specific time, in minutes:seconds format.

Example “Start At” value: 00:17 (start the video 17 seconds in)

Example “End At” value: 02:17 (end the video at 2 minutes, 17 seconds)

Disable:

Video will only play once each time the slide is shown.

Loop – Slide is paused:

Video will loop endlessly, and the slide will never change unless the slider’s navigation is used (next button clicked, etc.).

Loop – Slide does not stop:

Video will loop endlessly until the slide’s delay is reached.  For example, if your slide’s are normally meant to be shown for 10 seconds, but your video’s length is only 5 seconds, the video will play twice before the slide actually changes.

ON: Slide will immediately change as soon as the video ends.

OFF: If video’s length is less than the slide’s delay, the slide will not change until the delay time has been reached.

ON: Video will always start from the beginning each time the slide is shown.

OFF: Once the video plays, if the slide is changed before the video actually ends, when coming back to the same slide, the video will resume playing from the same point.

Choose to mute the video’s volume if it normally has sound.

A special option to play the video at a “fast forward” speed.

Additional parameters that can be passed to the video from this list.

Not all params are supported, but useful options from the list are “rel”, “iv_load_policy”, and “modestbranding” (see link above for descriptions of these params).

To add an additional parameter, prepend it to the beginning of the default params string.

For example, this:

would become this:

To use this option, first make sure “Enable Parallax” is set to “ON” in the slider’s main parallax settings.

Adding a parallax level here will apply some movement to the main background based on mouse-move, scrolling, or both.

Check out the “Parallax Levels” part of the link above for help with choosing a “level” if you wish to use this option.

To get your Vimeo ID, visit the video on vimeo.com, and view the url in the browser’s address bar.

The ID will be after the “vimeo.com/” part of the url.  In the following url example, the ID is “118046336”.

Click the “Change Image” button to set a poster for the video, chosen from your WP Media library.

The video’s “cover” is what will animate when the slide first appears.

ON: Have the video cover the entire size of the slider (usually the  best option for video backgrounds).  Depending on the video’s Aspect Ratio in relation to the slider’s size, cropping may occur.

OFF: The video will always respect its Aspect Ratio, and will never be cropped.  Depending on the video’s Aspect Ratio in relation to the slider’s size, blank space on the sides of the video may occur.

Choose to display a “mesh-like” transparent graphic on top of the video, adding some extra style to the video.

Vimeo offers 2 versions of the video that can be loaded which are 16×9 or 4×3.  For video backgrounds, 16×9 is usually best.

Choose to start and/or end the video at a specific time, in minutes:seconds format.

Example “Start At” value: 00:17 (start the video 17 seconds in)

Example “End At” value: 02:17 (end the video at 2 minutes, 17 seconds)

Disable:

Video will only play once each time the slide is shown.

Loop – Slide is paused:

Video will loop endlessly, and the slide will never change unless the slider’s navigation is used (next button clicked, etc.).

Loop – Slide does not stop:

Video will loop endlessly until the slide’s delay is reached.  For example, if your slide’s are normally meant to be shown for 10 seconds, but your video’s length is only 5 seconds, the video will play twice before the slide actually changes.

ON: Slide will immediately change as soon as the video ends.

OFF: If video’s length is less than the slide’s delay, the slide will not change until the delay time has been reached.

ON: Video will always start from the beginning each time the slide is shown.

OFF: Once the video plays, if the slide is changed before the video actually ends, when coming back to the same slide, the video will resume playing from the same point.

Choose to mute the video’s volume if it normally has sound.

Additional parameters that can be passed to the video from this list.

Useful options from the list are “color” and “title” (see link above for descriptions of these params).

To add an additional parameter, prepend it to the beginning of the default params string.

For example, this:

would become this:

To use this option, first make sure “Enable Parallax” is set to “ON” in the slider’s main parallax settings.

Adding a parallax level here will apply some movement to the main background based on mouse-move, scrolling, or both.

Check out the “Parallax Levels” part of the link above for help with choosing a “level” if you wish to use this option.

Upload a video to your site via ftp, and enter the full url of the video in the fields shown in the screenshot below, or click the “Change Video” button to choose a video from your WP Media library.

An “MPEG” version of your video (a file ending with “.mp4″) is mandatory.

MPEG will work almost everywhere except Firefox on Macs.  Because of this, it’s also important to include an alternative version of the video, which can be either “WEBM” or “OGV”.  Firefox on Mac supports both of these, so you only need one or the other.

Here’s a free tool you can use to create “ogv” and “webm” versions of your video.

ON: Have the video cover the entire size of the slider (usually the  best option for video backgrounds).  Depending on the video’s Aspect Ratio in relation to the slider’s size, cropping may occur.

OFF: The video will always respect its Aspect Ratio, and will never be cropped.  Depending on the video’s Aspect Ratio in relation to the slider’s size, blank space on the sides of the video may occur.

Choose to display a “mesh-like” transparent graphic on top of the video, adding some extra style to the video.

Choose which aspect ratio the video should be resized by.  For video backgrounds, 16×9 is usually best.

Choose to start and/or end the video at a specific time, in minutes:seconds format.

Example “Start At” value: 00:17 (start the video 17 seconds in)

Example “End At” value: 02:17 (end the video at 2 minutes, 17 seconds)

Disable:

Video will only play once each time the slide is shown.

Loop – Slide is paused:

Video will loop endlessly, and the slide will never change unless the slider’s navigation is used (next button clicked, etc.).

Loop – Slide does not stop:

Video will loop endlessly until the slide’s delay is reached.  For example, if your slide’s are normally meant to be shown for 10 seconds, but your video’s length is only 5 seconds, the video will play twice before the slide actually changes.

ON: Slide will immediately change as soon as the video ends.

OFF: If video’s length is less than the slide’s delay, the slide will not change until the delay time has been reached.

ON: Video will always start from the beginning each time the slide is shown.

OFF: Once the video plays, if the slide is changed before the video actually ends, when coming back to the same slide, the video will resume playing from the same point.

Choose to mute the video’s volume if it normally has sound.

To use this option, first make sure “Enable Parallax” is set to “ON” in the slider’s main parallax settings.

Adding a parallax level here will apply some movement to the main background based on mouse-move, scrolling, or both.

Check out the “Parallax Levels” part of the link above for help with choosing a “level” if you wish to use this option.

If you’re using a special content source such as a “Post-based Slider” or “Instagram”, you’ll be presented with one of the 3 new options shown in the screenshot to the right.

Special background source options and related background source settings listed below.

Special Source Options:

Featured Image

Special Source Settings:

Identical to “Regular Image” tab above

Special Source Options:

Stream Image, Stream Video

Stream Image -> Source Settings:

Identical to “Regular Image” tab above

Stream Video->  Source Settings:

Identical to “HTML5 Video” tab above

Special Source Options:

Stream Image

Special Source Settings:

Identical to “Regular Image” tab above

Special Source Options:

Stream Video

YouTube -> Stream Video -> Source Settings:

Identical to “YouTube” tab above

Vimeo ->  Stream Video -> Source Settings:

Identical to “Vimeo” tab above