The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Responsive Images In Hugo

TODO: Pull subtitle into page object

_NOTE: I haven't run Hugo in a couple years. I don't know if this is still necessary or if something else is available now_

_NOTE: Need to combine this with this post_

This is the first version of responsive image code I made for Hugo.

It has the hard coded sizes that work with the Tale theme that I setup initially for the site in Nov. 2019.

You can drop full size images in and then when you call it the images are resized automatically by Hugo to the specific sizes.

It defaults to using the large size if a browser doesn't work with srcset.

Usage:

code_start_default_section code_end_default_section

References:

- https://dev.to/stereobooster/responsive-images-for-hugo-dn9 - https://www.adamwills.io/blog/responsive-images-hugo/

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Responsive Images In Hugo

-- p

_NOTE: I haven't run Hugo in a couple years. I don't know if this is still necessary or if something else is available now_

-- p

_NOTE: Need to combine this with <<link|this post|/20eN8RDqh5DO>>_

-- p

This is the first version of responsive image code I made for Hugo.

-- p

It has the hard coded sizes that work with the Tale theme that I setup initially for the site in Nov. 2019.

-- p

You can drop full size images in and then when you call it the images are resized automatically by Hugo to the specific sizes.

-- p

It defaults to using the large size if a browser doesn't work with srcset.

-- p

Usage:

-- code/
-- bash

{{< img2 src="APC_0322.jpg" caption="Small image test" alt="small image test">}}

-- /code

-- p

The code:

-- code/
-- hugo

{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
{{ $small1 := $src.Resize "690x" }}
{{ $medium1 := $src.Resize "1000x" }}
{{ $large1 := $src.Resize "1324x" }}
{{ $small2 := $src.Resize "1380x" }}
{{ $medium2 := $src.Resize "2000x" }}
{{ $large2 := $src.Resize "2648x" }}

<figure>
    <img
      src="{{ $large2.RelPermalink }}"
      srcset="
      {{ $small1.RelPermalink }} 690w,
      {{ $medium1.RelPermalink }} 1000w,
      {{ $large1.RelPermalink }} 1324w,
      {{ $small2.RelPermalink }} 1380w,
      {{ $medium2.RelPermalink }} 2000w,
      {{ $large2.RelPermalink }} 2648w"
      alt="{{ if .Get "alt" }}{{ .Get "alt" }}{{ else }}Image without alt text{{ end }}"
      >
      {{ if .Get "caption"}}
        <figcaption>{{ .Get "caption" }}</figcaption>
      {{ end }}
</figure>

-- /code

-- p

This version is basically the same, but it also prevents upsizing by comparing the width against the source image. Of course, if the CSS upsizes, this won't stop that.

-- code/
-- hugo

{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
{{ $small1 := $src.Resize "690x" }}
{{ $medium1 := $src.Resize "1000x" }}
{{ $large1 := $src.Resize "1324x" }}
{{ $small2 := $src.Resize "1380x" }}
{{ $medium2 := $src.Resize "2000x" }}
{{ $large2 := $src.Resize "2648x" }}

<figure>
    <img
      src="{{ $large2.RelPermalink }}"
      srcset="
      {{ with $small1.RelPermalink }}{{.}} 690w{{ end }}
      {{ if ge $src.Width 1000 }},
        {{ $medium1.RelPermalink }} 1000w
      {{ end }}
      {{ if ge $src.Width 1324 }},
        {{ $large1.RelPermalink }} 1324w
      {{ end }}
      {{ if ge $src.Width 1380 }},
        {{ $small2.RelPermalink }} 1380w
      {{ end }}
      {{ if ge $src.Width 2000 }},
        {{ $medium2.RelPermalink }} 2000w
      {{ end }}
      {{ if ge $src.Width 2648 }},
        {{ $large2.RelPermalink }} 2648w
      {{ end }}"
      alt='{{ if .Get "alt" }}{{ .Get "alt" }}{{ else }}Image without alt text{{ end }}'
      >
      {{ if .Get "caption"}}
        <figcaption>{{ .Get "caption" }}</figcaption>
      {{ end }}
</figure>

-- /code

-- p

References:

-- p

- https://dev.to/stereobooster/responsive-images-for-hugo-dn9
- https://www.adamwills.io/blog/responsive-images-hugo/


-- categories
-- Hugo

-- metadata
-- date: 2019-11-01 14:54:52
-- id: 29g6tr9u
-- status: published
-- type: post
-- SCRUBBED_NEO: false
-- site: aws