I can add the image to the thumbnails, but the placeholder image doesn’t get updated, so when I click I just see the placeholder image. I’m sure I’m missing something simple, but I can’t figure out what it is.
Any suggestions?
Each image in the lightbox uses a thumbnail image, and a full size image. After you add your Lightbox Gallery, single click on the first image.
In the Overview panel, look for the Link component and select it. In the Options Panel, you’ll see the Link Options > URL. This is where you select your full size image.
Then, highlight the Image component. In the Options Panel, you’ll see Image Options > Source URL. This is where you select your thumbnail image and set its attributes.
Thanks - that’s pretty simple.
It seems like extra work, though - what is the use case for different thumbnails and linked images?
That’s basically the point of a lightbox, so you can click a smaller image and it will open the larger image. Allows you to add more content to your page in less space. 
Welcome to BSS and the forums
Most lightboxes use the same pic for the thumbnail and full-size image, to accomplish what you said. So I’m curious as to the use case that would allow two completely different images.
And thank you - I’m looking forward to learning enough to help someone else!
Not sure what you mean by “use case,” but the point in having separate thumbnail and full sized images in website photo galleries is that when your page loads, it’s only loading the small thumbnail images, so it loads quickly. The larger images are only loaded when clicked on.
Technically, you could use the large image for the thumbnail by shrinking it with the width and height options, but this is considered poor practice and will definitely slow down the page load.
Building large galleries can be tedious when using the Lightbox component because you have to create the different sized images yourself using a photo editor. There are some photo gallery programs like Visual Lightbox that make it easy to build large galleries quickly because they auto-generate the thumbnails, but can require familiarity with adding third-party JS to your page.
Another popular option is Nanogallery2, but this requires you to create your own thumbnails. It is an extremely flexible and full-featured gallery that can do a lot more than the Lightbox component.
They may allow you to do this, but it’s poor practice.
I suppose I’m used to Elementor and similar programs, where you add the full-size pic, and it creates the thumbnail for you. Is this not what’s happening here (except with the extra step of adding it twice)? Or am I supposed to be uploading the full-size image and the thumbnail?
The Lightbox component in Bootstrap Studio is a fairly basic, open source JavaScript gallery. It requires you to have both a thumbnail image, and a full sized image, and you have to create both yourself. Bootstrap Studio does not create the thumbnail automatically from the large image.
As I explained, there is software out there that can create complete photo galleries including the generation of thumbnails from the larger images. This is one such program which I’ve used.
But you will need to be familiar with how to add the scripts to your site, and if you’re hosting with BSS, it may present additional challenges in terms of the image paths.
1 Like
Thanks - that’s helpful information.
I have fairly fast fiber at my office, and everything loads very quickly. I just now thought to check the size of the thumbnails. I’ll look into the lightbox you suggested for bigger projects.
When building a website, you generally want to load the smallest amount of data necessary to render the page. You never know what sort of internet connection your website visitors may have.
Let’s say you have a gallery with 10 images that measure 1000 px x 750 px, and they’re each around 200k. If you use those full-sized images as thumbnails by resizing them with CSS, you’ll have to download a minimum of 2 megs of data before your page renders.
If you create thumbnail versions of those ten images that are only 20k each, you’ll only need to download 200k (one-tenth the amount) of data for your page to render.
On a very fast connection, you might not notice much difference, but for someone on a slower connection, this could mean a difference of seconds for the page to render. On mobile devices, pages that take more than 3-4 seconds to load have much higher bounce-rates than pages that load in less than 2 seconds.
It depends how you build your album
Here is an example of an album with 250 images that measure 1800 px X 1100 px.
But only 257k is loaded on the first page load which includes html, javascript, css and images.
Have a look at the network tab and reload the page
https://demoalbum.bss.design/
You’re using SVG images. 
Totally different animal. There’s no difference in file size between an SVG image that’s 100px wide and 1000px wide, because it’s rendered mathematically.
I’m using webp images now, I posted the wrong json file before. The result is the same around 250k on first page load
As you pointed out, it has to do with how you design your gallery. You’re loading the thumbnails as you scroll down. How would your method fare with a gallery that shows all the thumbnails on the page at once, like this?
With my method only the images that is in the viewport are loaded. If there was 45 small images that fit in the viewport as in your gallery they would have been loaded. if there was more images would they be loaded when they are intersecting into the viewport.
You should check your gallery page a little better before you publish it. There are many errors.
This gallery was something scraped from the client’s old website many years ago. It was a bare budget job I put together quickly, and I really didn’t look over the code closely. But these are all simple fixes, so thanks for the heads-up.