Image Gallery with Markdown syntaxe into Shortcode

anon86521655 · November 19, 2022, 3:02pm

Hello everyone,

I need your help again.

I would like to create an image gallery as a shortcode while using Markdown syntax.

Here is an example of the shortcode

{{< gallery >}}
![img1](img1.png)
![img2](img2.png)
![img3](img3.png)
![img4](img4.png "And with Render Hooks we can add even more complex behavior".)
{{< /gallery >}}

My question is how to get all the information from the images? With .Get ?

Thanks

jmooring · November 19, 2022, 4:48pm

If you simple wish to display all the images without any special handling…

structure

content/
├── post/
│   └── post-1/
│       ├── a.jpg
│       ├── b.jpg
│       ├── c.jpg
│       └── index.md
└── _index.md

content/post/post-1/index.md

{{< gallery >}}
![alt](a.jpg "title")
![alt](b.jpg)
![alt](c.jpg)
{{< /gallery >}}

layouts/shortcodes/gallery.html

{{- with .Inner }}
  {{- $inner := replaceRE `\r` "" . }}
  {{- $inner = trim $inner " \n" }}
  {{- $lines := split $inner "\n" }}
  {{- range $lines }}
    {{- if . }}
      {{- . | $.Page.RenderString }}
    {{- end }}
  {{- end }}
{{- end -}}

If you want to automatically add height and width attributes to the rendered HTML, and/or convert to another format, create a markdown render hook.

anon86521655 · November 19, 2022, 5:31pm

Thanks for fast reply
How ? via render hook ? I think I’m starting to get a little lost

I already have an image render hook

jmooring · November 19, 2022, 5:33pm

If you already have an image render hook, the images will be passed through it via the .Page.RenderString method.

anon86521655 · November 19, 2022, 5:35pm

Ok thanks,

So the images will go through the render hook before being displayed in the gallery ?

jmooring · November 19, 2022, 5:36pm

Yes, they will.

anon86521655 · November 19, 2022, 5:48pm

However, how to get the src and title attributes from render string?

{{ $image.RelPermalink }} doesnt work.

jmooring · November 19, 2022, 5:50pm

Without looking at the entire render hook I cannot answer your question.

anon86521655 · November 19, 2022, 5:53pm

Oh yes sorry,

Warning it’s big file

