Simple image render hook template for responsive images

bep · June 6, 2020, 2:50pm

What you can do is to move (or mount) your /images folder to /assets, and then do something ala this:

bep/portable-hugo-links/blob/master/layouts/_default/_markup/render-image.html#L4


      
          {{- $img := .Page.Resources.GetMatch .Destination -}}
          {{- if and (not $img) .Page.File -}}
          {{ $path := path.Join .Page.File.Dir .Destination }}
          {{- $img = resources.Get $path -}}
          {{- end -}}
          {{- with $img -}}
          {{- $large := $img.Resize "1200x" -}}
          {{ $medium := $large.Fill "726x402" -}}
          {{ $small := $medium.Fill "458x254" -}}
          <figure class="image-caption">
              <img alt="{{ $.Text }}" srcset="
                  {{ $small.RelPermalink }} 458w,
                  {{ $medium.RelPermalink }} 726w,
                  {{ $large.RelPermalink }} 1200w" sizes="50vw" src="{{ $small.RelPermalink }}" />

Topic		Replies	Views
Problem with image render hook [solved] + some figure/img css styling issues support	4	395	August 16, 2022
Problem during the construction related to the nesting of a Render Hook (image) in a shortcode support	7	401	March 19, 2022
RelPermalink in srcset result in different URL support	0	399	July 4, 2022
Using render-image hook to generate figures support	3	1133	December 6, 2021
How to use image width in markdown? support	7	3346	April 24, 2021

Simple image render hook template for responsive images

Related Topics