diff options
| author | Patrick Magauran <10986886+patmagauran@users.noreply.github.com> | 2020-12-31 23:55:28 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-12-31 23:55:28 +0300 |
| commit | a2b3c7fda25e651f21a5e82f7d4a285fbbd6a8e3 (patch) | |
| tree | e039c41dcf41219a1b70f44c769d6339da178c11 /layouts/shortcodes | |
| parent | ba1d6014d946806f0b3fb6f1af5bd4c587144c5f (diff) | |
Transition to Hugo Image Processing (#173)
* Update layout to use Hugo Image Processing.
Created shortcode rimg that uses the srcset attribute to display responsive images.
* Copy Static images to assets folder.
* Add image processing to missing components + Update examples
* Fix rendering in https://themes.gohugo.io/
Co-authored-by: Emruz Hossain <emruz@appscode.com>
Diffstat (limited to 'layouts/shortcodes')
| -rw-r--r-- | layouts/shortcodes/rimg.html | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/layouts/shortcodes/rimg.html b/layouts/shortcodes/rimg.html new file mode 100644 index 0000000..e21d3f4 --- /dev/null +++ b/layouts/shortcodes/rimg.html @@ -0,0 +1,53 @@ +{{/* Combination of code taken from: https://alexlakatos.com/web/2020/07/17/hugo-image-processing/ & https://dev.to/stereobooster/responsive-images-for-hugo-dn9}} + +{{/* get file that matches the filename as specified as src="" in shortcode */}} +{{ $src := resources.GetMatch (.Get "src") }} + +{{ if in (.Get "src") "http" }} + <img src="{{$src}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}> +{{ else }} + {{ if in (.Get "src") ".gif" }} + <img src="{{$src.RelPermalink}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}> + {{ else }} + {{/* set image sizes, these are hardcoded for now */}} + + {{ $tinyw := default "500x" }} + {{ $smallw := default "800x" }} + {{ $mediumw := default "1200x" }} + {{ $largew := default "1500x" }} + + {{/* resize the src image to the given sizes */}} + + {{ $tiny := $src.Resize $tinyw }} + {{ $small := $src.Resize $smallw }} + {{ $medium := $src.Resize $mediumw }} + {{ $large := $src.Resize $largew }} + + {{/* add the processed images to the scratch */}} + + + {{/* only use images smaller than or equal to the src (original) image size */}} + <img + {{ with .Get "sizes" }}sizes='{{.}}'{{ else }}{{ end }} + srcset=' + {{ if ge $src.Width "500" }} + {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }} + {{ end }} + {{ if ge $src.Width "800" }} + {{ with $small.RelPermalink }}, {{.}} 800w{{ end }} + {{ end }} + {{ if ge $src.Width "1200" }} + {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }} + {{ end }} + {{ if ge $src.Width "1500" }} + {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }} + {{ end }}' + {{ if .Get (print $medium) }} + src="{{ $medium.RelPermalink }}" + {{ else }} + src="{{ $src.RelPermalink }}" + {{ end }} + + {{ with .Get "alt" }}alt='{{.}}'{{ end }}> + {{ end }} +{{ end }} |