Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Lightbox gallery with combined id, category and name
Sometimes smd_gallery is really handy for making lightboxes, but as the plugin’s getting a bit old I thought I’d put together a native shortcode solution for one particular use case.
If you want to build an inline image gallery and give admins the option of combining id, name and category as well as taking the article_image into account, you can only build one of each using core tags because the filters operate on an AND basis.
Further, if you only want to display a single thumbnail – the article image ID – as a teaser, but when you click on the image, it launches a lightbox that allows you to step through all the images in the group, you’re out of luck.
This shortcode allows you to do both.
Here’s an example tag, added to an article that has a ‘cover image’ set as its article image, of id 42:
<txp::gallery category="marvel, dc" name="frank_miller.jpg" caption="Click to see all my comic covers" />So that would do the following:
- Display the (clickable) thumbnail of image id 42 where the
<txp::gallery />tag is in the article body. - Prepare all the other articles from the ‘marvel’ and ‘dc’ image categories, plus the frank_miller.jpg image but don’t display their thumbnails.
- Group them all using
rel="lightbox-grpN"which allows JavaScript libraries like slimbox to know they’re all related. If the shortcode is used again on the same page, the N is incremented each time so each lightbox only navigates between images in its own group. - Add the (optional) caption under the clickable thumb.
The shortcode looks a little unwieldy but it’s fairly simple. The first half does all the combining of the images into a single list of IDs that are to be passed to the <txp:images> tag by making a comma-separated list of image IDs from the various attributes passed to it.
The second part builds the on-page content. It loops over the images and increments a counter each time. When it reaches the thumblimit (which defaults to 1) it stops outputting thumbnails and only outputs empty <a> tags with the href of the corresponding image. The thumblimit shortcode parameter thus allows you to control how many thumbs you show before it cuts off and hides the remaining thumbnails, so you can only see the pics when you launch the lightbox.
Thus the output of the above tag could be:
<figure class="gallery">
<a href="/images/42.jpg" rel="lightbox-grp1">
<img src="https://example.org/images/42t.jpg" alt="" />
</a>
<a href="/images/15.jpg" rel="lightbox-grp1"></a>
<a href="/images/37.jpg" rel="lightbox-grp1"></a>
<a href="/images/18.jpg" rel="lightbox-grp1"></a>
<a href="/images/162.jpg" rel="lightbox-grp1"></a>
<a href="/images/11.jpg" rel="lightbox-grp1"></a>
<figcaption>Click to see all my comic covers</figcaption>
</figure>Here’s the shortcode:
<txp:hide>Concatenate name and category images to the article_image id(s)</txp:hide>
<txp:variable name="img_ids"><txp:custom_field name="article_image" /></txp:variable>
<txp:if_yield name="name">
<txp:variable name="img_ids" trim>
<txp:variable name="img_ids" />
<txp:if_variable name="img_ids" not value="">,</txp:if_variable>
<txp:images name='<txp:yield name="name" />' break=",">
<txp:image_info type="id" />
</txp:images>
</txp:variable>
</txp:if_yield>
<txp:if_yield name="category">
<txp:variable name="img_ids" trim>
<txp:variable name="img_ids" />
<txp:if_variable name="img_ids" not value="">,</txp:if_variable>
<txp:images category='<txp:yield name="category" />' break=",">
<txp:image_info type="id" />
</txp:images>
</txp:variable>
</txp:if_yield>
<txp:hide>Display the gallery thumb(s) and image anchors</txp:hide>
<figure class="<txp:yield name="class" default="gallery" />">
<txp:variable name="grp_count" add />
<txp:images id='<txp:variable name="img_ids" />' break="">
<txp:variable name="img_count" add />
<a href="<txp:image_url />" rel="lightbox-grp<txp:variable name="grp_count" />" title="<txp:image_info />">
<txp:evaluate query='<txp:variable name="img_count" /> <= <txp:yield name="thumblimit" default="1" />'>
<txp:thumbnail />
</txp:evaluate>
</a>
</txp:images>
<txp:yield name="caption" wraptag="figcaption" />
</figure>Have fun tweaking that for your own use cases :)
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
Re: Lightbox gallery with combined id, category and name
That would be a good post for txp.tips.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Lightbox gallery with combined id, category and name
Nice one! I think you can shorten
<txp:if_yield name="name">
<txp:variable name="img_ids" trim>
<txp:variable name="img_ids" />
<txp:if_variable name="img_ids" not value="">,</txp:if_variable>
<txp:images name='<txp:yield name="name" />' break=",">
<txp:image_info type="id" />
</txp:images>
</txp:variable>
</txp:if_yield>to
<txp:if_yield name="name">
<txp:variable name="img_ids" add separator=",">
<txp:images name='<txp:yield name="name" />' break=",">
<txp:image_info type="id" />
</txp:images>
</txp:variable>
</txp:if_yield>Offline
Re: Lightbox gallery with combined id, category and name
I have so many pages where I’d like to do something like that – thank you Bloke.
Er, one question: do I need to have smd_gallery plugin to do this?
I may have misunderstood but it seems from what you wrote at the start that this does without it…?
Strictly Amateur
Offline
Re: Lightbox gallery with combined id, category and name
John-Paul F wrote #330673:
do I need to have smd_gallery plugin to do this?
Not at all. The above shortcode emulates a feature available in the plugin (thumblimit) which internally allows it to stop displaying thumbnails at a given cutoff point (default 1), leaving the remaining images to only be available in the lightbox once you’ve launched it from one of the visible thumbs.
The above is simply a native way of achieving that. The first part is not the most optimal solution but it works. If you only ever need to supply a list of IDs, or names or category or whatever and don’t need the ‘combination’ aspect, just omit the first chunk and do something like this in the second part to read the passed ‘id’ value directly (and use the article image as default):
<txp:images id='<txp:yield name="id" default=''<txp:custom_field name="article_image" />'' />' break="">If you want to append the passed list of IDs to the article_image, then you’ll need the first line to get the article_image into a variable, and change one of the following <txp:if_yield> blocks to grab the id instead and concatenate it. The tweak that Oleg provided above makes it even shorter. I’d forgotten that add works as a concatenator if a separator is supplied. Thank you!
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