Alternative thumbnail

Alexander Bilz

18.25.2020 bfdb0e60d51b1669f11a308826b3d15385cf7f05

Alternative thumbnail

 assets/css/style.css

@@ -488,6 +488,17 @@
    max-height: 100%;
}

/* Alternative Thumbnail */
.post-thumbnail {
    width: 100%;
    padding-bottom: 1em;
    height: auto;
}

.post-thumbnail img {
    width: 100%;
}

.pagination {
    margin: 30px;
    padding: 0px 0 56px 0;

 exampleSite/content/post/emoji-support.md

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


 exampleSite/content/post/markdown-syntax.md

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


 exampleSite/content/post/rich-content.md

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


 layouts/index.html

@@ -3,6 +3,11 @@
    {{ range $paginator.Pages }}
        <div class="post animated fadeInDown preview">
            <div class="post-text">
                {{ with .Params.thumbnail }}
                    <div class="post-thumbnail">
                        <img src="{{ .src | absURL }}" alt="{{ .alt | default "" }}" loading="lazy">
                    </div>
                {{ end }}
                <div class="post-title">
                    <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a>
                    </h3>
@@ -26,11 +31,6 @@
                    </div>
                </div>
            </div>
            {{ if isset .Params "thumbnail" }}
            <div class="thumbnail">
                <img src="{{ .Params.thumbnail | absURL }}" loading="lazy">
            </div>
            {{ end }}
        </div>
    {{ end }}
    <div class="pagination">