Widgets extend the functionality of Pressero Responsive Skins, with the first widget offered being the Banner Widget.
- Widgets are designed to work with the new Pressero Responsive skins, and are not supported on original default Pressero skins.
- If the Widgets site settings are selected on a default skin, the error message "The chosen skin has no locations assigned" will display.
- Widget functionality is only possible with certain skins and will be shown at the top of the Widgets window.
- New widgets have to be created and added by our programming staff to be available for sites and cannot be created and added to a site by a user.
- At the time of this article the Banner Widget is the only widget available for the responsive skins.
Adding a Widget
Widgets are accessed from the site settings menu in the Pressero admin area. Any widgets that can be added to the site are shown on the Available Widgets listing on the left of the Widgets settings window. The Skin Locations list on right shows available widget locations that widgets can be added to. The first available location is the Home Page Banner.
The Banner allows for creating a slideshow that is added to the home page of a site that uses a Pressero Responsive Skin (If you wish to use a default Pressero skin with multiple banner images, the Moriarty skin has this feature available). The Banner Widget has settings for a variable number of image slides, for opening associated pages through linking the banner images, tooltip and preview settings, control over transition settings when changing slides, and other options to customize the behavior of the banner for your site.
When you first go to the Widgets settings window, no widgets have been added to the site yet, so a widget must be added and customized before it will be shown on the site. Click and drag the Banners item under Available Widgets to the slot for Home Page Banner under Skin Locations on the left. If there are existing widgets, they will show a preview, as well as delete and edit buttons.
Widgets settings window, default with no widgets added:
Widgets settings window, default with a Banners widget added to the Home Page Banner Skin Location:
When the Banners item is dropped onto the Skin Location, it is added and the Customize window opens, showing the settings for the widget that can be customized. If the banner widget already exists on a site, the edit pencil icon button can be used to open the customize window for the widget for changes. Customize settings are shown first, with Slides below that, and any existing slides for that widget will be listed at the bottom of the window. When the widget is first added to the site, no slides are visible at the bottom of the customize window because none have been added to the site yet. The process of customizing the widget is to adjust any customize settings at the top of the window as desired, then move to the Slides area to begin adding slides to the widget. You will add a series of slides and then use the Save Widget button to save all changes made in the Customize window.
At the very top of the edit Banner Widget window are a series of settings that control the transitions of the slides, and specific other options and settings for the banner. The tooltip available on each setting explains how that setting is used. These settings apply to all slides added to the banner widget. As the slides and settings for the widget are edited, the Preview pane at the upper-right of this window will show the changes in a live fashion.
Banner options that apply to all slides:
Widget Name: Give the banner widget a custom name, in case you are managing multiple widgets and wish to label them.
Transition Speed: The speed of the transition effect in milliseconds.
Timeout: The time between slide transitions in milliseconds.
Delay: The number of milliseconds to add onto, or subtract from, the time before the first slide transition occurs.
Loop: The number of times an auto-advancing slideshow should loop before terminating. If the value is less than 1 then the slideshow will loop continuously. Set to 1 to loop once, etc.
Transition Type: The name of the slideshow transition to use. There are multiple choices, and the chosen transition can be seen in the Preview window at the upper-right.
Pause on Hover: If true an auto-running slideshow will be paused while the mouse is over the slideshow.
Allow Wrap: This option determines whether or not a slideshow can advance from the last slide to the first (or vice-versa). If set to false then once a slideshow reaches its last slide it can no longer be advanced forward, it can only advance backward. Likewise, when a slideshow is displaying the first slide it can not advance backward. By default a slideshow will advance seamlessly from the last slide to the first.
Show Previous/Next Nav: Will show or hide the prev and next links for navigation.
Show Pager: Will show or hide the thumbnail pager.
Show Caption: Will show or hide the captions.
Begin Paused: If true the slideshow will begin in a paused state.
When you first add a new banner widget to a site, it has no slides, but the area for editing a slide is shown. The Slides area below the banner settings shows two images, two pull-down menus, and two text edit areas, with an Add Slides button at the bottom. Slides must be created and any settings changed and then saved with the widget. Multiple slides can be created, and any slides added to the banner will show in a series of numbered slots at the bottom of the edit banner window.
When you are looking at these settings you are looking at the settings for a single slide. If you are working with the widget for the first time, no slides will exist in the banner yet. You can add a picture and adjust the other slide options, and then click the Add Slides button.
Clicking the Add Slides button will add the selected settings to the banner as slide 0. The process of adding slides to a banner is to change the settings that you see here to your liking, and click Add Slides to save those settings as a new slide to the banner. You will have to add slides to your banner and save it, before it will be functional on the site.
Slide options that apply to the current slide shown in the customize window:
Slide Image: Select the image that is loaded on your site from the pull-down menu to assign it to the slide.
Upload: This button is a shortcut to get to the File Manager for uploading images, but it does navigate away completely from the widget edit window. Be sure to save any changes to your banner before using the Upload button. When uploading be sure your image is no larger than 1000 pixels on the longest side and the total file size is less than 200kb. Note that you must upload your images directly in the SkinImages folder in the File Manager. Do *not* place them in a subfolder of SkinImages or your images will not appear in the dropdown list for selecting slide images.
Slide Link: Provide an image link url. The protocol is not necessary.
Thumbnail: The thumbnail is an image that could be used to create an image slider for the banner instead of the dot slider that you see at the bottom of the banner image when viewing the finished banner on the site. The thumbnail currently has no functionality, and is for future implementation.
Upload: This button is a shortcut to get to the File Manager for uploading images, but it does navigate away completely from the widget edit window. Be sure to save any changes to your banner before using the Upload button.
Caption: Provide a caption for this slide.
Slide Title: Provide a title for this slide.
When you are done customizing the slide options, click the Add Slides button to add the selected set of options as a slide on the widget. When you do this the first time you will see a new entry at the bottom of the window for the slide, the first slide will be numbered as 0. You can continue to click the Add Slides button to add more slides to this widget. Clicking the Save button at the lower-right saves the widget with all slides and settings that have been added, and closes the banner widget edit window.
When you have multiple slides showing on the widget, there is a small pencil button to the right of the slide on the list at the bottom of the window. Clicking this edit icon will load that slide for editing on the settings above the list of slides. The trashcan icon allows for deleting a slide from the widget. You can edit or delete any of the slides on the list at the bottom of the window, allowing for as many slides as you like in the widget.
When you are editing the settings for a slide, the settings for that slide will load into the edit area when the pencil icon is clicked next to that slide on the list. An orange Save Changes button appears below the settings when you are editing an existing slide. Make any desired changes and click Save Changes. You can edit multiple slides one at a time in this manner, each time you click the button to edit the slide, that slide will be loaded and shown on the customize window. When all slide changes are done, click the blue Save Widget button at the lower-right of the edit window to save the widget and its set of slides.
Banner Slideshow Preview
The slide preview at the top right of the customize window will change and show the banner slideshow as it is being customize and this will preview on the Widgets setting window as well. This just shows how the slideshow will look on the site. An example of a slideshow using three slides is below. Note that on the Customize window, the slides are numbered 0, 1, 2, etc. The first slide in the banner is slide 0 on the customize window.
Slide 1 (0)
Slide 2 (1)
Slide 3 (2)
Note that if the banner preview looks like this, no slides have been added to the banner, please add some slides:
After all settings and slides have been adjusted and edited, click the blue Save Widget button at the bottom right of the Customize window. The banner should be available on your site page, but you may need to clear the site cache to get the change to show immediately.