I thought you might be interested in the work I am doing on responsive images for markdown (plain and figure shortcode).
This is based on #514 and #544 and additional work.
figure.html
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
{{- $doAddLink := true -}}
{{- if .Get "link" -}}
<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
{{- $doAddLink = false -}}
{{- end -}}
{{- $alt := "" -}}
{{- if or (.Get "alt") (.Get "caption") }}
{{- with (.Get "alt") -}}
{{- $alt = . -}}
This file has been truncated. show original
render-image.html
{{- partial "helpers/responsive-images" (dict "alt" .Text "title" .Title "destination" .Destination "page" .Page "addLink" true) -}}
responsive-images.html
{{- $ctx := . -}}
{{- $inWidth := .width -}}
{{- $inHeight := .height -}}
{{- $inAlt := .alt -}}
{{- $inTitle := .title }}
{{- $inDestination := .destination -}}
{{- $inPage := .page }}
{{- $inAddLink := .addLink }}
{{- $destination := split $inDestination "#" }}
{{- $fullImage := resources.Get (index $destination 0) -}}
This file has been truncated. show original
3 Likes
iaeiou
September 18, 2021, 2:04pm
2
Hi @cshoredaniel ,
A quick feedback:
How to use your shortcode? (You may want to provide a shortcode example, define the requirements for image formats and path, etc)
Which features do you implement here? (output formats, linked image, lazy loading, fallback image, etc)
I was planning to use the solution from Laura Kalbag , mixed up with this one , but I’m still searching the way to go
Thanks for sharing your work!
Thank you, I was nodding off while posting, and forgot to create the
README
figure.html should be in your Hugo site (or theme) as /layouts/shortcodes/figure.html
render-image.html should be in your Hugo site (or theme) as /layouts/_default/_markup/render-image.html
responsive-images.html should be in your Hugo site (or theme) as /layouts/partials/helpers/responsive-images.html
Images should be placed either under /assets or in a page bundle for the page with which you wish to use the image(s).
For images under /assets your markdown path should include the path under /assets (but not including /assets).
For example, if you have /assets/images/a-beautiful-sunset.png, you will use markdown like ![A beautiful sunset on Georgian Bay](/images/a-beautiful-sunset.png)
If you had the images under static, you should be able to just move the images in the same hierarchy under /assets, without changes.
This file has been truncated. show original
figure.html
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
{{- $doAddLink := true -}}
{{- if .Get "link" -}}
<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
{{- $doAddLink = false -}}
{{- end -}}
{{- $alt := "" -}}
{{- if or (.Get "alt") (.Get "caption") }}
{{- with (.Get "alt") -}}
{{- $alt = . -}}
This file has been truncated. show original
render-image.html
{{- partial "helpers/responsive-images" (dict "alt" .Text "title" .Title "destination" .Destination "page" .Page "addLink" true) -}}
There are more than three files. show original
HTH (and thank you for the links).
1 Like
iaeiou:
How to use your shortcode? (You may want to provide a shortcode example, define the requirements for image formats and path, etc)
Which features do you implement here? (output formats, linked image, lazy loading, fallback image, etc)
I hope the README answers your first question.
Output formats: Same as input (but must be JPEG, TIFF, BMP, PNG, or GIF, and with Hugo extended WEBP is also available) unless you set
convertImageTo
in which case the image is converted as you specify (but must be one of the above input formats, and the output format must be supported by Hugo image processing).
Linked image (I presume you mean full image; I hope the README answers that well enough).
Uses lazy loading, currently no options just always lazy
Fallback image is the full image (unless using convertImageTo
in which case it is the identical size but converted to the specified format.
The figure shortcode is the standard Hugo image shortcode modified to use responsive-images the same as standard markdown with the render-images
hook setup to do responsive images.
Standard Markdown ![Alt text](image.png)
also works.
The objective is/was not to add bells and whistles, but to use standard Hugo, and add responsive images.
I know the sizes= bit needs some work.
1 Like
I’ve now got a GitHub repo for which I’ve updated the README and have a Demo site which also has a a version of the README .
Please let me know if you need more info!
2 Likes