Commit 8a5f740a authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Update image shortcode and blog post with fix by Jonathan Ulco

parent 9de5a2e6
......@@ -139,7 +139,7 @@ Using the shortcode code:
{{ else }}
src="{{ $src.RelPermalink }}"
{{ end }}
{{ with .Get "alt" }}alt='{{.}}'{{ end }}>
{{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
{{< /highlight >}}
Reading the comments above, you might notice that Hugo will upscale small images, so if your original image is only 1200px wide, it will still generate a blurry mess at 1500px wide. My solution was to include the images in the srcset list only if they were narrower than the original width.
......@@ -295,3 +295,4 @@ In the future, I could probably find a way to automate this, rather than creatin
I hope documenting all of this will help someone else. I’m sorry my code examples aren’t very pretty, and I’ve not yet got all the dashes in to wrangle the [whitespace in Go]( Just before this post was published, I also got social media meta images in the `<head>` of my pages generating at the right sizes, so let me know if that might be a useful snippet to blog too!
(Big thank you to [@jonathanulco on GitHub]( for sending me a pull request with the `alt=""` fallback for decorative images/images without alternative text.)
......@@ -45,4 +45,4 @@
{{ else }}
src="{{ $src.Permalink }}"
{{ end }}
{{ with .Get "alt" }}alt='{{.}}'{{ end }}>
\ No newline at end of file
{{- with .Get "alt" -}}alt="{{.}}"{{ else }}alt=""{{- end -}}>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment