Issue with multiple shortcodes in the same page

support
1

I have a working shortcode for an images gallery as follows:

{{ with $.Get "title" }}<h3>{{ . }}</h3>{{ end }}
{{ with $.Get "content"}}<h4>{{ . | markdownify }}</h4>{{ end }}
<div class="gallery">
  {{ range $image := (.Page.Resources.ByType "image").Match (printf "%s*" (.Get "src")) }}
  {{ $src := $image }}
  {{ $thumb := .Resize "500x" }}
    <a data-fslightbox="gallery" href="{{ $src.RelPermalink }}">
      <img
      class="lazyload blur-up"
      data-src="{{ $thumb.RelPermalink }}"
      alt="{{ .Name | markdownify }}"
      >
  </a>
  {{ end }}
</div>

This shortcode works well when I have a single shortcode in the same page (display the image gallery and showing each single large format image when clicking on thumb).
But the same process is not working when I get 2 or 3 similar shortcodes in the same page.The 3 images galleries are displaying as expected but not the single large format when clicking on the thumb.
Note that I have a conditional call of a light js script whith single layout as follows:

{{- if .HasShortcode "gallery" -}}
{{ $fslightbox := resources.Get "js/fslightbox.js" | fingerprint -}}
<script defer src="{{ $fslightbox.RelPermalink }}"></script>
{{ $gallery := resources.Get "css/gallery.css" | minify | fingerprint }}
<link type=text/css rel="stylesheet" href="{{ $gallery.Permalink }}">
{{ end }}

Any idea whether I am missing something or doing something wrong?

2

Because you are using same name for all the fslightbox instances.

data-fslightbox="gallery"

fslightbox instances documentation

You need generate unique id for each fslightbox instances, you can read a tips shared here:

you can try this: (not tested)

{{ with $.Get "title" }}<h3>{{ . }}</h3>{{ end }}
{{ with $.Get "content"}}<h4>{{ . | markdownify }}</h4>{{ end }}
+ {{ $seed := .Get "src" }} <!-- you can change this -->
+ {{ $unique := delimit (shuffle (split (md5 $seed) "" )) "" }}
<div class="gallery">
  {{ range $image := (.Page.Resources.ByType "image").Match (printf "%s*" (.Get "src")) }}
  {{ $src := $image }}
  {{ $thumb := .Resize "500x" }}
+    <a data-fslightbox="{{ $unique | safeHTMLAttr }}" href="{{ $src.RelPermalink }}">
      <img
      class="lazyload blur-up"
      data-src="{{ $thumb.RelPermalink }}"
      alt="{{ .Name | markdownify }}"
      >
  </a>
  {{ end }}
</div>
3

Thanks for the swift answer.
I have to investigate that further.
Your proposed code is working well on localhost but not on production site.
I will revert to you as soon as I get the right code.

4

At the end, I succeeded with your proposed code with minor changes in the way the js script is loaded.
Now it works like a charm.
Once again thanks for the support

1 Like
5

I’ve followed another route for calculating unique IDs:

6

Thanks for this alternative. Since I am not a pro, I should have some difficulties to explore and understand the details of your solution. However it’s fine to have multiple solutions.
By the way, j’ai vu que votre site était francophone (comme moi) donc ce devrait être plus simple pour moi.
Merci

1 Like
7

Short explanation:

  1. seq 999 | shuffle produces a range of integers from 1 to 999 and shuffles them
  2. index (seq 999 | shuffle) 0 takes the first number of the list, i.e. a random integer in [1;999]
  3. print $address $protocol (index (seq 999 | shuffle) 0) concatenates the address, the protocol and the random integer
  4. md5 (...) computes the md5 hash of the concatenated string
  5. md5 (...) | truncate 8 "" truncates the hash to 8 chars, without ellipsis (just for readability)
8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.