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!