Include alt attribute to thumbnail

LucasVadilho

17.06.2020 8765dbbedeb154cc92b79c3802b8fbfb25d7be2e

Include alt attribute to thumbnail

The thumbnail param is now an array that must contain `src`. The `alt` value is optional and defaults to empty string.

 exampleSite/content/post/emoji-support.md

@@ -6,7 +6,9 @@
tags = [
    "emoji",
]
thumbnail = "http://placeimg.com/150/150/any?2"
[thumbnail]
    src = "http://placeimg.com/150/150/any?2"
    alt = "Thumbnail image"
+++

Emoji can be enabled in a Hugo project in a number of ways. 

 exampleSite/content/post/markdown-syntax.md

@@ -15,7 +15,9 @@
]
series = ["Themes Guide"]
aliases = ["migrate-from-jekyl"]
thumbnail = "http://placeimg.com/150/150/any?1"
[thumbnail]
  src = "http://placeimg.com/150/150/any?1"
  alt = "Thumbnail image"
+++

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

 exampleSite/content/post/rich-content.md

@@ -7,7 +7,9 @@
    "shortcodes",
    "privacy",
]
thumbnail = "http://placeimg.com/150/150/any?3"
[thumbnail]
    src = "http://placeimg.com/150/150/any?3"
    alt = "Thumbnail image"
+++

Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.

 layouts/index.html

@@ -26,9 +26,9 @@
                    </div>
                </div>
            </div>
            {{ if isset .Params "thumbnail" }}
            {{ with .Params.thumbnail }}
            <div class="thumbnail">
                <img src="{{ .Params.thumbnail | absURL }}" loading="lazy">
                <img src="{{ .src | absURL }}" alt="{{ .alt | default "" }}" loading="lazy">
            </div>
            {{ end }}
        </div>