[macro] In-article thumbnail grid?

Destry · 2015-02-23 13:08:06

Anyone have a macro (smd_macro variety) they’ve already created that inserts a small grid of thumbnail images into an article? I’m guessing the tag would identify the right images to pull by their associated category, or something.

I’m just talking about a grid that’s 3-5 thumbnails horizontally aligned in wide layouts (responsive, of course). Something I can quickly/easily insert between a couple of paragraphs.

maniqui · 2015-02-23 13:34:30

Hi Destry,
I’d suggest you to use <txp:images /> with a form and specifying the images using id or category attributes.
Then, in the form, you fine-control the output (that is, the markup for each thumbnail).

If you want and can go an step further, then I suggest you to look at smd_thumbnail and this snippet I posted a few days ago.
smd_thumbnail will let you easily create a bunch of thumbnails of different sizes and proportions (even cropped) from a master image. Then, with that set of thumbnails, you can go fully responsive in the modern way, using the new srcset and sizes attributes (be prepared to read & re-read(*) that article, because it usually takes two reads to fully grasp the way those attributes work).

(*) paraphrazing Jorge Luis Borges: “Better than to read, it’s to re-read”.

Destry · 2015-02-23 13:44:07

Two suggestions gladly accepted, miniqui. Thanks.

Destry · 2015-02-23 14:23:59

Maniqui, now that I think about it a second more, your first suggestion will work, but it’s a unique form for that one grid instance, right? I.e., if I needed 100 little grid insertions like this over 100 different articles with a different set of of thumbnails for each one, it would require 100 different forms to call each unique set of images, or am I wrong.

This is why I was wondering about a macro. My hypothesis was that one could create a single macro, assign that to a macro tag, and then define which images to insert at a given instance of use via some tag attribute. That would be the most economic and re-usable, in theory.

In fact, now that I look at the macro plugin help, the first example there seems to suggest exactly that…

<txp:my_gallery category="animals" />

Am I missing something? Can using a core form do the same thing… recycle the grid structure and insert the select images?

Last edited by Destry (2015-02-23 14:25:01)

Bloke · 2015-02-23 15:20:39

Destry wrote #288510:

the tag would identify the right images to pull by their associated category, or something.

Where would this category name be stored? A custom field? The Article image field? The current article’s catgeory1? If it was in the Article image field, then maniqui’s solution using txp:images could work fine with some judicial CSS targeting (.my-article-wrapper img { ... }) and a suitable Form containing a <txp:image> tag. If you require a wrapper for your gallery, with classes and maybe some default options, then a macro is definitely the way to go to save yourself typing.

Can you do it in core tags first to prove it works / get the CSS running and then, if you find the tags are too unwieldy or you want to shorten the amount of typing, make your tag soup into a macro instead?

<txp:wion_gallery />

could automatically pick up the category name from your article and supply it to <txp:images>. The images tag could apply wraptag / brerak and class, among others and render the gallery either in a container or via a Form.

There’s a single-image version, which can be adapted for gallery use.

maniqui · 2015-02-23 15:57:41

Destry wrote #288513:

Maniqui, now that I think about it a second more, your first suggestion will work, but it’s a unique form for that one grid instance, right? I.e., if I needed 100 little grid insertions like this over 100 different articles with a different set of of thumbnails for each one, it would require 100 different forms to call each unique set of images, or am I wrong.

Mmmm, I think you are wrong.
You wanted a way to add a tag that will output a grid of thumbnails between paragraphs in your article. Right?
So, to have the way to add images “organically” (as opposed to “structured-ly” or “programatical-ly”) in the article’s body. Right?
What I’m suggesting is something like this:

Some paragraph with lorem ipsum blah blah blah. Now, check these cool images:

<txp:images id="1, 2, 3, 4" form="my_grid_of_thumbnails" />

Some other paragraph with more lorem ipsum more blah blah blah. And now, some pictures of our 2014 event:

<txp:images category="event-2014" form="my_grid_of_thumbnails" />

As you can see, you use the same form (my_grid_of_thumbnails) every time, but you fetch different images on each case (id="1,2,3,4" and category="event-2014").

Am I missing anything?

Destry · 2015-02-23 17:22:38

@maniqui: Yes, that’s exactly what I had in mind. Thanks.

