Tag Archives | sliders

Meta Slider Plugin

meta sliderMeta Slider plugin is simple to use and lets you choose between four different “types” of sliders – Flex, Nivo, Coin, and Responsive.  Each type is responsive, and gracefully changes sizes for different types of devices, and offers various features for layering and transitions.  You can easily swap between the four types to find the one that suits you.

If your theme does not include functionality for a slider, you have some other choices:

  • Rotating Post Gallery – this is the plugin the Commons uses on its Home page.  It has many great features, but it has several drawbacks: it is not responsive, and it is a widget-only plugin – you need a widgetized area to display it.  It also only allows one slideshow per site.
  • Revolution Slider – This plugin is great on a single site, but it is written in such a way that its powerful layering functionality doesn’t work on the Commons.  You can create great slides, but you can’t layer them with captions.  It allows multiple slideshows per site, using convenient shortcodes, and offers many different types of sliders and effects.
  • EasyRotator for WordPress – this is also a great plugin, but it requires that maintain your slides using an external Adobe Air application, which you need to install on your computer. It also allows multiple slideshows per site, using convenient shortcodes.

The Meta Slider addresses the shortcomings highlighted above.  It allows multiple slideshows per site, using convenient shortcodes.  It doesn’t require any external application, and you can layer your slides with rich text formatted with HTML.  It’s simple to quickly set up an attractive slideshow on any page or post, or on a text widget in one of your sidebars.

meta slider tabGetting Started

  • First, decide on the dimensions of your slider for non-mobile devices.
  • Add the images to your media library that correspond to these dimensions. Meta Slider does a good job scaling up and down – but to avoid distortions and loss of sharpness, it’s best to get your image sizes close to your full size.
  • Click on the Meta Slider tab to create a slideshow.
  • Click on the “Add Slide” button to see the images in your media library. (You can also upload more images at this stage as well.)  Choose the ones you want to include.  Hold down the shift key and select multiple images.  You will see them checked.  Save and preview.  (You can always add or remove more slides later.)
  • Choose a slide type (i.e. Flex, Nivo, Coin, and Responsive) – each has a list “Advanced Settings” for further configurations.
  • meta slider settingsEnter the slide dimension you’ve decided upon. (this should be the largest size you expect to display on your page – it will scale down on different devices)
  • Optionally, add some caption heading and body with links – certain slider types are better for this (Nivo, Flex).  Some HTML is parsed, so you format as needed.
  • To create another slideshow, simply click on the “+” sign in the Slideshow tab.
  • Each slide will have a automatically generated shortcode.  Simply copy and paste into your post or page.

Tutorial

This five minute tutorial should get you up and running quickly:

Hope you enjoy this plugin!

EasyRotator for WordPress

easyrotatorThe Easy Rotator for WordPress plugin provides an easy way to add a customizable slider to a page or post, or to a widget area.  You can add as many distinct sliders as you want to your site, and use many different template styles.  Animation can be customized for each separate slider, and depending upon the template you choose, text and links can be added to suit your needs.  This is a great plugin to use if you’re using a basic theme like Twenty Twelve and want to embellish your content with some dynamic images.  Pictures can be selected from your computer, your WP media collection, or from the images you set as “featured” on your posts.

In case you are wondering, a slider is a set of images that cycle through your page, post, or most probably, your home page.  In most cases, you can configure your slider to fade or slide, and link to a page or post that is displayed.  You can configure how long the image stays on the page, and you can control what text should overlay the image (if any).   Sliders are a good way to showcase the contents of your site. 

Getting Started

Setup is a little different for this plugin.  Once activated, you should see the following box at the top of your dashboard:

easyrotatorInstall2Click on the install button, and follow the instructions to install EasyRotator’s editor application onto your computer.  This also involves installing Adobe Air.  This one time process takes a couple minutes to complete.  Once done, you will see a new icon when you go to edit a page or posteasyrotatorbutton.  Click on the button to add a new rotator or to edit an existing one.

Getting Help

easyrotatorhelp1This plugin comes with a great help panel which can be accessed from your dashboard menu under EasyRotator tab.  It includes screenshots of the various screens you’ll need to use to set up the API and to create and customize your sliders.  It may seem overwhelming at first, but I think you’ll find the plugin is fairly easy to use and awesome in what it can do.  The plugin comes with a premium “Pro” version which the Commons currently does not support.  And it also includes a widget that you can use in your sidebar.

WP UI Plugin – Tabs, Accordions, Sliders

Now available on the Commons, the WP UI Plugin provides five powerful display tools to use in pages and posts: (1) tabs; (2) accordions; (3) spoilers (or show/hide “collapsibles”); (4) dialogs (or popup windows); and (5) feeds. For a quick idea of what you can do with this plugin, check out the WP UI demo page.

Other plugins and themes on the Commons let you do this kind of stuff, but what is unique about WP UI is the way it integrates content from your site. You can select certain posts and pages and display them in an accordion or as a tabbed collection. Or you can select post categories or tags, and content can be dynamically added.

You can also animate the display automatically. This functionality has a bunch of configurable options: slide interval, slide style (slide or fade), vertical, horizontal, etc.).

Using the Interface

WP UI uses short codes to work its magic, and the interface tries to make this easier. Don’t be put off by the confusing options for tabs and accordions. “Add a Tab Set” and “Wrap a Tab Set” are designed to automatically generate short codes for your tab or accordion. Here’s how they work:

  • “Wrap a Tab Set” creates the wrapper that you’ll need, and lets you configure many options for your container. You should click on this one first and set up the outer layer.
  • “Add a Tab Set” is used to provide content to your tab or accordion container. Position your cursor in the middle of the wrapper, where the content goes, and click on “Add a Tab Set”. You’ll need to provide a tab name and then select whether to manually enter text or select content from a post or page. You’ll need to repeat this operation for each tab you want to display.
  • If you want to select categories or tags from your post as content, you will only need to use “Wrap a Tab Set.” Set up your container’s options, and then click on “or Display Posts.” A drop down will appear with the following options: categories, tags, popular, recent, and random. Pick one of these, and select the number of items you want in your collection (default is 5).

You can always enter the short codes manually if the interface confuses you.

The interface for spoilers and dialogs is a much simpler, one step process as these tools display just one content object. Again, you can enter text or select content from your site.

“Feeds” is also very straightforward – simply enter a feed URL and select the number of items you want to display, and the feeds will be displayed in a tabbed container.

Don’t overlook the most useful item on the drop down men – Documentation. Here you can find code examples that you can mimic. I found it more useful than the WP UI Quick Start, but check that page out as well.

Settings

The plugin has many settings, and you can explore. You can control the way tabs look and behave, select skins for your containers, and determine how content from your posts and pages is displayed.

WP UI is a great plugin to aggregate content on your site, and add stylistic flair. Check it out!

Creative Commons License

css.php
Need help with the Commons? Visit our
help page
Send us a message
Skip to toolbar