In this article you will learn how to replace, add, hide, delete, link and rearrange slide show images (also known as banners). Slide shows can be useful in displaying lifestyle, vendor and/or promotional banner graphics. Slide shows are most commonly used on the homepage, but can be used on many other types of pages as well. To get started login to your site's Admin.


If you're looking to learn more about general imagery usage and editing, please review this article: Add/Edit Images and Using Thinkspace Stock Imagery


Once you're logged in:

  1. Navigate to Content > Slide Shows
  2. Click on the slide show you wish to edit (most likely it is 'Home')


To replace or add a new image:

  1. To replace an image scroll to the slide (aka image) you wish to replace
    To add a new image scroll to the first empty slide underneath all your other slide show images
  2. Click the Choose file button next to the Image field
  3. Find the file on your computer, select it, and click Open
  4. Click Save in either the top-right or bottom-right of this page


VERY IMPORTANT:

In a single slide show, each image should be the exact same dimensions. To learn what size your images need to be before uploading:

  1. Right click on an image that you know is the right size (an image we, Thinkspace, added to the site for you is a good bet)
  2. Select Open image in new tab
  3. Hover your mouse over the tab that opens - in parenthesis you will see the image dimensions


Any image you want to swap out or add another one of on the website, you can learn the dimensions of by doing the above.


TO RECAP:

A slide show image must be the following before you upload it to the site:

  1. The correct dimensions as the other photos you are adding it in the mix with.
  2. Compressed for web. We like to use this online image compressor: https://compressor.io/compress

To hide an image you may want to use at a later date:

  1. From the Status dropdown select Inactive and click Save in either the top-right or bottom-right of this page

To delete an image that you'll never want to use again:

  1. Click the check box next to Delete in red and click Save in either the top-right or bottom-right of this page.

To link a slide show image to somewhere on your site or another site:

  1. Put the URL of where you want the user to go when they click on the image in the URL field (not to be confused with the 'Image url' field!)

To control the order of your slide show images:

  1. Via the Order field place a 1 for the image you want to show first, 2 for the image you want to show second, and so on. (Note: Lower numbers show up higher in the list, you can also use negative numbers)

The following screenshot references the above instructions, as well as:

When you add a new slide show image there are generally (generally as in there are exceptions, albeit rare) a few fields you should fill out, and a few you shouldn't. The red boxes indicate fields which should be filled out.

Please also note that having an image present in both the Desktop Image and Desktop Image URL sections (or Mobile Image and Mobile Image URL) will cause the image to turn out blank. Please only choose one or the other, not both.


The green box is for Mobile. All of the instructions listed above work exactly the same for mobile slides. We recommend that the dimensions for mobile images be 480 x 540 pixels. 


To replace or add an image using the Thinkspace stock imagery files:

  1. To replace an image scroll to the slide (aka image) you wish to replace
    To add a new image scroll to the first empty slide underneath all your other slide show images
  2. Click the folder icon next to Desktop Image URL (or Mobile Image URL).
  3. In the popup window you'll see your Media Manager. Navigate to Library and then choose the folder Styles
  4. Next you'll see various folders for categories of images. If you double click any of those folders you'll see a set of folders for each different size variation. (Banner-Long images are 1440 x 470 and Banner-Mobile images are 480 x 540 - note that the banner-long size may not be right for your website so please note what your banner size is first before using this size).
  5. Each image has a corresponding image in both the Banner-Long folder and the Banner-Mobile folder, just make sure to note the number of the image you chose (Example: banner-long-12 is the same image, but cropped differently, as banner-mobile-12).
  6. Double click the image you want to use and the URL linking to the media files will fill in on its own.
  7. Click Save in either the top-right or bottom-right of this page