@bloke: ~~Okay, I see what you mean. It requires putting the category somewhere first. That’s beyond what I want in this case.~~ Actually, I’m not sure I understand. So I can or I can’t just type in the category by hand when adding the tag?

Thanks, both.

Last edited by Destry (2015-02-23 18:05:39)

Bloke · 2015-02-23 20:04:31

Destry wrote #288520:

I can or I can’t just type in the category by hand when adding the tag?

Sure you can. It’s just an attribute. Or you can leave the decision elsewhere (an article field) if you want to be clever about it.

smd_macro just allows you to encapsulate what might take you a bunch of tags and typing and formatting and logic and roll it up into a single tag with simpler (or no) attributes.

Destry · 2015-02-23 20:30:45

Okay, that’s what I thought, sorry, I’m taking your advice and starting with the Txp/HTML/CSS model first.

So far all I have is this: <txp:images id="115,116,119,120" thumbnail="1" class="thumbgrid" wraptag="ul" break="li" />, along with the associated CSS, and it works fine.

But the thumbnails are linking to a strange location, e.g. …/?c=article-images&context=image&p=116. What I want them to do when clicked is open the full-size image.

I’ll have to worry about optimizing images per devices later once I get my head around the basics.

After all these years, I’ve never used the images tag before, that I can recall. Late as usual.

Last edited by Destry (2015-02-23 20:32:47)

Bloke · 2015-02-23 21:23:20

Destry wrote #288526:

the thumbnails are linking to a strange location

By default — without a form or container — the <txp:images> tag is backwards-compatible with the old image_index / image_display tags, hence the odd output. To make it do something useful you’ll need to use the tag as a container, or employ a form.

In either of those two places, sprinkle some or all of the following tags among regular markup to achieve your desired outcome:

txp:thumbnail (image thumb)
txp:image (the full-size image itself)
txp:image_info (image meta data such as caption, alt, width, height)
txp:image_url (link to the full size image)

Destry · 2015-02-25 13:17:56

Bloke,

Thanks. I forgot about thumbnail. I kept looking for an image_thumbnail or image_thumb tag, which would have grouped it nicely along with the other image-related tags in the docs. As currently named it seems a little out of convention with other image tag names. I think sometimes in the effort to save character space, we lose clarity/understanding.

Anyway, here’s the tag used in the article…

<txp:images id="121,122,123,124" form="image-grid" thumbnail="1" wraptag="section" class="thumbgrid" break="figure" />

Here’s the form code…

<a href='/images/<txp:image />'><txp:thumbnail /></a>
<figcaption><txp:image_info /></figcaption>

And here’s the immediate CSS…

.thumbgrid {
  width: auto;
  margin: 1em 0;
  text-align: center;
}

.thumbgrid > figure {
  width: 21%;
  display: inline-block;
  float: none; /* this is the part that makes it work */
  vertical-align: top;
}

.thumbgrid > img {
  padding: 2%;
}

I need to work on the CSS still, but for those that like to ponder it, this basically gives me a nice horizontal grid of four images, packaged up as a <section> with each image treated as a <figure> and its associated details as a <figcaption>. The vertical-align:top; was necessary to get the figures to align on the top side when captions were of varying line length (seemed to be aligned on the bottom by default).

But my form still seems to be wrong. I want it so that when you click a thumbnail, you get the full size image, and the URL in the browser is pointing to the file in the images directory; e.g., “…/images/121.jpg”. Kind of like when you open an image in a new browser tab, that’s the behavior I want, but in this case it can just open in the same window. How do I get that notated in the form’s link path?

Oh, one more thing. The caption is actually being added as an title="" value too, which sucks. I know you fixed that in code for future release, but is that change in a nightly/dev release too? I really wish we could have that change now (for me it’s the little things that matter), but I’d go with a nightly.

Destry · 2015-02-25 13:43:58

Never mind. I got it figured out. I was just looking at this by Guguser, and the not-so-easy-to-figure-out-answer was there. So my form now looks like this, and all is well…

<a href=”<txp:image_url />”><img src=”<txp:image_url thumbnail=“1” />” /></a>
<figcaption><txp:image_info /></figcaption>

This is the kind of baseline example I’d expect to see in the docs for tags, so I’ll put this one in there.

Textpattern CMS

Textpattern CMS support forum

#1 2015-02-23 13:08:06