Dynamic image gallery,

support
1

So I am creating this masonry. but I face tiny issue.

image
image790×568 101 KB

I followed this Image Gallery guide, and changed the code a bit according to my need. now the issue here is the title of the Images, I can’t use images with the same name, let’s say there are three images of hair transplant, and they can’t be named Hair Transplant. My solution is to create sub-directories inside the album dir and place the images in there, but I can’t figure out how to fetch those images.

{{ $dir := string .gallery_dir }}
<div class="masonry">
  {{ $index := 1 }}
  {{ range (readDir (print "/static/" $dir)) }}
  {{- $image := resources.Get (printf "%s/%s" $dir .Name) -}}
  {{- $imageurl := printf "%s/%s" $dir .Name -}}
  {{- $imagetitle := index (split .Name ".") 0 -}}
  <div class="grid masonry-item" data-index="{{ $index }}">
    <img src="{{ $image.RelPermalink }}" alt="{{ $imagetitle }}" title="{{ $imagetitle }}" class="img-fluid">
    <div class="grid-body">
      <div class="relative">
        <h1 class="grid-title fs-5">{{ $imagetitle }}</h1>
      </div>
    </div>
  </div>
  {{ $index = add $index 1 }}
  {{ end }}
</div>
2

Look at resources.Match and ** glob patterns.

1 Like
3

I am gonna start with it went over my head and if this is what you are talking about
resource.Match and couldn’t even find the ** glob patterns and I did this got error

{{ $dir := . }}
{{ $index := 1 }}
{{ with .Site.GetPage (printf "static/%s" $dir) }}
  {{ range $index, $image := $.Scratch.Get "images" }}
    {{ with $image.Resources.GetMatch ".*\.(jpg|jpeg|png|gif)" }}
      {{ $imagetitle := index (split .Name ".") 0 }}
      <div class="grid masonry-item" data-index="{{ $index }}">
        <img src="{{ .RelPermalink }}" alt="{{ $imagetitle }}" title="{{ $imagetitle }}" class="img-fluid">
        <div class="grid-body">
          <div class="relative">
            <h1 class="grid-title fs-5">{{ $imagetitle }}</h1>
          </div>
        </div>
      </div>
    {{ end }}
  {{ end }}
{{ end }}

and

{{ $gallery_dir := "album" }}
<div class="masonry">
  {{ partial "gallery.html" (printf "static/%s" $gallery_dir) }}
</div>

ERROR Rebuild failed: process: “/mnt/myData/work/Arox/Templates/laserExperts/themes/laserExp/layouts/partials/common/masonry.html:5:1”: parse failed invalid syntax

4 
assets/
├── foo/
│   ├── bar/
│   │   └── a.jpg
│   └── a.jpg
└── a.jpg

From any template:

{{ range resources.Match "**" }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}

Result:

<img src="/a.jpg" width="600" height="400" alt="">
<img src="/foo/a.jpg" width="600" height="400" alt="">
<img src="/foo/bar/a.jpg" width="600" height="400" alt="">

If the source directory has stuff other than images, use ByType:

{{ range resources.ByType "image" }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}

Same result.

1 Like
5

okay so this is what worked

{{ $dir := string .gallery_dir }}
<div class="masonry">
  {{ $index := 1 }}
  {{ range resources.Match (printf "/%s/**" $dir) }}
  {{- $image := . -}}
  {{- $imageurl := .RelPermalink -}}
  {{- $imagetitle := index (split (path.Base .Name) ".") 0 -}}
  <div class="grid masonry-item" data-index="{{ $index }}">
    <img src="{{ $imageurl }}" alt="{{ $imagetitle }}" title="{{ $imagetitle }}" class="img-fluid">
    <div class="grid-body">
      <div class="relative">
        <a class="grid-link" href="{{ ($image.Fit "1600x1600 q50").Permalink }}" title="{{ $imagetitle }}"></a>
        <h1 class="grid-title fs-5">{{ $imagetitle }}</h1>
      </div>
    </div>
  </div>
  {{ $index = add $index 1 }}
  {{ end }}
</div>
6

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