https://images.hugomods.com/docs/templates/

[giscus[bot]]

https://images.hugomods.com/docs/templates/

Templates to help developers render images.

https://images.hugomods.com/docs/templates/

[gavlinski]

Hi! Is there a support or shortcode to show different images for light and dark color schemes with dynamic change when user toogle between themes?

References:

• https://squidfunk.github.io/mkdocs-material/reference/images/#light-and-dark-mode
• https://stenbrinke.nl/blog/adding-support-for-dark-and-light-images-to-hugo-figure-shortcode/

[razonyang]

![Alt](image.webp?attr-data-foo=bar&attr-data-fizz=buzz&attr-data-theme=dark)

Available since hugomods/images v0.12.0.

1. Parameters must start with attr-
2. Those attributes were applied on <picture> element, so you need to replace the img with picture in your style, since the picture element may contains multiple source of same picture, but with different formats, such as png, webp, you may want to hide them all, not just img element.

[gavlinski]

I replaced <img> with <picture> in my style and it worked as expected, but the captions <figcaption class="figure-caption">Caption Dark</figcaption> are still always displayed. Any suggestions on how to hide them as well as the <picture>?

![Alt Dark](dark-img.png?attr-data-theme=dark "Caption Dark")
![Alt Light](light-img.png?attr-data-theme=light "Caption Light")

[razonyang]

Hmm, that's indeed a question

1. Apply attr-* parameters on outer element, <picture> without caption, <caption> with caption, but seems weird.
2. Add one more parameter for , such as caption-attr-*, but complex

Any other ideas?

[razonyang]

OK, I adopt the first method, update the images module, and replace picture with picture, caption in style should work.

picture {
  ...
}

/* To */

picture,
caption {

}

[gavlinski]

I had to replace styles with figure instead, them it worked!

figure {
  ...
}

While I was waiting for you I also adapted a functional shortcode that may be useful in some cases:

• figure-dynamic.html

  <figure class="figure">
      {{- if .Get "link" -}}
          <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
      {{- end -}}
      <picture>
          <img data-theme="dark" class="img-fluid" src="{{ .Get "dark-src" }}"
              {{- if .Get "alt" }}
              alt="{{ with .Get "alt" }}{{ . }}{{ end }}"
              {{- end -}}
              {{- if .Get "title" }}
              title="{{- .Get "title" | markdownify | plainify -}}"
              {{- end -}}
              loading="lazy"
              {{- with .Get "width" }} width="{{ . }}"{{ end -}}
              {{- with .Get "height" }} height="{{ . }}"{{ end -}}>
          <img data-theme="light" class="img-fluid" src="{{ .Get "light-src" }}"
              {{- if .Get "alt" }}
              alt="{{ with .Get "alt" }}{{ . }}{{ end }}"
              {{- end -}}
              {{- if .Get "title" }}
              title="{{- .Get "title" | markdownify | plainify -}}"
              {{- end -}}
              loading="lazy"
              {{- with .Get "width" }} width="{{ . }}"{{ end -}}
              {{- with .Get "height" }} height="{{ . }}"{{ end -}}>
      </picture>
      {{- if .Get "link" }}</a>{{ end -}}
      {{- if .Get "title" -}}
          <figcaption class="figure-caption">{{- .Get "title" | markdownify -}}</figcaption>
      {{- end }}
  </figure>

• Usage (same alt text, caption and size for both images):

  {{<figure-dynamic dark-src="dark-img.png" light-src="light-img.png" alt="Alt" title="Caption" height="123" width="456">}}

• CSS to hide or show:

  img {
    ...
  }

Thanks again for your help and support!