Managing slider widgets and images
Sliders are a great way to feature upcoming events and make your website pages more vibrant. To ensure smooth transitions and seamless movement between your images, follow the best practices and formatting requirements detailed below.
Important: Avoid copying and pasting text, images, or graphics directly from outside sources into the editor. This can introduce hidden, incompatible HTML code that breaks the slider widget's layout.
Limitations and file rules
Before creating your graphics, make sure your files meet these strict requirements to prevent display errors:
- File format: All image files must be in .jpg format.
- Dimensions: Every image in the slider must share the exact same width and height dimensions (e.g., 980x240 pixels). You must resize your images using an external photo editor (like Fotor or Pixlr) *before* uploading them to the system.
- File name formatting: Do not include spaces in your image file names. Spaces convert into percentage symbols ("%") in HTML, which can cause formatting conflicts. Use underscores ("_") or dashes ("-") instead.
To add images to your slider
Note: If the slider widget is not yet enabled on your page, please contact the Support Team to activate it.
- Open your slider widget text editor. Place your cursor and click directly to the right of the very last image currently in the editor window.
- Click the Image button located at the bottom of the editor. Select an existing file from your Media Manager or upload a new .jpg file from your computer.
- After inserting an image, do not click anywhere else or press the Enter/Return key. Immediately click the Image button again to add your next graphic. The slider requires images to sit perfectly back-to-back with no spaces or line breaks between them.
Adding hyperlinks to slider images
If you want to link your slider graphics to event registration or landing pages, follow this recommended workflow to keep the code clean:
- Add all of your desired slider images back-to-back following the insertion steps above, then save your changes.
- Re-open the editor, click on a specific image, and click the Insert/Edit Link icon on the toolbar. Paste your destination URL into the pop-up window and save. Repeat this process for each individual image.
Troubleshooting common slider issues
- Images are overlapping or disappearing: If your slider images overlap or disappear entirely on the live site, it means stray code or unexpected spaces have corrupted the widget loop. This happens for two main reasons:
- Stray HTML spaces: The slider breaks if it detects spacing code between images. Hitting your space bar, pressing the Return key, or pasting text can generate hidden "<p>", "</p>", or "<br>" tags. You must open the widget's HTML view and delete these tags so the "<img>" tags sit next to each other.
- Dead links: Leftover link code from deleted or replaced images can cause the slider to fail. Ensure every active link code block is tied directly to a valid image, and delete any empty or orphaned "<a>" tags from the backend code.
Need help with code? If you are uncomfortable editing the widget's HTML code to clear out these spaces and dead links, reach out to our Support Team for assistance.