Creating a gallery section with drag-to-reorder thumbnails

    We have built a gallery in Perch using figureGallery. We can reorder the images using the <reorder> tab but it only shows us a list of numbered items (item 1, item2, etc.). We need this in thumbnail form, in other words, a graphical interface (list) where admin can drag the thumbnails intuitively to reorder the on-page display (we are using a masonry-type UI linked to a full-screen lightbox).

    We are not married to     figureGallery and remain open to any solution. The simplest one seems to be to add thumbnail images to the reorder list.


    Best Regards,


    Evan

  • drewm

    Approved the thread.

    Thank you Jordin, that should work but it only returns the gallery image number, not the thumbnail.


    In fact, I don't understand where it is getting these numbers from. They are neither the item number nor the in the image name.

    That's quite possible. Blocks doesn't alway seem to 'play nice' with other things. I haven't every actually tried that so i can't speak from experience. Looking at that template, i'm not too sure why you would use blocks there, i would think a gallery would just need a multi-region. Is there a reason you need separate blocks for the date and the image itself? if you just need to add an optional date, add it as another region within the same template as the image and wrap it with a perch:if exists="date" then it will show only if it has data.

    Quote from JordinB

    That's quite possible. Blocks doesn't alway seem to 'play nice' with other things. I haven't every actually tried that so i can't speak from experience. Looking at that template, i'm not too sure why you would use blocks there, i would think a gallery would just need a multi-region. Is there a reason you need separate blocks for the date and the image itself? if you just need to add an optional date, add it as another region within the same template as the image and wrap it with a perch:if exists="date" then it will show only if it has data.

    Hi Jordin ~

    The example I'm showing is something I did two years ago, but as best I remember, I did this in Perch blocks so that the user could add either an image or a section divider (with a date) within the same region. It actually works perfectly in that respect, but my current client wants something similar but with thumbnails in the reorder list. I perceive that this cannot be done with the Perch tags structure as I have it, but my current client doesn't need the section dividers anyway.


    Visualize a UI grid of square thumbnails (within a display: flex parent) where clicking on any thumbnail will open a higher res version in a pop-up lightbox. That’s what I’m doing with this and this is what I need to do with the current project. Ideally, I want the user to be able to add a single high-res image to the grid via the CMS and the program will create the lowres thumbnail, assign it to the UI grid and assign the high res to the lightbox.


    Can you point me in the right direction in terms of what template or add-on I should look into?


    Thanks,


    ~ Evan

    yeah, so you really don't need blocks for this. you're choice is either a multi-item region that you can edit in a list/detail type of cms page, or create 1 single region and add a repeater for each image.


    Either way you can drag and drop the items to reorder them. and your template will basically be the same or similar to :


    Code
    1. <!-- image_link.html -->
    2. <a href="#<perch:content id="image" type="image" label="Image" />"><!-- Link to your fullsize lightbox image -->
    3. <img src="<perch:content id="image" type="image" crop width="200" height="200" />" alt="<perch:content id="caption" type="text" label="Image Caption" />" /></a>

    if you're using the multi-item method, the template of the region would be 'image_link.html'


    if you're using the repeater you could do :

    Very helpful, thank you Jordin!