Custom gallery with files from folder (Demo video)

Advanced Development
1

Hi guys
I have seen partners mention the problem with the current gallery module, so I thought I would do a VERY basic demo of a SIMPLE gallery/lightbox that might get you started. This gallery uses the file API so it should be very easy for clients to upload all images with a single drag and drop :slight_smile:

I have tried to make it as basic as possible, so it is possible to see how little code it will take, and you can add features to it from there. Hope it helps to get you started.

7 Likes
2

Great job! Thanks for posting this. Very helpful.

1 Like
3

Thanks @Alex_B_Centrifuge :+1:t2:

4

Hey @Peter-Schmidt, I’ve added this code to the Treehouse CODE section and made a little customisation too :slight_smile:
So now, by simply choosing the Cover Image from the desired folder of images, it will automatically use that same folder to source all the remaining images for the gallery. This way there’s no need to create folders in any special way or match the naming of the module item name (which creates extra steps and could lead to error).

Let me know if there’s anything else to add/change:

2 Likes
5

Very nice @Adam.Wilson - I actual thought of doing it, but didn’t quite get my head around it, so decided just to get it out there. Great that you did this, it makes it even more powerful :muscle: :smiley:

6

@Adam.Wilson @Peter-Schmidt the code & demo of the simple file api gallery with lightbox is fantastic and most helpful. Thanks. For the detail layout, is there anyway to enable pagination? It doesn’t seem immediately obvious to me how to do it, if it is even possible.

1 Like
7

@hopestew you can’t use the built-in Treepl pagination since that works on the module items and in this case I assume you’d want to paginate the actual image list.

There are 2 main ways I can think to do this. One using Liquid and one using Javascript.

With Liquid you’d use the limit and offset parameters in the for loop to be able to split your images into a set number of chunks (pages).

eg:

{% for item in galImages.items limit: 10 offset: 10 %}

But you’d need a way to control these limits/offsets dynamically based on the page number clicked and pass that through the URL. So there is a bit of Liquid logic to work through to make all this work - first in creating the page numbers and paged links and then passing it to the for loop parameters… but it’s totally possible.

Alternatively, use a Javascript plugin that paginates a list of items.
You’d probably want to incorporate a lazy loading plugin with this so not all images are being loaded at once.

Let me know if you need help with the Liquid option and I’ll try and put something together.

8

@Adam.Wilson thanks for your quick reply. I suspect that it will be more user-friendly if I break up the gallery into several smaller galleries. But I may also add lazy-load. I’ll see how I go.