This is another one of these techie posts. But I have one image for you too. I shot it recently on a trip to Mendocino. More image related posts are coming soon!
I am in the process of migrating my site over to The Turning Gate’s Backlight toolset. Currently, one important feature is missing: slideshows. This will come, eventually. Since I didn’t want to wait, I looked into adding one by myself.
This is a very simple and low-overhead slideshow. It does not require any special PHP or Javascript libraries and can be used on the home page or on any other of your pages or galleries!
Donation
Do you like my slideshow? Do you want to use it on your site? Please show your appreciation by donating to my pizza&wine fund. This helps keep me motivated to post other TTG Backlight related customizations. Thank you!
1) Create Slideshow Gallery Template
In order to create a slideshow, I need a few properly sized images. I could export them from Lightroom and ftp them to my site. But I it makes more sense to take advantage of Backlight. In the future, adding images to the slideshow will be easier this way.
First create a Gallery Template for my slideshow. This template is only used to create images on my site that will be included in the slideshow. The gallery feature is not used. There are only two important settings that need to be done: maximum image width and height. Both can be found under Image Settings. For me it is 900 x 600. It seems that Backlight requires at least 640, so that’s what I used.
2) Create Slideshow Gallery
Next, in Lightroom’s Publisher, create a catalog and populate it with my images. Take care to only select images that have the same aspect ratio! This makes for a nicer look.
Please note that my code assumes that all images have the same aspect ratio!
These are my settings:
and
Take care of following fields:
- Slug: slideshow. This is the name of the directory where the images will be located
- Hide from Album Set: There is no need to show this gallery.
- Hide from Search: These images shouldn’t show up in an image search.
Please note, as long as you are logged in as Backlight Admin, the gallery will always show. But it will be hidden for a regular visitor.
Once you have published your images, they are ready to be included in the slideshow.
3) Add Slideshow to Homepage
Now it gets interesting. Currently, there is no Phplugins support for the Page Copy area. So instead of using some lines of php code to insert the slideshow images, you have to do this yourself. Using your ftp tool, go to the
/galleries/slideshow/photos
directory to get the filenames for all your images.
Copy following block of code and paste it in the Page Copy section on the page where you want to show this slideshow. This can be the homepage or any other page or even on top of a gallery page. Then update the first few lines to reflect your image names. The number of images you can add is not limited, but I would not have more than 10 or 20 images.
<div id="slideshow" class="fadein clearfix"> <img src="galleries/slideshow/photos/image_1.jpg"> <img src="galleries/slideshow/photos/image_2.jpg"> <img src="galleries/slideshow/photos/image_3.jpg"> ... <img src="galleries/slideshow/photos/image_x.jpg"> </div> <style> .fadein { position:relative; } .fadein img { position:absolute; left:0; top:0; transition:opacity 1s; opacity:1; } .fadein img.is-hidden { opacity:0; } </style> <script> var delay = 3000; // image delay var ratio = 2/3; // image area aspect ratio // don't modify below function set_slideshow() { var n = document.getElementById("slideshow").offsetWidth; document.getElementById("slideshow").style.height = n * ratio + "px"; } window.onload = set_slideshow; window.onresize = set_slideshow; // Slideshow from: https://snook.ca/archives/javascript/simplest-javascript-slideshow var i=0; var root = document.querySelector(".fadein"); var els = root.querySelectorAll(":not(:first-child)"); for (i=0; i < els.length; i++) { els[i].classList.add("is-hidden"); } root.addEventListener("transitionend", function(){ root.insertBefore(root.querySelector(":first-child.is-hidden"), null); }); setInterval(function(){ root.querySelector(":first-child").classList.add("is-hidden"); root.querySelector(":nth-child(2)").classList.remove("is-hidden"); }, delay) </script>
There are two customizations possible:
- delay: Defines how long an image is displayed
- ratio: Aspect ratio for slideshow. This should match your image settings.
You find the variable settings at the beginning of the <script> section.
To update the slideshow, just publish new images from Lightroom and add them to the image list.
4) Enjoy your slideshow!
If you have questions, please post a comment below or use the contact form.
I hope you like this little tutorial on adding a slideshow to a Backlight page. As always, I appreciate your donation. This keeps me sharing things like this. Thank you!
Yes, my site is still powered by CE4, but the Backlight based implementation is coming.
5) The missing FAQ!
- How can I center the slideshow images
I assume that all images have the same width. Just adjust the max-width setting to match your image width:
div#slideshow { max-width: 800px; margin-right: auto; margin-left: auto; }
You can add these lines of code to the ‘style’ section of the slideshow code that you have in the Main Copy area.
- How can I make the slideshow pop a bit?
#slideshow img { border: 1px solid black; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); }
Here is the info on box-shadows: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp. Thank you, Rod, for the hint!
Prints and Licensing: All images are available as fine art prints and for licensing. Please contact me for more details.
Hi Daniel, Got it working, i needed to add http://mainundmain.com before galleries/slideshow etc. I also mistakenly had ‘insert album’ checked on my page template. Otherwise it would have been 20 mins. Cheers
Hi Daniel, works like a charm – even for a layman as me.
Only one thing: I tried to make the slides responsive so that the viewer would get onto my portfolios, but that did not work. I added
< a href="http://www.my site" rel="nofollow"> in front of <img
and
< /a> after .jpg”>
Cheers
Eckart
oops, the code is translated. I used the href= etc.
I tricked the view by adding a space between < and a or /a. This way the code is not treated as html. I have to check how to make the images 'clickable'.
Hi Daniel,
Once again a great idea and implementation. On my site I have a bug with the slideshow: if “Home” is clicked, the text is for a moment behind the image of the slideshow at the top of the side.
http://www.der-canonier.de
where could the error be?
Many Greetings
Markus
Thank you, Markus.
It’s not really an error, but it has to do how the page is constructed. Unfortunately, I haven’t found a way around it yet.
Daniel thank you, it all works wonderfully!
There are also beautiful images on your site.
Bravo.
Philippe
Great! Thank you for your kind words, Philippe!
Daniel, it took me less than 20 minutes to set this up – very cool and thanks for your work. Is there an easy way to center the slideshow? I am looking at the 680 pages of the “CSS missing manual” and I struggle to find a solution.
Hi Alfred! 20 minutes? Wow, that’s cool. In my case, I make the images all the same size and have them cover the entire width. I have to review the animation code to see how images can be centered when they are smaller. I’ll drop you an email once I have a solution.
—
Daniel
I assume that all images have the same width. Just adjust the max-width setting to match your image width:
div#slideshow {
max-width: 800px;
margin-right: auto;
margin-left: auto;
}
You can add them to the ‘style’ section of the slideshow code that you have in the Main Copy area.