Custom class on outer most container

[Darkproduct]

I'm using tailwindcss and would like to add a custom class to the outer most container created by the picture and figure shortcode.

I need this, because I would like an easy way make an image grid work.

Here both figure elements should have the w-1/2 class for 50 % width.

{{< image_grid >}}
  {{< figure src="…" alt="…" caption="…" >}}
  {{< figure src="…" alt="…" caption="…" >}}
{{< /image_grid >}}

I could add this in config.params.image.shortcode_wrapper_class, but then I couldn't do more w-1/3 or w-1/4 for 3 or 4 images in a row. Or switching the spacing, by e.g. placing two images in the first row and 3 in the next.

So I need a way to customize the outer class for each image. Unfortunately, the class argument only changes the class of the contained <img> tag. I would argue that there is no need of changing the image tag class individually and the class argument should change the container. Because CSS as a tree and works from the outside to the inside, what you can do with the <img> tag class is greatly limited anyway.

Current state:

• <img> class can be changed from config.params.image.class and the class argument of {{ figure }}/{{ picture }}
• container class can only be changed with config.params.image.shortcode_wrapper_class

I propose to switch this to:

• <img> class can only be changed from config.params.image.class
• container class default can be set with config.params.image.shortcode_wrapper_class and the class argument of {{ figure }}/{{ picture }}

Current workaround:

{{< image_grid >}}
  <div class="w-1/2">
    {{< figure src="…" alt="…" caption="…" >}}
  </div>
  <div class="w-1/2">
    {{< figure src="…" alt="…" caption="…" >}}
  </div>
{{< /image_grid >}}

resulting in this HTML:

What I don't like about this:

1. The person writing the blogpost now has to fiddle directly with HTML.
2. There are to many classes which have no purpose at all.

Ideally my HTML would look like this:

[Darkproduct]

Just tried this shortcode_wrapper_class="w-1/2" as argument and it works.

But this is not listed here: https://github.com/future-wd/hugo-responsive-images#partial---figure

{{< image_grid >}}
  {{< figure src="…" alt="…" caption="…" shortcode_wrapper_class="w-1/2" >}}
  {{< figure src="…" alt="…" caption="…" shortcode_wrapper_class="w-1/2" >}}
{{< /image_grid >}}

[sean-au]

Sorry to have wasted your time.

I am starting to think I will have to just put some basics on the github readme, and then make a docs site as there are too many sections and options to list.

Or do you think the readme can be improved?

[sean-au]

I am currently in the process of cleaning up the code in this module, so the docs would have to wait for a while...

Any more questions feel free to ask

[Darkproduct]

No worries. You do great work with this module and I'm just figuring stuff out on the go. So the website I'm porting to hugo is quite large.

I couldn't get a satisfactory solution with my first approach and I thought it would probably be best to write my own shortcode that is used inside the image grid / gallery. But I couldn't get it to work.

It should be used like this:

{{< gallery columns=2 >}}
  {{< gallery_image src="…" alt="…" caption="…" >}}
  {{< gallery_image src="…" alt="…" caption="…" >}}
  {{< gallery_image src="…" alt="…" caption="…" width=1 >}}
  {{< gallery_image src="…" alt="…" caption="…" width=1/3 >}}
  {{< gallery_image src="…" alt="…" caption="…" width=1/3 >}}
  {{< gallery_image src="…" alt="…" caption="…" width=1/3 >}}
{{< /gallery >}}


Here is my current code for this gallery_image shortcode:

{{ $src := "" }}
{{ $alt := "" }}
{{ $caption := "" }}
{{ $width := "" }}
{{ if .IsNamedParams }}
  {{ $src = .Get "src" }}
  {{ $alt = .Get "alt" }}
  {{ $caption = .Get "caption" }}
  {{ $width = .Get "width" }}
{{ else }}
  {{ errorf "Missing arguments for gallery_image shortcode" }}
{{ end }}

<!-- TODO -->
{{ $classes := slice "p-1" }}
{{ if $width }}
  {{ if eq $width 1 }}
    {{ $classes = $classes | append ("w-full") }}
  {{ else }}
    <!-- add "w-{{ $width }} to classes" -->
    {{ $classes = $classes | append (delimit (slice "w-" $width) "") }}
  {{ end }}
{{ else }}
  <!-- add "w-1/{{ .Parent.columns }} to classes?" -->
{{ end }}

{{ if $caption }}
  {{ partial "figure" (dict "ctx" . "src" $src "alt" $alt "caption" $caption "shortcode_wrapper_class" (delimit $classes " ")) }}
{{ else }}
  {{ partial "picture" (dict "ctx" . "src" $src "alt" $alt "shortcode_wrapper_class" (delimit $classes " ")) }}
{{ end }}

There are a few things that currently don't work:

1. I can't figure out how to call the figure partial. I always get this error:

   ERROR 2023/04/18 23:16:35 Rebuild failed: "hugo-project/content/blogpost/2023-01-31-publishing-the-carbonaro-dataset-from-fre-2022/index.md:37:1": failed to render shortcode "gallery": "hugo-project/content/blogpost/2023-01-31-publishing-the-carbonaro-dataset-from-fre-2022/index.md:1:1": failed to render shortcode "gallery_image": failed to process shortcode: "hugo-project/themes/project-tailwind-theme/layouts/shortcodes/gallery_image.html:30:5": execute of template failed at <partial "figure" (dict "ctx" . "src" $src "alt" $alt "caption" $caption "shortcode_wrapper_class" (delimit $classes " "))>: error calling partial: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/future-wd/hugo-responsive-images@v1.2.11/layouts/partials/figure.html:1:3": execute of template failed at <partial "hri/figure" .>: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/future-wd/hugo-responsive-images@v1.2.11/layouts/partials/hri/figure.html:24:22": execute of template failed at <partial "hri/private/params/figure" (merge . (dict "ctx" $ctx))>: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/future-wd/hugo-responsive-images@v1.2.11/layouts/partials/hri/private/params/figure.html:5:12": execute of template failed at <.ctx.Resources.GetMatch>: can’t evaluate field Resources in type interface {}

