Creating Your First Slider
Once you’ve successfully installed and activated the Soliloquy plugin, you’re ready to create your first slider! Here we will go through a general rundown of all of the available things you can do with your slider when creating it.
Create a New Slider
To get started, navigate to the Soliloquy screen in the WordPress admin and select the Add New button.
From the slider edit screen, the first thing to do is give your slider a Title to easily identify it later on.
Now that your slider has a Title, it’s time to add some images. You can choose to upload images from your computer, or select images you’ve already uploaded to your WordPress site.
When uploading new images to your slider they’ll immediately appear in the Slider tab when they finish uploading.
Let’s walk-through selecting images that have already been uploaded to your WordPress site. All images uploaded to Soliloquy are also stored in the Media Library just like any other images you upload to posts or pages on your site.
To begin, select the Select Images from Other Sources button to begin; this will open the Insert Media lightbox where you locate all images already uploaded to your site. Select one or several images you want to add to your slider:
Great, now that you’ve selected an image or several, select the Insert into Slider button to add those images to your slider.
You’ll immediately see the images you selected appear in the Slider tab:
Next, let’s edit the metadata for those image slides. Select the pencil icon at the top of a slide’s thumbnail image:
This will open the Edit Metadata lightbox where you can edit a slide’s Title, Alt, Caption, CSS Class, and URL.
- Title – Title for the individual slide.
- Alt – Describes the image for search engines and screen readers. Important for SEO and accessibility.
- Caption – Displayed over the slide image. Field accepts any valid HTML.
- CSS Class – Advanced, use to add custom classes to individual slides.
- URL – Enter a hyperlink to link this slide to another page.
- Open URL in New Window? – Enable to open the specified URL in a new window.
Save the changes to your slide before proceeding:
Finally, Publish your new slider! Once published, your slider’s edit screen will show the shortcode and template tag options you can use to display your slider across your site:
You’ll also be able to add your slider using the Soliloquy button from the post and page edit screens. When creating or editing a post/page, select the Soliloquy button to begin selecting a slider.
The Choose Your Slider lightbox will appear where you can select any published slider. Once you’ve selected the slider you want to add, select the Insert button:
The shortcode for the slider you selected will be automatically added to the content editor for you!
Configuring Your Slider
Once you’ve added slides to your slider, you’re ready to configure its appearance and functionality!
When editing your slider, you can change the basic appearance and functionality of your slider from the Config tab:
Within the Config tab you’ll find the following options available to configure your new slider:
- Slider Theme – Sets the theme for the slider display. Available Options: Base, Classic, more with the Themes Addon
- Image Size – Define the maximum image size for the slider.
- Slider Transition – Sets the type of transition for the slider. Note: The Ticker transition is designed for image slides only, and does not provide interactive functionality (thumbnails, navigation arrows, etc). It’s designed as a basic, continuous scrolling slideshow. Available Options: Fade, Scroll Horizontal, Scroll Vertical, Ticker (Continuous) Scroll Horizontal
- Slider Transition Duration – Sets the amount of time between each slide transition (in milliseconds).
- Slider Transition Speed – Sets the transition speed when moving from one slide to the next (in milliseconds).
- Slider Position – Sets the position of the slider on the page. Available Options: Center, Left, Right, None
- Slider Gutter – Sets the gutter between the slider and your content based on slider position (in pixels).
- Caption Position – The position of the caption for each slide, if specified. Available Options: Top, Bottom, Left, Right
- Caption Transition Delay – The number of milliseconds to delay displaying the caption after the slide has appeared (in milliseconds). Set to zero for caption to display immediately.
- Autostart Slider? – If disabled, visitors will need to manually progress through the slider.
- Show Slider Arrows? – Enables or disables slider navigation arrows.
- Show Slider Control Nav? – Enables or disables slider control (typically circles) navigation.
- Show Pause/Play Controls? – Enables or disables slider play/pause elements.
- Pause on Hover? – Pauses the slider (if set to autostart) when a visitor hovers over the slider.
- Pause on Navigation? – To resume autoplay after arrows/control nav are used, disable this option.
- Enable Mousewheel Navigation? – Enables or disables mousewheel navigation in the slider.
- Loop Slider? – Enables or disables slider looping.
- Randomize Slider? – Randomizes slides in the slider.
- Enable Keyboard Navigation? – Enables or disables keyboard navigation for the slider.
- Use CSS Transitions? – Enables hardware accelerated transitions via CSS.
- Use Adaptive Height? – Allows the slider to adapt smoothly to slides with different sizes.
- Set Dimensions on Images? – Enables or disables the width and height attributes on the img element. Only needs to be enabled if you need to meet Google Pagespeeds requirements, or if you’re using Photon CDN and having issues with slider images displaying.
- Crop Images in Slider? – Enables or disables image cropping based on slider dimensions (recommended).
- Slider Delay – If autostarting, this sets a delay before the slider should begin transitioning (in milliseconds).
- Start On Slide – The starting slide number (index based, starts at 0).
- Autoplay Video? – Enables or disables autoplay on videos.
- ARIA Live Value – Accessibility: Defines the priority with which screen readers should treat updates to this slider. Available Options: Off, Polite, Assertive
When editing your slider, you can change the mobile-specific configuration options for your slider from the Mobile tab:
Within the Mobile tab you’ll find the following options available to configure your new slider:
- Create Mobile Slider Images? – Enables or disables creating specific images for mobile devices. If enabled you’ll be able to specify the height and width dimensions to use for mobile.
- Show Captions on Mobile? – Enables or disables captions to be displayed on mobile.
When editing your slider, you’ll find several additional options for your slider in the Misc tab:
Within the Misc tab you’ll find the following options available to configure your new slider:
- Slider Title – Internal slider title for identification in the admin.
- Slider Slug – Unique internal slider slug for identification and advanced slider queries.
- Custom Slider Classes – Adds custom CSS classes to this slider. Enter one class per line.
- Import/Export Slider – Import and export options for your slider.
- Enable RTL Support? – Enables or disables RTL support in Soliloquy for right-to-left languages.
Congratulations – you have just created your first slider with Soliloquy!
If you experience any problems using Soliloquy, please check out our other documentation:
- Fix: Updater class.
- Fix: Minor bug fixes.
- Fix: PHP optimizations to improve performance.
- Fix: Minor bug fixes.
- Fix: PDF Slides not inserting.
- Fix: Admin CSS.
- Fix: Admin conflicts with nextgen.
- Fix: Mobile Captions.
- Fix: Various minor bugs.
- Fix: Importer failing with some slide IDs.
- Added: Sort order.
- Changed: Slider Options order.
- Fix: Errors not displaying properly when video fails to insert.
- Fix: Video Url not updating.
- Fix: Widget title using meta field instead of title.
- Fix: HTML Slides data not showing up.
- Fix: Video data not showing up.
- Fix: Inserting External Video PHP 5.3 compat issues.
- Fix: Cases where Meta Edit for slides in unavailable.
- Fix: Various small bugs.
- Fix: Compat with PHP 5.2 causing admin screen to be un-functional
- Fix: Conflict with Envira Gallery
- Slide status visual indicated edit screen
- Publish Status now bulk
- Vertical Thumbnail a
- List/Grid view now slider specific
- Fix youtube videos pausing all videos on page
- Fix List/Grid default option
- Fix v1 to v2 update
- Settings tabs now return to current screen after publishing/updating a slider
- Fix Code Meta Edit
- Retina Logo
- Fix: Fix: Cases where slug shortcodes don’t appear.
- Fix: Slider Controls appearing on single images
- Fix: Infinite Loop not properly loopnig on mobile
- Fix: Slide position from being set improperly
- Fix: Last slide from appearing first with in cases where infinite loop is enabled.
- Fix: Thumbnails Addon not loading properly chrome
- Added: RTL for sites that use RTL body or html class.
- Fix: Featured content from disappearing after transient expires.
- Fix: RTL Pager CSS.
- Fix: Double click play for local videos in Safari
- Added: Fullscreen video button for local videos
- Added: Option for Autoplay for Videos
- Fix: Vimeo video not pausing transition.
- Fix: Video output for displaying with Soliloquy Lightbox add-on
- Fix: Slide Transition animation from looping properly
- Added: fr_FR Translations
- Fix: Self-hosted videos use the video poster attribute to correctly display placeholder images
- Fix: When appending insert slider buttons to Visual Editors, check for $post instance rather than assuming it exists. Prevents faults with plugins using the Visual Editor but not a Post or Post Type
- Fix: Use WP_Query to get sliders when cache/transient is empty, preventing slider output blanking after a day when using caching plugins
- Added: scoped attribute to inline CSS
- Fix: Compat with Soliloquy Carousel cloned slides not displaying
- Fix: Remove box-shadow from links on sliders, which may be caused by Twenty Sixteen and other themes
- Fix: Slider slug would not save when changed
- Fix: foreach() warning when attempting to add a widget and no sliders defined
- Fix: Vertical slideshow with start on slide = 0 would result in incorrect slide being displayed
- Fix: Modal close icon for WordPress 4.4
- Added: soliloquy_get_image_slide_link_classes and soliloquy_get_video_slide_link_classes filters to allow developers to add classes to links
- Fix: Pause slider when YouTube video is buffering, not just playing.
- Fix: Prevent keyboard events stealing focus from input and text areas
- Fix: Moved soliloquy_output filter to end of shortcode() function to ensure all output can be filtered.
- Added: Image resize/crop error messages are output to logged in WordPress users where WP_DEBUG enabled.
- Added: Updated image uploader to prevent images increasing in file size and not displaying correctly when an image has an sRGB profile
- Fix: WordPress 4.3 compatibility for Widget
- Fix: WordPress 4.3 compatibility for modal close icon
- Fix: Stopped WPML Media displaying duplicate images when inserting images from other sources
- Fix: Import routine improved to fully import image and video metadata.
- Fix: Widgets: Featured Content widgets appear in dropdown when managing Widgets.
- Added: Pause on Navigation: option to enable/disable slider autoplay when navigation interaction occurs (default = Yes, which is standard Soliloquy functionality)
- Added: get_sliders() arguments to include empty (Featured Content) sliders and ignore cache for transient clearing in the Featured Content Addon
- Fix: Exclude Defaults and Dynamic Sliders when querying get_sliders()
- Added: Mousewheel support
- Added: Guidance on Setting Dimensions on Images if using Photon CDN and experiencing issues
- Added: Filter on image dimensions for Carousel Addon to correctly define width and height of images when Set Dimensions on Images = Yes
- Fix: Prepend slides before existing slides in older versions of PHP
- Fix: Force slider ID to match Post ID on Publish / Update; this resolves numerous issues where the wrong sliders may display when duplicating sliders or using WPML
- Added: ID, slider item, slider config and slider type arguments to soliloquy_crop_image_args filter, to allow developers to modify cropping/resizing arguments on a per-slide basis.
- Added: Setting to add slides before or after existing slides.
- Fix: Reordering slides without clicking Update on a slider would result in config settings being lost.
- Added: Infinite Scroll support (please refer to docs for how to implement)
- Added: Left/Right thumbnail styling support
- Fix: Support for multiple slideshows with YouTube videos on a single Page
- Added: Local video support
- Fixed: Caption CSS positioning
- Fixed: Cannot modify headers error on ajax.php
- Added: Insert from Other Images Sources - automatically load images on scroll and search
- Fixed: Featured Content sliders honour caption position setting
- Added: esc_url() on add_query_arg() calls
- Added: Caption Position (Top, Bottom, Left, Right - defaults to Bottom)
- Fix: Video Caption HTML markup producing invalid W3C validation results
- Fix: Removed deprecated This Post’s Slider on Add Slider button
- Fix: Edge case where some v1.5.x to v2.3.x+ migrations would result in sliders not displaying in the WordPress Administration.
- Added: Option to choose aria-live setting (off, polite, assertive; defaults = polite)
- Fix: JS error when attempting to set aria-control attribute when using Dynamic Addon
- Added: ARIA roles and tabindex on slideshow control and pager elements for better a11y compatibility
- Added: Ticker option
- Fix: Image dimensions not displaying when enabled on Dynamic Sliders
- Added: Filter for Addons to load in CSS files
- Fix: Mobile detection wrongly including some tablet devices.
- Added: Conditional UI elements on Admin Screens
- Added: Mobile Tab - mobile slide image option moved to this new tab
- Added: soliloquy-item-XXX class to each li element
- Fix: Thumbnails compatibility with upgraded slider JS
- Fix: IE11 Carousel Addon Compatibility
- Fix: Upgraded slider JS
- Fix: Mobile image loading
- Fix: Improved error message UI when uploading files exceeding WordPress / PHP file size limits
- Fixed: When upgrading from 126.96.36.199 or later, ensure the New Slide Status is set to Published if the user has not updated this via Soliloquy - Settings
- Added: Enable Captions on Mobile
- Fix: Insert/Edit Link modal in Attachment Editor was hidden behind Attachment Editor Modal
- Added: Caption Delay after slideshow transition
- Added: RTL Support
- Added: Filters on slider item image class element
- Added: Option to include image dimensions in output for Google Pagespeed compatibility
- Fix: YouTube and Vimeo placeholder images are attached to the relevant Soliloquy Slider on wp_insert_attachment() when viewed in the Media Library.
- Added: Youtube Video Placeholder Image - attempt to retrieve HD version, fallback to SD version
- Added: Vimeo Video Placeholder Image - uses new API to get highest resolution image available
- Added: soliloquy_media_buttons filter for Add Slider button
- Fix: YouTube Video Placeholder - prevent grey placeholder thumbnail from being retrieved on some videos
- Fix: media_buttons filter replaces depreciated media_buttons_context filter
- Added: Button in Soliloquy > Settings to fix broken site migrations where slides are missing
- Added: Global publish/draft default in Soliloquy > Settings. Used to automatically assign published/draft status to slides added to existing sliders
- Fix: Updater checks for plugin and addons w/ WordPress 4.1 support
- Fix: Support for HTMl slideshows with non-alphanumeric characters on edit
- Fix: Prevent the same stylesheets loading multiple times on a single Page/Post/CPT
- Fix: Height calculation bug when using AJAX preloading
- Added: When editing an existing slider, new slides added can have their status set to draft or published.
- Fix: Carousel bugs
- Fix: Slider reducing to 1px height bug
- Added: WordPress 4.0 Edit Metadata UI for slides.
- Added: Better Video Placeholder retrieval methods for enhanced performance.
- Added: Filter to get_image_info() to support third party filtering of cropping methods.
- Added: Localization Support
- Changed: Video thumbnail is now called Video Placeholder image to avoid confusion with the Thumbnails Addon.
- Fix: Vimeo over HTTPS JS errors
- Fix: Video controls not working when slider control nav enabled.
- Fix: Mobile touch swipe support for video slides
- Fix: SSL checks when loading Addon images in WordPress Administration
- Fix: Display reason why images cannot upload (max file size exceeded, file permission error etc).
- Fixed bug with sliders displaying in IE8.
- Fixed bug with sliders saving to the wrong post type.
- Fixed possible bug that prevented slider output in some cases.
- Bug fixes and UI Refreshs for WordPress 4.0.
- Improved performance and reliability for plugin update and license checks.
- Fixed bug with YouTube API not pausing the slider when a video starts playing.
- Fixed bug with saving sliders to regular posts instead of the Soliloquy post type.
- Fixed performance bug with API automatic updates.
- Fixed bug with video slides on mobile devices.
- Other bug fixes and improvements.
- Various bug fixes and performance improvements.
- Fixed bug with API updater sending requests on admin pageloads.
- Fixed bug with hidden post type screen errors.
- Added new filter to filter styles on individual slides.
- Fixed issue with getting slider by slug when slugs were similar.
- Improved image upload responses by standardizing with the main refreshing function.
- Fixed asset loading issue where styles would not be applied soon enough when the slider loaded.
- Added descriptive classes to the no JS fallback slider output.
- Added main support for lightbox thumbnail cropping in the main
- Fixed image indexing bug with Google.
- Fixed some bugs with the Classic theme.
- Fixed max_execution_time bug on some shared hosts for image cropping.
- Fixed bug where link dialog box would load underneath metadata modal dialog.
- Improved asset loading with minified files and reduced HTTP requests.
- Updated CodeMirror for HTML slides.
- Added contextual classes for UI elements to the slider.
- Fixed bug with HTML thumbnails not inserting when creating the HTML slide.
- Fixed bug with Soliloquy duplicating images excessively when trying to retrieve cropped images.
- Improved contextual language in metadata editing area.
- Fixed bug with Settings page tabs not appearing.
- Fixed bug with with over aggressive sanitization of dropdown settings.
- Fixed bug with Dynamic addon not cropping images correctly.
- Fixed bug with
func_get_args not grabbing all parameters when cropping images.
- Fixed bug where "Full Width" would persist from one slider to another if more than one was on a page.
- Fixed bug where sliders would start auto sliding after pausing a video even if auto was set to false.
- Improved slider height calculation to prevent content shifting.
- Fixed bug with not having proper thumbnail cropping support if cropping for the main slider was turned off.
- Improved getting video thumbnails by using the WP HTTP API.
- Don't show upgrade notice for new users of Soliloquy.
- Many various bug fixes and general improvements.
- Fixed bug with image cropping for sizes registered with WordPress.
- Fixed backwards compat bug with slider shortcodes that used IDs as values.
- Added ability to parse shortcodes in widgets to prevent sliders from disappearing.
- Fixed error in slider display.
- Slider metabox now only appears on Soliloquy post type screen by default (can filter to add to other post type screens).
- New "Full Width" size setting to allow full width sliders.
- Fixed navigation arrow regression (arrows only display on hover in Classic theme).
- Improved upgrade and settings import from v1 to v2.
- When switching back to Default slider size, the dimensions will adjust to the default slider dimensions.
- Fixed slider shrinking bug (woohoo!).
- Fixed some upgrade issues and defaults for new slider settings.
- Improved styling and backwards compat styling for captions.
- Added automatic thumbnail generation for video slides from the video source.
- Added ability to set none position styling for the slider (upgraded sliders now default to this).
- Added support for starting slide option and dynamic starting slides.
- Improved styling for iframe and object tags in HTML slides.
- Improved slider engine inline style handling for better responsive support.
- Improved backwards compat support for v1 template tags.
- UI styles and improvements.
- Fixes many UI regressions when upgrading from v1 to v2.
- Added new filter to change Soliloquy metabox priority.
- Fixed bug with slides not appearing properly for slide transitions.
- Fixed bug with HTML slides not displaying.
- Tons of bug fixes and stability improvements.
- Fixed bug with captions appearing on top of slides instead of bottom.
- Fixed bug with captions being malformed with video slides.
- Captions now parse shortcode properly (regression fix).
- Added new tab link option back to metadata options (regression fix).
- Check to ensure Upgrader is available before loading.
- Add backwards compat support for transition classes on sliders.
- Fixed admin script dependency issues.
- Fixed error with caption styling.
- Adds backwards compat and legacy support for v1 addons upgrading system to allow addons to upgrade.
- Fixed bug with dra-and-drop uploader in WordPress 3.9.
- Fixed issue where URLs would not match new site after migration.
- Add proper quotes around JS object keys to prevent JS parse errors.
- Allow captions to be placed outside of the slider.
- Miscellaneous bug fixes and improvements.
- Say hello to version 2.0!