PyroCMS is undergoing major changes for v3 -- join their Slack community for the latest news
The Sliders module will allow you to easily add Nivo Sliders to your current PyroCMS site. This module utilizes the core Files module to manage each slider's images. The Slider widget includes most of the Nivo Slider's javascript options, and will hopefully be extended in the future!
Visit my site for an interactive demo.
Rename the downloaded folder to sliders and drop it into your addons/shared_addons/modules directory, then install via the Add-ons section in the control panel.
Navigate to addons/shared_addons/modules and then...
git clone git://github.com/rpnzl/pyrocms-module-sliders.git sliders
When you install this module in the Add-ons section of your control panel, the installer will add a Sliders Module folder to your Files Module as a default container for individual slider folders/assets. If the Sliders Module folder already exists the module will use that instead.
You'll find the Sliders module settings under the Content dropdown in your control panel. Here you can choose the module's main folder, which will contain folders for each of your sliders. You can also append jQuery if it isn't already included in your public theme.
Head over to the Files module and open up the folder you chose as the Sliders module container (Sliders Module by default). Create a new folder within this container and give it a name. Upload your images to the new folder, and drag and drop each file to change their display order.
Note: The following is how I set up my own sliders, but if you think of something better don't hesitate to share!
- Head over to the Widgets Admin section and create a new area, we'll call it "Slider".
- Return to the Widgets Instances section and drag the Slider widget into your new Slider area.
- Choose your folder, set your options and save the widget.
- Copy the widget area's slug tag and paste it into the page you'd like to display the slider on.
If you plan to use captions, set the name of each file to the caption you'd like displayed. If you'd like a slider image to be a clickable link, right click the image in the core Files module and choose details, then paste the URL in the description input area.
Here's a list of default values and quick descriptions for the options that are available to customize a Slider widget instance.
- Choose Slider - N/A - Choose which folder to use for content.
- Theme - NivoDefault - Select a NivoSlider theme, or opt out.
- Captions - Off - Display captions, content is taken from each file's name.
- Slider Effect - Fade - All NivoSlider effects are available.
- Anim Speed - 500 - In milliseconds, slide transition speed.
- Pause Time - 3000 - In milliseconds, the amount of time between animations.
- Direction Nav - On - Display left and right directional arrows.
- Direction Nav Hide - On - Show direction arrows on hover only.
- Control Nav - On - Display navigation buttons beneath the slider.
- Control Nav Thumbs - Off - Use image thumbs as the control navigation, only takes effect when the theme is set to none.
- Keyboard Nav - On - Control slides with left and right arrows.
- Pause On Hover - On - Stop animation while hovering.
- Manual Advance - Off - Force manual transitions.
- Slices - 15 - For slice animations, # of slices.
- Box Columns - 8 - For box animations, # of columns.
- Box Rows - 4 - For box animations, # of rows.
This module includes the collection of themes that are provided with a standard Nivo Slider install - NivoDefault, Orman and Pascal. You can also choose to opt out of using one of these themes and give the slider some custom styling.
Take a look at the Slider widget's display.php to see how a slider is structured. If you plan to utilize custom CSS, you can access the widget div by class...
div.widget.slider { padding: 20px; }
div.widget.slider > div.slider-wrapper { background: #000; }
And specific widget wrappers by their folder id (X)...
div.widget.slider > div#slider-X-wrapper { background: #000; }
By default, the Slider widget will not be wider than it's parent container. But due to how Nivo Slider operates, the images will still display at their full width, which means they'll be cut off if they're bigger than the slider's display area.
The Slider widget will adapt it's size to the FIRST IMAGE in it's asset folder. If that image is larger than any subsequent images, there will be noticeable gaps in the slider's display. Keep image sizes consistent, and keep smaller images at the front of the image order.
The slider widget currently utilizes a path that points to YOUR_SITE/addons/shared_addons/modules. If you'd like to use a different directory instead, you'll have to modify the included Slider widget's run() method.
- Having two instances of the same slider on the same page.
- Anchor elements in captions.
You can find that here.
- Author: Michael Giuliana
- Twitter: @rpnzldesign
- Website: http://rpnzl.com/
- Dev7studios, who created and maintain the friendly Nivo Slider.