Adding a Slideshow to Backlight Based Pages

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!

Mendocino Coast with Fog
Mendocino Coast with Fog

 

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. Yep, it works and you can do it as well! Here we go:

I have created a sample site to show how it looks: stage.danielleu.com/slideshow.php

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.

11 thoughts on “Adding a Slideshow to Backlight Based Pages”

  1. 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

      1. 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'.

  2. 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

    1. 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.

  3. 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.

    1. 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

    2. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *