Image grid always neat

Bloke · 2021-06-15 22:30:02

Say I have a responsive grid, and in that grid I’m building a collage of images. I don’t know how many images I have – and that number is going to change on a rolling basis (e.g. as people send in selfies during the campaign). The grid is probably going to be 2 images wide on mobile, 3 on tablet, up to 4 or 6 or even 8 wide on larger displays.

For argument’s sake, say I build my grid in an article. Assign article images to the article and the <txp:images> tag reads the image ids/ranges. But I don’t have an even number of pics to fit the grid. In flexbox that means the bottom row, potentially, might have a single image in it, or two or three.

What I really want to do is to insert additional placeholder images like “your pic here” to fill the gaps in the last row so that the total number of images completes the grid neatly. But since the number of additional images might change based on viewport, I can’t add them during page build, can I? Does that mean I need to use JS to figure out how many there are and add/remove placeholder elements on viewport resize to make up the deficit?

Is there any better solution? Or any tag/code ideas on how to approach this? I’m a bit stumped.

giz · 2021-06-15 22:38:05

I’ve always been stumped on this too. The closest I’ve found is using grid-auto-flow: dense; along the lines of this.

Last edited by giz (2021-06-15 22:38:28)

Bloke · 2021-06-15 23:37:42

Didn’t know about dense flow, thank you. That’s close. Hmmmm. Maybe CSS Grid is better than flexbox then. Still can’t see a way of doing this without resorting to JS trickery to fill in the gaps.

The best I can come up with is grouping the images in 12s. Then I know how many are in the final group and thus know how many ‘slots’ are going to be empty overall. 12 is the magic number because of its insanely cool divisibility.

If there are 19 images in the set, the next closest modulo-12 is 24. Meaning I need to add 5 placeholders in my <txp:images> tag to round it up. Once I know I have a multiple of 12, the 2-up, 3-up, 4-up, and 6-up grids will always perfectly fill the space. 8-up would work if I standardised on 24, but that might leave too many blanks, potentially.

It’s not ideal. If there were 13 images, there’d be 11 empty slots and thus 11 placeholders, but I can probably get away with it in this instance because we’re encouraging people to submit their photos to fill the space.

The key to this then is to figure out in tag logic how to ascertain:

a) how many images I currently have in the article image set.
b) divide it by 12 to get the remainder.
c) add that many HTML blocks to the end that point to /images/placeholder.jpg. Or, perhaps better, somehow intermingle that many HTML placeholder images throughout the grid so every now and again, a placeholder shows up.

My tag-fu isn’t quite good enough to figure that out but I suspect it’s possible. Might need rah_repeat to fill the blanks.

Last edited by Bloke (2021-06-15 23:39:59)

phiw13 · 2021-06-16 01:06:12

Note: read edit note below.

I am not sure I follow correctly, but basically you may have empty cells in your grid, and you want to display a placeholder image ?

Assuming each cell is a <div /> (or any other container) and your empty cells contain absolutely nothing, then you could try filling them with a background-image using the :empty {} pseudo-class.

<div class="grid-container">
  <div class="cell"><img………/></div> <!--repeat as needed -->
  <div class="cell"></div> <!-- nothing -->

.grid-container { display: grid; /* etc */}
.cell:empty { background-image: url(your/place_holder.png); background-size: contain /* or cover */ }

edit. Hmm on second thought, that won’t work as the cells are not being generated if no image is available. [sigh] reading failure – too early in the day :/.

edit: spell check

Last edited by phiw13 (2021-06-16 02:51:18)

colak · 2021-06-16 04:14:35

I also have knowledge gaps for this one but I’m posting it here as it may spark some ideas. What if you use the variable and evaluate tags?

<txp:variable name="img_count">query to count the number of images</txp:variable>
<txp:evaluate query='<txp:variable name="img_count" /> == 12' >
...
<txp:evaluate query='<txp:variable name="img_count" /> < 12' >
...
<txp:evaluate query='<txp:variable name="img_count" /> > 12' >

the problem of course will also be on pagination. Wouldn’t it be simpler if you used a custom_field to hold the images in articles?

etc · 2021-06-16 06:44:26

You can try client hints (though I have never tested them) to build placeholders on the server side.

Bloke · 2021-06-16 09:21:19

Thanks for the replies everyone. Yes, phiw13, the issue is that the placeholder images aren’t generated at all by Txp tag code so I either need to generate them (by knowing how many I have and padding them to the nearest modulo-12 boundary) or use public-side code to inject the additional placeholder markup based on how many I’m short of the ‘full’ grid so everything lines up.

What I’m trying to avoid is situations like:

IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE

What I want is:

IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE PLACE PLACE
PLACE PLACE PLACE

(or its equivalent 2-up, 4-up, 6-up image grid depending on viewport).

So I can’t hard-code ‘12’ as such, as the number of images may grow over time. Ideally I wouldn’t want the extra row of PLACE images – it’d be cool if it just ended on the rightmost cell of the last row that contained an actual image, but I think that’s a bit difficult to achieve so a compromise is to ‘round up’ to the next block of 12. Just gotta figure out some code to do it and I’m hitting a brick wall.

This will all be in one article. Some background: there’s an upcoming event running for a whole month. During that month we’re asking people to participate and upload selfies to social media. Those selfies are going to be curated and added to a Txp article via a dedicated category so they all appear on one page as a sort of ‘wall of participants’.

The placeholders will be “your pic here” to show that people can still contribute. So it would be nice if they were smattered throughout the wall, but if that’s too hard I’ll stick them all at the end.

When the event is over, the wall will remain static as a record of who took part and I’ll probably remove any leftover placeholders at that point.

Last edited by Bloke (2021-06-16 09:24:14)

etc · 2021-06-16 10:08:43

Could this placeholder be just a repeated background image, if your image sizes are all equal?

Bloke · 2021-06-16 10:39:29

etc wrote #330510:

Could this placeholder be just a repeated background image, if your image sizes are all equal?

Maybe. Still got to make sure there’s enough markup in the grid though. <txp:images> only iterates over the images it has, and that’s where I’m coming unstuck. Untested but I can probably use this trick:

<txp:variable name="imgcount" value="0" />
<ul class="grid">
<txp:images category="faces">
    <li><txp:image /></li>
    <txp:variable name="imgcount" add />
</txp:images>
<txp:hide>Work out how many I'm short of modulo 12, somehow.</txp:hide>
<rah::repeat range='1, <txp:variable name="img_deficit" />'>
   <li><txp:image name="placeholder.png" /></li>
</rah::repeat>
</ul>

Would be nice if there was some native way to do this, but I’m fine with the plugin if it’s the only route. I’m not sure the best way to work out how many I’m missing, short of going into PHP and doing some modulo math. I guess <txp:evaluate> could do it.

Last edited by Bloke (2021-06-16 10:40:03)

etc · 2021-06-16 10:53:21

Bloke wrote #330511:

Maybe. Still got to make sure there’s enough markup in the grid though.

The idea is

div.image-container {
    background-image: url('placeholder.png');
    background-repeat: repeat;
}

Since div is always rectangular(?), the missing images (whatever number) would be replaced by the background. Of course, their sizes must be equal.

Doing it purely in txp is tricky: what if the screen switches from portrait to landscape, etc.

Bloke · 2021-06-16 11:26:10

etc wrote #330512:

Doing it purely in txp is tricky: what if the screen switches from portrait to landscape, etc.

Yeah, which is why I landed on the ‘12’ idea, since then it doesn’t matter as long as the media queries are set to display either:

2 (6 rows per 12)
3 (4 rows per 12)
4 (3 rows per 12)
6 (2 rows per 12)

Then it doesn’t matter which orientation or size the screen is, I will always have an even number of 12s, fully populated. So that takes one problem away.

Then all I need to do is figure out how many images I am missing from the last set of 12. And iterate over that number of images to add placeholder markup where necessary. CSS does the rest.

I think that’ll work – gonna have some lunch then test it.

One thing I could do to intersperse the placeholder images instead of having them all at the end is do it in two passes:

<txp:variable name="face_ids">
    <txp:images category="faces" break=",">
        <txp:image_id />
    </txp:images>
</txp:variable>
// work out shortfall here somehow
<txp:variable name="face_ids">
    <txp:variable name="face_ids" />,
    <rah::repeat range='1, <txp:variable name="img_deficit" />' break=",">
       <txp:images name="placeholder.png"><txp:image_id /></txp:images>
    </rah::repeat>
</txp:variable>

That gives me a list of IDs in a variable. Then:

<txp:images id='<txp:variable name="face_ids" />' sort="rand()" wraptag="ul" break="li" />

The only thing I’m not sure about is if <txp:images> does a unique, which will filter out the duplicates. If it does, I’m screwed and will have to do it manually!

Destry · 2021-06-18 09:16:59

Purely off the top of my head, but it’s the kind of wacky thing I would try exploring if in such situations, just to see if it worked or not. This idea requires a compromise, though, of not showing any placeholder imagery in the ‘placeholder’ box. It’s more a focus on the main goal of making any remaining image in the last row to sit left, in proper col1 alignment. (Maybe it already does that and this is not what you need at all.)

In which case, what about adding an invisible box (be it a div or even a transparent image) at the end of the grid that auto spans the delta width of the row. For example, if your using a list to create the grid, the invi-box is the last item, and you can target it with a class on the box, or using :last-child on the list.

<ul class="grid">
<txp:images category="faces">
    <li><txp:image /></li>
    <txp:variable name="imgcount" add />
</txp:images>
   <li><div></div></li>
</ul>

So if your grid is designed for four images per row, for example, and you have one image in the last row, the invisible box expands to fill the three empty spots pushing the one image left. If you have two images, it spans two slots, etc. In the situation where you have an even four image in the last row, the invisible box wraps to span the entire last row by itself. If the box is not tall, the gap it creates as a last row should be minimal to insignificant.

This does mean, if it even works (untested), that you have a vestigial div in your markup for nothing but presentation, but if you’re doing this for a client, they might appreciate the result more than the cleanliness of your markup.

Last edited by Destry (2021-06-18 09:18:16)

Textpattern CMS

Textpattern CMS support forum

#1 2021-06-15 22:30:02