{{ if hasPrefix .Destination "http" }}
  {{- $src := .Destination | relURL | safeURL -}}
  {{- $alt := .PlainText | safeHTML -}}
  {{ $alt := .PlainText | safeHTML }}
    <img 
      src="{{ $src }}" 
      alt="{{ $alt }}" 
    />
{{ else }}
  {{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
  {{ $alt := .PlainText | safeHTML }}
  {{ $caption := "" }}
  {{ with .Title }}
    {{ $caption = . | safeHTML }}
  {{ end }}

  {{ if and $image (ne $image.MediaType.SubType "svg" "gif") }}

    {{ if ge $image.Width "800" }}

      {{ $XS := $image.Resize "250x webp" }}
      {{ $SM := $image.Resize "300x webp" }}
      {{ $MD := $image.Resize "400x webp" }}
      {{ $LG := $image.Resize "500x webp" }}
      {{ $XL := $image.Resize "700x webp" }}
      {{ $XXL := $image.Resize "800x webp" }}
      {{ $alt := .PlainText | safeHTML }}
      {{ $caption := "" }}
      {{ with .Title }}
        {{ $caption = . | safeHTML }}
      {{ end }}
      
      <figure>
        <a href="{{ $image.RelPermalink }}">
          <img
            sizes="(max-width: 400px) 250px,
                   (max-width: 500px) 300px,
                   (max-width: 768px) 400px,
                   (max-width: 992px) 500px,
                   (max-width: 1440px) 700px,
                   800px"
            srcset="{{ $XS.RelPermalink }} 250w, 
                    {{ $SM.RelPermalink }} 300w, 
                    {{ $MD.RelPermalink }} 400w, 
                    {{ $LG.RelPermalink }} 500w, 
                    {{ $XL.RelPermalink }} 700w, 
                    {{ $XXL.RelPermalink }} 800w"
            src="{{ $image.RelPermalink }}"
            alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
            >
        </a>
        {{ with $caption }}
          <figcaption>{{ . | markdownify }}</figcaption>
        {{ end }}
      </figure>


    {{ else if ge $image.Width "700" }}

      {{ $XS := $image.Resize "250x webp" }}
      {{ $SM := $image.Resize "300x webp" }}
      {{ $MD := $image.Resize "400x webp" }}
      {{ $LG := $image.Resize "500x webp" }}
      {{ $XL := $image.Resize "700x webp" }}

      {{ $alt := .PlainText | safeHTML }}
      {{ $caption := "" }}
      {{ with .Title }}
        {{ $caption = . | safeHTML }}
      {{ end }}
      
      <figure>
        <a href="{{ $image.RelPermalink }}">
          <img
            sizes="(max-width: 400px) 250px,
                   (max-width: 500px) 300px,
                   (max-width: 768px) 400px,
                   (max-width: 992px) 500px,
                   700px"
            srcset="{{ $XS.RelPermalink }} 250w, 
                    {{ $SM.RelPermalink }} 300w, 
                    {{ $MD.RelPermalink }} 400w, 
                    {{ $LG.RelPermalink }} 500w, 
                    {{ $XL.RelPermalink }} 700w"
            src="{{ $image.RelPermalink }}"
            alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
            >
        </a>
        {{ with $caption }}
          <figcaption>{{ . | markdownify }}</figcaption>
        {{ end }}
      </figure>

    {{ else if ge $image.Width "500" }}

      {{ $XS := $image.Resize "250x webp" }}
      {{ $SM := $image.Resize "300x webp" }}
      {{ $MD := $image.Resize "400x webp" }}
      {{ $LG := $image.Resize "500x webp" }}

      {{ $alt := .PlainText | safeHTML }}
      {{ $caption := "" }}
      {{ with .Title }}
        {{ $caption = . | safeHTML }}
      {{ end }}
      
      <figure>
        <a href="{{ $image.RelPermalink }}">
          <img
            sizes="(max-width: 400px) 250px,
                   (max-width: 500px) 300px,
                   (max-width: 768px) 400px,
                   500px"
            srcset="{{ $XS.RelPermalink }} 250w, 
                    {{ $SM.RelPermalink }} 300w, 
                    {{ $MD.RelPermalink }} 400w, 
                    {{ $LG.RelPermalink }} 500w"
            src="{{ $image.RelPermalink }}"
            alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
            >
        </a>
        {{ with $caption }}
          <figcaption>{{ . | markdownify }}</figcaption>
        {{ end }}
      </figure>

    {{ else if ge $image.Width "400" }}

      {{ $XS := $image.Resize "250x webp" }}
      {{ $SM := $image.Resize "300x webp" }}
      {{ $MD := $image.Resize "400x webp" }}

      {{ $alt := .PlainText | safeHTML }}
      {{ $caption := "" }}
      {{ with .Title }}
        {{ $caption = . | safeHTML }}
      {{ end }}
      
      <figure>
        <a href="{{ $image.RelPermalink }}">
          <img
            sizes="(max-width: 400px) 250px,
                   (max-width: 500px) 300px,
                   400px"
            srcset="{{ $XS.RelPermalink }} 250w, 
                    {{ $SM.RelPermalink }} 300w, 
                    {{ $MD.RelPermalink }} 400w"
            src="{{ $image.RelPermalink }}"
            alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
            >
        </a>
        {{ with $caption }}
          <figcaption>{{ . | markdownify }}</figcaption>
        {{ end }}
      </figure>

    {{ else if ge $image.Width "300" }}

      {{ $XS := $image.Resize "250x webp" }}
      {{ $SM := $image.Resize "300x webp" }}

      {{ $alt := .PlainText | safeHTML }}
      {{ $caption := "" }}
      {{ with .Title }}
        {{ $caption = . | safeHTML }}
      {{ end }}
      
      <figure>
        <a href="{{ $image.RelPermalink }}">
          <img
            sizes="(max-width: 400px) 250px,
                   300px"
            srcset="{{ $XS.RelPermalink }} 250w, 
                    {{ $SM.RelPermalink }} 300w"
            src="{{ $image.RelPermalink }}"
            alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
            >
        </a>
        {{ with $caption }}
          <figcaption>{{ . | markdownify }}</figcaption>
        {{ end }}
      </figure>


    {{ else if ge $image.Width "250" }}

      {{ $XS := $image.Resize "250x webp" }}

      {{ $alt := .PlainText | safeHTML }}
      {{ $caption := "" }}
      {{ with .Title }}
        {{ $caption = . | safeHTML }}
      {{ end }}
      
      <figure>
        <a href="{{ $image.RelPermalink }}">
          <img
            sizes="300px"
            srcset="{{ $XS.RelPermalink }} 250w"
            src="{{ $image.RelPermalink }}"
            alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
            >
        </a>
        {{ with $caption }}
          <figcaption>{{ . | markdownify }}</figcaption>
        {{ end }}
      </figure>

    {{ end }}

  {{ else }}
    <div class="row text-center">
        <img 
        src="{{ $image.RelPermalink }}" 
        alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}" 
        width="auto"
        height="auto"
        >
    </div>
  {{ end }}
{{ end }}

anon86521655 · November 19, 2022, 6:00pm

Because $.Page.RenderString returns completely the img code, it is possible to return only the elements?
Maybe easier to resize directly in the shortcode?

jmooring · November 19, 2022, 6:01pm

When I use your render hook with the shortcode I provided, there are no errors. And the title attribute from the markdown appears in the figcaption element.

I don’t understand the problem you are trying to solve.

anon86521655 · November 19, 2022, 6:03pm

In fact I want to add a lightbox for my gallery

in this form

<div class="row">
	<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
		<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
	</a>
	<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
		<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
	</a>
	<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
		<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
	</a>
</div>

It’s Gallery for Bootstrap GitHub - trvswgnr/bs5-lightbox: A pure JS lightbox gallery plugin for Bootstrap 5 based on the Modal and Carousel components

jmooring · November 19, 2022, 6:20pm

Any other requirements that I should know about?

anon86521655 · November 19, 2022, 7:19pm

No, I don’t think so. Thanks again for the help

jmooring · November 19, 2022, 8:34pm

So based on your example, you don’t need width and height, just src, alt, and title.

Please confirm.

anon86521655 · November 19, 2022, 10:34pm

I dont think but i think resize image because i dont need full size for display on column so i think there are tree column per row.

before click on the image, display on 3 column with max height or width Xpx. (keep ratio)

after click it’s the lightbox gallery

if it’s important.

jmooring · November 20, 2022, 12:52am

Think carefully before answering:

Do you really need a title attribute for each image?
Would you be satisfied with an alt attribute based on the image name:

white-kitten.jpg → alt="White kitten"

Could live with putting all of your gallery images in a gallery directory for a given page, instead of specifying them individually?

 content/
 └── posts/
     └── post-1/
         ├── gallery/
         │   ├── black-kitten.jpg
         │   ├── gray-kitten.jpg
         │   └── white-kitten.jpg
         └── index.md

This would be much simpler.

anon86521655 · November 20, 2022, 9:20am

I’ll dig a little deeper into this folder thing (which I’ve used before.

But I wanted to simplify things but it seems to complicate them.

My goal is to stay as Markdown compliant as possible, because I use a HeadlessCMS (NetlifyCMS/StaticCMS).

So I’m going to see what can be done with the files.

Thanks again for the exchanges. I will come back to post the result or answer your questions.

Thank you again for your time.

Darthagnon · November 25, 2022, 6:11pm

Dare I suggest Hugo Easy Gallery (based off PhotoSwipe, here’s my fork where I’m trying to merge some PRs, add documentation and improve general compatibility)? It has a pretty simple syntax, and gives you a gallery with zoomable images.

Topic		Replies	Views
Images without width and height from markdown support	13	2225	September 16, 2021
Does render-imge hook execute before a wrapping shortcode sees the internal markdown img syntax? support	4	543	April 26, 2022
Image gallery from markdown using shortcode support	28	9862	March 19, 2015
Responsive featured images support	8	2241	May 28, 2021
Simple image render hook template for responsive images tips & tricks	11	7609	August 25, 2020

Image Gallery with Markdown syntaxe into Shortcode

Related topics