Slider Images

What is it?

Sliders are a great way to advertise for a new event or make your page appear more vibrant with images.  Effective use of a Slider is crucial and requires careful attention, to ensure your transitions are seamless and add to the experience of your website.

Adding Slider Images

Here’s how you can add new images while minimizing errors:

1. Place your cursor and click to the right of the last image found in the text editor.
2. Select the ‘Image’ button at the bottom of the editor to either find and select your new image from the Media Manager or upload it from your computer. 

Note: Once you’ve clicked inside the text editor, you don't need to click anywhere else, nor do you need to hit the ‘Enter’ key. You can simply use the "Image" function highlighted above to continue adding images, one after the other.

Common Issues with Sliders

When uploading images into the Slider, here are a couple items to be aware of.

Images Overlap or Disappear:

The most common error encountered with the slider involves the images either disappearing, or overlapping one another when viewed on your website. This occurs for one of two reasons. The first is spacing. The slider is meant to operate with no space between each image. If space is added to the widget, the slider attempts to slide the space as if it were an image, then encounters error once it fails. To remove the space, you'll likely need to edit the widget's code. Common space code is represented by the tags of <p>,</p>,<br>, and actual space created by hitting the space bar. Deleting these out should correct the issue. If you're uncertain you want to edit the code, feel free to contact the help team, and we'll remove the space for you as needed.

The second reason is additional code exists in the widget, such as URL links that are no longer in use. Correcting this is similar to the example above in that the extra code needs to be deleted from the widget code. If you're uncertain you want to edit the code, feel free to contact the help team, and we'll remove the space for you as needed.

Verify the File Size:

All slider images should use the same width and height (as determined by the size of the first image shown in the text editor). So if your first image uses 980 pixel width by 240 pixel height (980x240), all the following images should use those same dimensions.

Note: Edit the image sizes prior to uploading them into your MC Professional Media Manager. Doing so will allow smooth transitions and uninterrupted movement of the Slider. There are many free online image editors available,such as FOTOR or PIXLR. 

Hyperlinking an Image

 Click on the image from within the editor and then select the "Insert/Edit Link" icon from the toolbar. In the resulting pop-up window, you can paste or type in your URL.

Note: If you want to apply hyperlinks to a set of images, we recommend that you first insert each image, save your changes, and only then place those links on top of each respective image. This method ensures that your links are applied to the right images.

Review the File Name:

If an image's filename contains spaces, each of those spaces will be represented by a percentage symbol (%) in the HTML code. Those symbols can result in formatting conflicts. 

When editing an image's filename, you can feel free to replace any spaces with an underscore (_) or a dash (-).