Image gallery from markdown using shortcode

support
1

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?

2

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.

3

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.

4

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  }}
5

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.

6

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

7 
  +++
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
8

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

It makes a major collapse of hugo

9

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.

10

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

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

11

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

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

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

13

What is in your gallery.html file?

14 
{{ .Get 0 | gallery .Inner  }}

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

15

This isn’t valid shortcode syntax.

See:

16

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

17

The closing tag takes no parameters.

18

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.

19

bingo - it needed {{ index .Inner }}

20

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.