Upgrade your image slider on SharePoint

Your image slider is okay. But you’d like it better if it had a makeover (50 points to whoever can guess the commercial reference).

This post will show you how you can take your out-of-the-box content search web part slideshow from this:

2018-03-24_17-10-39

to this:

2018-03-24_17-26-46

This solution supports multi-line descriptions that don’t get cut off. It gets rid of that dreadful partially transparent overlay and gives you more of your photo uninhibited by messy design. It’s more modern, lighter and sure to impress. At the end, be sure to adjust the CSS to match your own color scheme and size needs.

You need:

  • A classic/wiki page on which you’ll be placing the content query web part
  • A new or existing picture library app for slideshow images (works best and makes it so we don’t need to modify mapped properties)
    picturelibrary

Note: If you already have a content search web part functioning as a slideshow, skip this first section

Creating a new slideshow via content search web part

  1. Click in empty space in area of the page where you’d like to place the slideshow
  2. From the ribbon menu, select “Insert” and “Web part”
    insert web part
  3. Content rollup –> Content Search –> Add
    content search.png
  4. Edit the web part
    editwebpart
  5. Click “Change query” and set “Select a query” to “recently changed items” so we’ll always be rotating through the most recent images
  6. Set Restrict by app to “Specify a URL” and paste the URL of the image library which will hold the images used in the slideshow. Do not copy anything after the name of the library (no views)
    photo url
    basics.PNG
  7. Click “Refiners” and add the “Image” AND/OR “Picture” content type(s) to refiners
  8. Click OK
    query settings.png
  9. Set properties to rotate through 4 or 5 images, Control to Slideshow and Item to Large Picture.
    content search settings.PNG
  10. Click OK
  11. Save the page

Giving the web part a makeover

  1. Edit the page again, this time to add a script editor web part
    Note: you could also add the css to a new css file, save it somewhere and reference the URL in a Content Editor Web Part. Or if you have an existing CSS file running on the page, you can simply add this CSS to that file
    script editor
  2. Edit Web Part
    editwebpart
  3. Edit Snippet
    edit snippet
  4. Paste the following CSS into the script editor
    <style type="text/css">
    .cbs-largePictureContainer{
    padding-left:30px;
    padding-right:0px;
    padding-bottom:0px;
    }
    
    .cbs-largePictureImageContainer {
    width:410px;
    margin:0px;
    top:0px;
    }
    
    .cbs-Slideshow{
    width:410px;
    padding:0px 2px 120px 0px;
    border:0px solid #96005d;
    background:#ffffff;
    }
    
    .cbs-SlideshowItems{
    width:440px;
    top:0;
    }
    
    .cbs-largePictureDataOverlay{
    background:#ffffff;
    opacity:1.0;
    width:440px;
    left:0px;
    height:120px;
    }
    
    .cbs-largePictureDataContainer, .cbs-largePictureDataOverlay{
    position:absolute;
    top:230px;
    }
    
    .cbs-largePictureContainer, .cbs-largePictureContainer, .cbs-pictureOnTopImageContainer, .cbs-picture3LinesImageContainer, .cbs-largePictureImageContainer{
    position:inherit;
    }
    
    .cbs-largePictureDataContainer {
    width:385px;
    padding-left:0px;
    }
    
    a.cbs-largePictureLine1Link, h2.cbs-largePictureLine1, .cbs-Slideshow h2 {
    color:#96005d;
    font-weight:bold;
    font-size:1.25em;
    }
    
    .cbs-largePictureLine2 {
    color:#444;
    font-size:1.1em;
    }
    .cbs-largePictureLine2, .ms-noWrap{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:ellipses!important;
    }
    
    .cbs-largePictureContainer, .cbs-largePictureImageContainer {
    background:#ffffff;
    padding-bottom:20px;
    }
    
    .cbs-largePictureImg,.cbs-slideshowitems,.cbs-pictureimglink {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-bottom:4px solid #96005d;
    }
    
    .cbs-SlideshowPagingBar, .cbs-SlideshowPagingBarOverlay {
    top:5px;
    left:5px;
    height:200px;
    width:30px;
    }
    
    .cbs-SlideshowPagingLink-Active > span {
    background-color:#1f2844;
    }
    
    .cbs-SlideshowPagingLink-Active > span, .cbs-SlideshowPagingLink-Inactive > span{
    border:.1em solid #1f2844;
    display:block;
    float:left;
    width:9px;
    height:20px;
    }
    
    .cbs-SlideshowPagingLink-Active, .cbs-SlideshowPagingLink-Inactive, .cbs-SlideshowPaging-More{
    height:30px;
    }
    </style>
  5. Click OK
  6. Save/publish the page

And the most fun part? Start adjusting the colors, borders and sizes to match your existing branding/theme. Make it your own and have fun with it.

2018-03-24_17-26-46.gif

 

3 Replies to “Upgrade your image slider on SharePoint”

  1. I know you probably get very little traffic on these but my company is slow to adopt and your solutions have been super helpful to me! I love this one; the only thing I miss from the OOB photo slideshow is the fact it will cycle through the whole folder. I think I’m out of luck, but wanted to check to see if there was any way to make the “item of numbers to show” dynamic. Hopefully you see this! Rock chalk!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.