Image gallery from markdown using shortcode

Hi - thanks for help and pointers on the problems I’ve already had.

I am trying to implement a simple gallery like this: http://codepen.io/dudleystorey/pen/ehKpi

I can call one image using the figure shortcode in the markdown file, but how do I call several images which can be rendered for the gallery?

can anyone point me to an explanation of the shortcode notation? The instruction page does not explain how to use it to create a new shortcode to take a highlighted chunk from the markdown file.

Well this is a rubbish solution: I created a partial which loaded the whole of the md into the gallery html. This ignores anything which is not image.

i then loaded the partial and then called {{ .content }} in a div which has the display: none; for the img css.

As I said, it is rubbish, there must be a better way to do it than this.

You’ve looked at Shortcodes | Hugo?

Near the end is a section. Paired Example: Highlight, which shows how to use .Inner to process the tagged chunk from the file.

{{ .Get 0 | highlight .Inner  }}

I have tried using this to build a new shortcode, so using {{ .Get 0 | gallery .Inner }} in /layouts/shortcodes/gallery.html

and {{< gallery html >}} image src {{< /gallery html >}}

from the markdown file, but that just breaks. I don’t understand what the notation should be.

Could you paste in exactly what you have in your markdown file?

  +++
date        = "2013-06-21T11:27:27-04:00"
description = "test"
slug        = "test"
title = "this is a test"
+++
 {{< gallery html >}}
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
 {{< /gallery html >}}

This is a  text I am adding to see if it will display

Is there something obviously wrong with using this in conjunction with {{ .Get 0 | gallery .Inner }}?

It makes a major collapse of hugo

Is “gallery html” the name of your shortcode?

Space in shortcode names isn’t allowed, you should see a error in log.

Rename the shortcode to just gallery and try again.

Thanks, but I don’t understand. Which space?

I have a file called gallery.html located in /layouts/shortcodes

calling it {{< gallery >}} makes no difference. all the examples on the shortcode page are of this form:

{{< highlight html >}}
{{< highlight go >}}

I think I must be missing something about how to define the shortcodes.

What is in your gallery.html file?

{{ .Get 0 | gallery .Inner  }}

I am sorry if I’m missing something obvious here.

This isn’t valid shortcode syntax.

See:

{{< highlight html >}}
is valid but {{< gallery html >}} is not?

The closing tag takes no parameters.

oh, that makes no difference, I’m using {{< gallery html >}} and {{< /gallery >}} it still doesn’t work. Something is wrong with the definition of the shortcode but I can’t see enough other examples to identify the problem.

bingo - it needed {{ index .Inner }}

gallery isn’t a built-in function. You need to call a function to iterate through.

Oops. Just saw that you’d already figured that out.