2. The todo section in the middle

[sean-au]

I'm about to push some updates today which may make this a bit simpler.. I'll let you know when I'm done

On Wed, 19 Apr 2023, 9:23 am Darkproduct, @.***> wrote:

No worries. You do great work with this module and I'm just figuring stuff out on the go. So the website I'm porting to hugo is quite large.

I couldn't get a satisfactory solution with my first approach and I thought it would probably be best to write my own shortcode that is used inside the image grid / gallery. But I couldn't get it to work.

It should be used like this:

{{< gallery columns=2 >}} {{< gallery_image src="…" alt="…" caption="…" >}} {{< gallery_image src="…" alt="…" caption="…" >}} {{< gallery_image src="…" alt="…" caption="…" width=1 >}} {{< gallery_image src="…" alt="…" caption="…" width=1/3 >}} {{< gallery_image src="…" alt="…" caption="…" width=1/3 >}} {{< gallery_image src="…" alt="…" caption="…" width=1/3 >}} {{< /gallery >}}

Here is my current code for this gallery_image shortcode:

{{ $src := "" }} {{ $alt := "" }} {{ $caption := "" }} {{ $width := "" }} {{ if .IsNamedParams }} {{ $src = .Get "src" }} {{ $alt = .Get "alt" }} {{ $caption = .Get "caption" }} {{ $width = .Get "width" }} {{ else }} {{ errorf "Missing arguments for gallery_image shortcode" }} {{ end }}

{{ $classes := slice "p-1" }} {{ if $width }} {{ if eq $width 1 }} {{ $classes = $classes | append ("w-full") }} {{ else }}

{{ $classes = $classes | append (delimit (slice "w-" $width) "") }}

{{ end }} {{ else }}

{{ end }}

{{ if $caption }} {{ partial "figure" (dict "ctx" . "src" $src "alt" $alt "caption" $caption "shortcode_wrapper_class" (delimit $classes " ")) }} {{ else }} {{ partial "picture" (dict "ctx" . "src" $src "alt" $alt "shortcode_wrapper_class" (delimit $classes " ")) }} {{ end }}

There are a few things that currently don't work:

1. I can't figure out how to call the figure partial. I always get this error:

ERROR 2023/04/18 23:16:35 Rebuild failed: "hugo-project/content/blogpost/2023-01-31-publishing-the-carbonaro-dataset-from-fre-2022/index.md:37:1": failed to render shortcode "gallery": "hugo-project/content/blogpost/2023-01-31-publishing-the-carbonaro-dataset-from-fre-2022/index.md:1:1": failed to render shortcode "gallery_image": failed to process shortcode: "hugo-project/themes/project-tailwind-theme/layouts/shortcodes/gallery_image.html:30:5": execute of template failed at <partial "figure" (dict "ctx" . "src" $src "alt" $alt "caption" $caption "shortcode_wrapper_class" (delimit $classes " "))>: error calling partial: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/ @./layouts/partials/figure.html:1:3": execute of template failed at <partial "hri/figure" .>: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/ @./layouts/partials/hri/figure.html:24:22": execute of template failed at <partial "hri/private/params/figure" (merge . (dict "ctx" $ctx))>: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/ @.***/layouts/partials/hri/private/params/figure.html:5:12": execute of template failed at <.ctx.Resources.GetMatch>: can’t evaluate field Resources in type interface {}

1. The todo section in the middle

— Reply to this email directly, view it on GitHub https://github.com/future-wd/hugo-responsive-images/issues/59#issuecomment-1513810471, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARTWGA56LYOGVRNOQQJZPZLXB4A3VANCNFSM6AAAAAAXBJEAR4 . You are receiving this because you commented.Message ID: @.***>

[sean-au]

I have just release v1.2.19

Have a look at partials/hri/private/params/shortcode-get-params.html

This is where all available params from shortcode are sanitized and converted into params just like you would supply in a partial.

I had a hard time getting my head around your code, but I would suggest overriding this partial in your project create a new partials/hri/private/params/shortcode-get-params.html in your project, and then copy and paste from my module (run hugo mod get vendor if you wish to easily copy and pate) then then inject your parameters here.

[Darkproduct]

I don't rally get what I can do there. I can return a map of params but what keys are expected to be set, or do anything if set?

I currently also don't understand how I'm supposed to develop anything as complicated as this. How do you debug this? I only know this printf debugging which is useless, if there is any error executing the shortcode. I come from an C++ robotics background and develop in C++, Python, C# and JS. So maybe I should learn Go as well, to do this.

[sean-au]

Sorry to take so long to get back to you.

This partial takes in all of the key/property pairs which can be set via a partial. It basically takes all of the shortcode input and then sends it to the standard partial (that you would use in a layout template).

Have a look at the docs as to what you can set via a partial. Then you can insert whatever logic you like to take in your custom properties, and output properties as through they were set at a shortcode level.

In terms of debug, you have to run warnf to get the information that your debugging to show in the console. If you get really stuck you can run errorf to halt the application at that point.

Unfortunately Hugo uses a simplified version of go templating, there isn't many functionality available hence the interesting structure that Hugo Modules have to take on.