Slideshow Portlet

Learn how to display a slideshow of images in a portlet. You can optionally show the title and/or description of the images within the slideshow.

Only one slideshow portlet can be added to a page at this time.

Images

  • You will first want to compile the collection of images that you wish to display in the slideshow.
  • You will need to create a folder to contain all the images for the slideshow portlet.  We suggest you create a "slideshow" folder within your sites default Images folder.
  • It is highly recommended that all images have the same dimensions.  
  • Images with widths smaller than the portlet region in which they are placed will be stretched to fit.  So please size your images accordingly.  For example, we recommend a minimum width of 400 pixels wide for a slideshow portlet placed in the first and third columns (standard portlet regions).  All other portlet areas should have images with wider widths.  These widths will vary in size depending on placement and whether or not the first and/or third column is in use on the page.
  • Only published images will display in the slideshow.

Image Title and Description

When uploading images to the SOM web system, you have the capability of providing a Title and Description for each image.  

AddImage.png

By default the title and description of each image will display in the image slideshow portlet.  Either or both can be omitted and is explained in further detail below.

ImageSlidshowPortlet.png

Add an Image Slideshow Portlet

The Image Slideshow can be placed in any portlet location on a page.  

  1. Before you can add a slideshow portlet, you must first Turn off the TinyMCE Editor in your editing preferences.  Doing so will disable the editor and will require you to work with the HTML.  Don't worry, there isn't much you need to do other than copy and paste some custom code.  Since you can't change the editing preferences for a portlet, you must Globally Change Your Editing Preferences. Instructions for doing so can be found on the editing preferences page.  If you do not change your editing preferences before adding an image slideshow, the editor will modify the custom code and the slideshow will never work.

      preferences

  2. Navigate to the page you wish to add the Image Slideshow Portlet to.  Decide where (what portlet area) you wish to place the slideshow (reference labels 1 through 8 in the image below).

     
    PortletLocations.jpg

  3. Click on one of the green portlet links to either "Manage portlets" or "Add, edit, or remove a portlet".
  4. From the Add portlet... drop-down menu, select Static text portlet
    Add Portlet
  5. Copy the code listed below and paste it into the portlet.  

The Code

Copy the code listed below and paste it into your portlet.

You will need to update the code that is highlighted below in red.  This is the path to the "slideshow" folder (or whatever you named it) that you previously created.  For example, lets say I created a "slideshow" folder in the default images folder in the Office of Information (OIS) web site.  I would then replace site-name/slideshow/ in the code with ois/images/slideshow/

<script src="++theme++SOMTheme/js/somimageslider.js" type="text/javascript"></script>
<div id="myCarousel" class="slide" >
<p><a class="fallback" href="sitename/images/slideshow/">View Images</a></p>
</div>
<script type="text/javascript">
$(document).ready(function () {
somImageSlider({
sourcePath: 'sitename/images/slideshow',
transition: 'crossfade',
sortBy: 'effective',
});
});
</script>

 

Hide the Image Title and/or Description

  1. To prevent image titles from displaying in the slideshow, simply add the following line of code:
     
    itemTitleWrap: '<h2 style="display:none"> </h2>',
  2. To prevent the image descriptions from displaying in the slideshow, simply add the following line of code:
     
    itemDescWrap: '<p style="display:none"> </p>',
  3. To prevent both the titles and descriptions from displaying, add both lines of code.  Here is an example of what your code would look like:
    <script src="++theme++SOMTheme/js/somimageslider.js" type="text/javascript"></script>
    <div id="myCarousel" class="slide" >
    <p><a class="fallback" href="sitename/images/slideshow/">View Images</a></p>
    </div>
    <script type="text/javascript">
    $(document).ready(function () {
    somImageSlider({
    sourcePath: 'sitename/images/slideshow',
    transition: 'crossfade',
    sortBy: 'effective',
    itemTitleWrap: '<h2 style="display:none"> </h2>',
    itemDescWrap: '<p style="display:none"> </p>',
    });
    });
    </script>

 

Need Help?

Please contact us if you are having trouble adding an image slideshow portlet to your site.