Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2021-09-29 00:15:10

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,538
Website GitHub

Gallery of thumbs with one hero image

Trying to wrap my head around this and I’m sure it’s fairly simple. I’m using a responsive lightbox script which works fine for galleries. You can see the thumbnails, click one, up it pops and you can navigate/swipe among the set, with escape to close.

If I only want to show a single image that can be used to ‘launch’ the lightbox, with a little trickery and an image counter I can output all the article images in anchors but only draw the first image. No additional thumbnails, but clicking the pic will allow you to browse the set.

That’s great but since the lightbox isn’t designed to be used this way there’s no ‘dot’ indicator or anything to tell people that there’s more than one image so they might never click the big image to find the hidden gallery pics.

So then I wondered if it was possible to output one hero image and N thumbnail images (I’m using smd_thumbnail, btw) and have it adapt if there are 1, 5, 14, 20, … article images. In other words:

---------------------
|                   |
|                   |
|       hero        |
|                   |
|                   |
---------------------
|  t |  t |  t |  t |
---------------------
|  t |  t |  t |  t |
---------------------

Where ‘t’ represents a variable number of thumbnails.

Would flexbox be able to do this? I can’t figure out how to set up the HTML and CSS to achieve that layout. I don’t mind if there’s a single row of thumbs beneath the hero image, and the thumbs just scale down to fit. I doubt the client will have more than about 7 or 8 images in any one post. If the thumbs get tiny, well, so be it. But that will have an impact on portrait mobiles because 1 hero + 7 images beneath it, in a single row, is going to make them miiighty tiny.

Laying them out in a grid beneath the hero image and allowing them to flow onto multiple rows using max-width to constrain how many to display per row seems a neat solution (albeit the last image might streeeeetch unless the flexbox justification can cope).

I can probably achieve this with two flexbox containers stacked on top of one another, but I’m not sure how the lightbox will work if all the images aren’t grouped in a single container. It might work. Just wondered if there was some cunning way of using flex-grow/flex-shrink or something to tell the grid that the first item needs to be full width and the rest of the items can flow in a grid beneath it.

Am I reaching too hard and need to do this in HTML or regular CSS somehow? Can CSS grid do this, i.e. have two sizes of grid in a single container?


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#2 2021-09-29 07:44:11

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,178
Website

Re: Gallery of thumbs with one hero image

It could depend on the gallery script you are using. If you can define which images belong to your gallery of images not just by the container but by an attribute – e.g. a common class or data-attribute – or by creating an array of slide objects, you can use just one image to launch the gallery and the script then allows you to advance through the rest of them. Some of them show a thumbnail row in lightbox view. Or you include all the thumbs in whatever layout you want and allow each to launch the gallery at that specific image.

With flexbox, you can probably include them main preview image and the thumbs in one container (e.g. as described here) and then force the first item to fill the entire width:

.full-width {
    flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
}

That forces the siblings down onto the next line.

Until the widespread availability of CSS subgrids, with CSS Grid I believe you will still need to create two different grid containers, one for the full-width container and the next for the thumbs.

If you’re worried about people not realising it’s a gallery, you could add a hint to the initialising image, e.g. a “see the gallery” overlay button, a “stack of images” icon, or a “1/12” counter plus “launch popup” icon.


TXP Builders – finely-crafted code, design and txp

Offline

#3 2021-09-29 07:52:29

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,538
Website GitHub

Re: Gallery of thumbs with one hero image

Ah cool. That flex grow full width trick might be just the ticket. Hadn’t thought of using it that way. All the attempts I made failed but maybe my grid HTML wasn’t set up right.

Using another lightbox script that does thumbs or indicators is certainly an option if I can find one lightweight enough. Many take the kitchen sink approach and are “only” 47KB minified and gzipped. I want the smallest, lightest touch responsive one I can. Found a reasonable one but of course it doesn’t do the above, hence I was trying to fudge it.

I could do an overlay too. That would work. Lots of options that passed me by in the 1am coding fog.

Thank you for your amazing help.

Last edited by Bloke (2021-09-29 07:54:51)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#4 2021-09-29 11:32:29

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,487
Website

Re: Gallery of thumbs with one hero image

@ Bloke

Out of curiosity, what lightbox script did you originally have in mind ?

As you note, most are a little on the large side and/or have dependencies (JQuery…). TY.


Where is that emoji for a solar powered submarine when you need it ?

Offline

Board footer

Powered by FluxBB