Update layout to use Hugo Image Processing.
Created shortcode rimg that uses the srcset attribute to display responsive images.
This commit is contained in:
parent
ba1d6014d9
commit
49cb1042ea
10 changed files with 218 additions and 20 deletions
|
@ -1,6 +1,16 @@
|
|||
<div
|
||||
{{ $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('{{ strings.TrimSuffix "/" site.BaseURL }}{{ .image | relURL }}');"
|
||||
style="background-image: url('{{ $achievementImageSm }}');"
|
||||
>
|
||||
<i class="fas fa-search-plus" id="enlarge-icon"></i>
|
||||
<h4 class="title" id="achievement-title">{{ .title }}</h4>
|
||||
|
@ -8,4 +18,6 @@
|
|||
<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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue