It was suggested that we have an image slider showing our adopted animals, there are a few cats among the dogs. Creating the slider was easy enough, editing the photos while easy but time-consuming considering the number of adoptions we have had over the years. Getting the image slider to display where I wanted it to was a bit more difficult. As of the date of this post, I have edited 280 photos, almost halfway done.
Adopted Image Slider
My Requirements
- Display images in a random order.
- Fast load times.
- Display as part of the header section of the website.
The Smart Slider 3 plugin can display the images in random order. However, this turns off image caching for the slider. Turning off caching can impact the image load times. I also discovered that the more images in the slider the long it took to load, which was expected.
What I Did
- Create multiple sliders with a limit of 10 images each.
- Edit the WordPress theme to display the slider in the header section.
The image load times for 10 images are acceptable. The images in each slider are not random. However, each slider is displayed in random order. So the images are displayed in a pseudo-random order. The slider is changed every time the page is refreshed or you navigate to a new page. In the code, I create a list of sliders and then shuffle the list. The current slider is passed to the next page until it reaches the end of the list. There I reshuffle the list and start over. So, as I add more sliders the more pseudo-random the images become.
Future Changes
At the moment, I can only think of a few changes.
- Add the ability to exclude sliders. Each slider has an ID number. My tiny bit of code loops through a defined range of ID numbers. It works fine, the problem is if I create a slider for a different use I have now way to not use that number.
- Create a dashboard to configure the range of sliders and a list of sliders to exclude. At this time I have not way to exclude a slider and I have to edit the code as I add sliders. Think about adding the option to change the default session timeout.
- Think about increasing the session timeout from the default 30 minutes.
Conclusion
I am 95% happy with the way the sliders are working with the website. Only time will tell.
While the visible change is minor, the behind-the-scenes changes were a little more involved.
Please let me know what you think by commenting below.
I am up to 320 images that I have edited for the “Adopted” image sliders, a little over half way!
Mark
Awesome update! Thank you for your hard work on this too. We love it! ❤️