hugo-toha/layouts/partials/sections/achievements/entry.html
Patrick Magauran 3a77d4c703 Update layout to use Hugo Image Processing.
Created shortcode rimg that uses the srcset attribute to display responsive images.
2020-11-26 13:59:15 -05:00

23 lines
989 B
HTML

{{ $achievementImage:= resources.Get .image}}
{{ $achievementImageLg := ""}}
{{ $achievementImageSm := ""}}
{{ if $achievementImage }}
{{ $achievementImageSm = $achievementImage.Resize "x300" }}
{{ $achievementImageSm = $achievementImageSm.RelPermalink }}
{{ $achievementImageLg = $achievementImage.Resize "x1500" }}
{{ $achievementImageLg = $achievementImageLg.RelPermalink }}
{{ end }}
<div
class="achievement-entry text-center"
style="background-image: url('{{ $achievementImageSm }}');"
>
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">{{ .title }}</h4>
<div class="caption hidden col-lg-6 text-left" id="caption">
<h4>{{ .title }}</h4>
<p>{{ .summary | markdownify }}</p>
</div>
<span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
<span style="background-image: url('{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
</div>