hugo/layouts/section/showcase.html

{{define "main"}}
<main class="main showcase-list">
		<header class="content-header">
		{{partial "breadcrumb.html" . }}
		<h1 class="page-title {{if eq .Kind "page"}}{{.Section}}{{end}}" id="{{with .LinkTitle}}{{. | urlize}}{{else}}{{ .Title | urlize }}{{end}}">{{with .LinkTitle}}{{.}}{{else}}{{ .Title | markdownify }}{{end}}</h1>
		{{.Content}}
		</header>
		<ul id="showcase">
		{{- range .Data.Pages.ByPublishDate.Reverse -}}
		{{$title := .Title | markdownify}}
		{{$img := .Params.image}}
			<li class="showcase-site">
			<div class="image-wrapper">
				<a href="{{.Params.sitelink}}" target="_blank">
				<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/showcase/{{$img}}" alt="Screenshot thumbnail for the website {{.Title}}, {{.Description}}" class="b-lazy">
				</a>
			</div>
			<div class="showcase-meta">
				<div class="showcase-links">
					{{with .Params.sitelink}}
						<span class="showcase-title"><a href="{{.}}" target="_blank">{{$title}}</a></span>
					{{else}}
						<h3>{{$title}}</h3>
					{{end}}
					{{with .Params.sourcelink}}
						<span class="showcase-source"><a href="{{.}}" target="_blank">&nbsp;Source</a></span>
					{{end}}
				</div>
				{{- with .Params.tags -}}
				<ul class="tags showcase-tags">
					<li class="tags-icon-li"><i class="icon-tags"></i></li>
					{{- range . -}}
					<li><a href="/tags/{{. | urlize}}">{{.}}</a></li>
					{{- end -}}
				</ul>
				{{- end -}}
			</div>
			</li>
		{{- end -}}
		</ul>
</main>
{{end}}

{{ define "addscripts" }}
<script src="{{ "js/vendor/blazy.min.js" | relURL}}" async defer></script>
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/blazy/1.8.2/blazy.min.js"></script>
<script>var bLazy = new Blazy();</script> -->
{{ end }}