Add Image Rotator

Adding The Image Rotator Snippet

1. Navigate to the page or snippet you intend to edit in ICC. Click on the “Source Code” button to view the HTML.

   Open

   

2. Inside the source code, find the location where you intend to place the image rotator. Type a word there of your choice (this example used the word “image”). This will be used as a target to place the image rotator. Press “Ok”.

   Open

   

3. Back on the text-editor input box, select the word placed in step two and then click on the “insert macro” macro button in the text-editor toolbar.

4. Select the “ImageRotator” macro from the dropdown. Click “Submit”

5. The image rotator options panel is now visible. Click “Add Image”.

6. Ensure the image you would like to add to the rotator is ready to be added.

   1. The image should be no larger than 1600px wide. You can check this by downloading the image, navigating to the folder it is saved to, and then hovering over the file name to see the size. If it is too large, ask the dealer to provide one at the correct size, or request help from the design team to resize, if you do not have access to Photoshop etc. Additionally, if you are adding multiple images to this rotator, they should all be the same size, otherwise the slider will behave oddly.

   2. The image should be run through an optimizer/compressor to ensure the file size is not too large in KB. If it has already been run through an optimizer, the filename will typically contain “-min” at the end of the file name. If not, please use a free tool such as TinyPNG to reduce the size of the file for better loading times.

7. Type a name for the image and click “choose image” to select an image for the first image in the rotator. Note that only the name and image are required here. The other parameters are entirely optional. Update the options and upload other images as needed. Once you have finished, click “submit” and “save and publish” to publish your new image rotator.

For more on the settings available to adjust in the ImageRotator, see the Edit Image Rotator article.

Adding Separate Mobile/Desktop Image Rotators

There are two methods of allowing for the banner to change between desktop and mobile. One is easier for less tech-savvy users to edit and update (the bootstrap visibility method), while one is more “automatic” and requires less effort to update. I will detail both here.

Using Bootstrap Classes To Create Two Rotators

For this method, I recommend fully setting up a single image rotator with one version’s (either desktop or mobile) banners as much as possible before following the steps to add the second one. This will make it easier to jump in and swap out the banners for the second version.

This method is appropriate for situations where the image rotator only appears once, or needs to be easily updated by the dealer/AM.

Once you have your initial image rotator set up, we will need to add a div class surrounding the image rotator to tell the site when to display this particular item. We will use bootstrap classes to tell the image rotator how to behave.

If your initial image rotator has the desktop banners in it:

Add the following class AROUND the image rotator code -

If your initial image rotator has the mobile banners in it:

Add the following class AROUND the image rotator code -

Example:

Once you have added the appropriate class, you will copy and paste the entire code including the div class you just added, and then paste it below the first one.

For the second one you just pasted in, you’re going to change the div class to whichever one you didn’t use already (so in the example, I already used “hidden-xs”, so I will change the second one to “visible-xs”).

The rotator in “Hidden-xs” will not show on mobile, and the “visible-xs” rotator will ONLY show on mobile.

Once you’ve copy-pasted and added the appropriate classes, you can exit the code editor and click on the bottom ImageRotator snippet to adjust. Now that you have the classes in place, you can add the other size of banners to the new ImageRotator in the spots where you already added them on the first one.

Now that you’ve set up both “versions” of the Image Rotator, you’re all set. The sizing of the banner should make it clear which one is which for future editing, but you can also check the code for the div classes to determine which is which.

Make sure you Save & Publish on the page once you’ve made your changes!

Using A Script To Automatically Apply Mobile Banner

Coming soon!