Using "{{ partial "image" ... }}" in shortcode doesn't allow a "<a href=...>" to the original image

support
1

sorry for asking here… but i’m currently lost :confused:

i have the following shortcode (with e.g. img1=“/images/post01/img01.jpg” )

{{ $img1 := .Get "img1" }}
...
<a href="{{ $img1 }}">
   {{ partial "image" (dict "Src" $img1 "Alt" "Image 01" "Size" "200x200" "Loading" "eager" "Class" "mx-auto lg:!max-w-[800px]" ) }}
</a>

this renders fine in the page. however, if i click on the image, the href points directly to /images/post01/img01.jpg which is not created.
i would, however, like to show the original image when i click on the preview.

in /public/images/post01/ hugo only creates Lanczos compressed images like

  • img01_hu5a1df5d6cca77f0876c4c8749db3d7d6_300658_200x200_resize_q90_h2_lanczos.webp
  • img01_hu5a1df5d6cca77f0876c4c8749db3d7d6_300658_200x200_resize_q90_lanczos.jpg

how can i do this?
thanks!

2

It is not possible to answer your question with the information you have provided.

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

thanks for the quick reply…

i updated, stript the code and uploaded it to github:

as from my original post and dhre readme.md:
i’d like a 3 image gallery shortcode (3 image-preview in one row).
when clicking on an image it sould show enlarged (using Lightbox2 - or something similar)
in the enlarged view i’d like to be able to cycle through the 3 images (something that lightbox should provide internally)
problem: hugo processes every image and only creates resized versions of my original image, so a “href=…” link isn’t found later…

any help would be very much appreaciated!

4

It does what it’s told to. And it does not delete the original images. You might want to look for Resize in your code.

5

yes, i understand that. it’s good, that hugo resizes and compresses, as this saves bandwith and speeds up rendering… i use “Size” “200x200” (in {{ partial “image” … }} as i’d like to have my thumbnails smaller (and in identical size) and also to resized (and therefore to save bandwidth)

but: if the user wants to see the full image, it should (on demand) get the full-size image

i could, of course, prepare a thumbnail and a full-size image and use the thumbnail in the gallery and the full-size in the href… but this should be automatic

also: in my post-2 (My Gallery 2) i DO NOT use partial “image”… at all. i just use

<a href="{{ $img1 }}" data-lightbox="image-set" data-title="Image 1">
   <img src="{{ $img1 }}" alt="Image 1" class="image-zoom">        
</a>

why is it resizing my images there, too?

6

No idea. I can’t clone your repo as I haven’t Go installed. And I’m not going to. Others might be able to help. It might help them if you pared down your repo to the absolute necessary demonstrating the issue.

7

First, you created your shortcodes in themes/hugoplate/layouts/shortcodes. If you ever update/remove the theme you will lose your customizations and additions. When you use a theme, don’t ever modify it. Instead, override the theme by placing files in the layouts directory in the root of your project.

So, instead of this:

themes/hugoplate/layouts/shortcodes/mygallery1.html
themes/hugoplate/layouts/shortcodes/mygallery2.html

Do this:

layouts/shortcodes/mygallery1.html
layouts/shortcodes/mygallery2.html

Second, you need to capture the original images (before passing them through the image partial) as resources, then call the resource RelPermalink method to publish the original image and return its path.

Here’s a diff file showing the required changes:

diff 
diff --git a/themes/hugoplate/layouts/shortcodes/mygallery1.html b/themes/hugoplate/layouts/shortcodes/mygallery1.html
index 365c378..6c07e22 100644
--- a/themes/hugoplate/layouts/shortcodes/mygallery1.html
+++ b/themes/hugoplate/layouts/shortcodes/mygallery1.html
@@ -23,20 +23,28 @@
 
 <!-- use Lightbox2 for image-preview -->
 <div class="grid grid-cols-3 gap-0">
+
+      {{ $originalImages := slice }}
+      {{ range $k, $_ := .Params }}
+        {{ if findRE `^img\d+$` $k }}
+          {{ with resources.Get . }}
+            {{ $originalImages = $originalImages | append . }}
+          {{ end }}
+        {{ end }}
+      {{ end }}
+
       <div>
-        {{/*  <img src="{{ $img1 }}"><img>  */}}
-        <a href="{{ $img1 }}" data-lightbox="image-set1" data-title="Image 1">
-        {{ partial "image" (dict "Src" $img1 "Alt" "Image 01" "Size" "200x200" "Loading" "eager" "Class" "mx-auto lg:!max-w-[800px] image-zoom" ) }}
+        <a href="{{ (index $originalImages 0).RelPermalink }}" data-lightbox="image-set1" data-title="Image 1">
+          {{ partial "image" (dict "Src" $img1 "Alt" "Image 01" "Size" "200x200" "Loading" "eager" "Class" "mx-auto lg:!max-w-[800px] image-zoom" ) }}
         </a>
-        
       </div>
       <div>
-        <a href="{{ $img2 }}" data-lightbox="image-set1" data-title="Image 2">
+        <a href="{{ (index $originalImages 1).RelPermalink }}" data-lightbox="image-set1" data-title="Image 2">
           {{ partial "image" (dict "Src" $img2 "Alt" "Image 02" "Size" "200x200" "Loading" "eager" "Class" "mx-auto lg:!max-w-[800px] image-zoom" ) }}
         </a>
       </div>
       <div>
-        <a href="{{ $img3 }}" data-lightbox="image-set1" data-title="Image 3">
+        <a href="{{ (index $originalImages 2).RelPermalink }}" data-lightbox="image-set1" data-title="Image 3">
           {{ partial "image" (dict "Src" $img3 "Alt" "Image 03" "Size" "200x200" "Loading" "eager" "Class" "mx-auto lg:!max-w-[800px] image-zoom" ) }}
         </a>
       </div>

8

Thanks, Joe. this works perfectly! :+1:

I also appreciate your comment on “never modify a theme”:
as i did not find a /layout/ folder in the root directory, I thought there’s no other way than using the theme’s layout-folder.
following your comment, I now just created /layout/shortcodes/ in the root directory an that is working great :slight_smile:

1 Like
9

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