Lightbox Gallery Shortcodes

In order to get the old wordpress posts image gallery to work (like CPH:Triathlon) I decided to take on some shortcodes. They look very much Jinja Macros which I know from my $dayjob - which might turn out to be a bit confusing.

In essence my plan was to avoid too much boilerplate. At first i tried generalizing the wordpress markup into a shortcode but I found it a bit hard to get working. I didn’t want to write lots of tags, I didn’t want to repeat the images declaration with and without the thumbnail size suffix (example: img-150x150.png)

Implementation

In the end I ended up with a frontmatter flag: which enabled the inclusion of the javascript etc. in the header.

And two shortcodes. A wrapping one that defines the prefix path of the images for the gallery and the number of columns.

And a shortcode for each of the images inside of the gallery:

In use it looks like this:

Looking at it afterwards it doesn’t seem of much, but during, I had to get acquainted with many concepts. Two things stands out:

Nested shortcodes

In order to actually propagate the variables from the wrapping/outer shortcode and into the wrapped shortcodes I turned to the forums for help. It turns out that it wasn’t available in hugo just as of yet - but before my replace .Inner "PREFIX" (.Get "prefix") hack was done bep had already merged a solution - I guess it will be available in upcomming 0.16 release. It works by allowing the nested shortcodes to access the parent shortcode context via .Parent.Get "var".

When release my replace will go away and galleryimage will instead of PREFIX have:

src="{{ $.Parent.Get "prefix" }}/{{ . }}-{{ $size }}.{{ $suffix }}" 

Default value for missing variables

In jinja | default is pretty normal order of business. As I again consulted the forums it turned out hugo had been looking for a solution to that problem as well. Again in short order a solution was proposed, reviewed and merged.

When that is released my or .Get "something" "other" will be replaced with

.Get "something" | default "other"

All in all the community and response was pretty awesome. Highly recommended :)


Comments