a2b3c7fda2
* Update layout to use Hugo Image Processing. Created shortcode rimg that uses the srcset attribute to display responsive images. * Copy Static images to assets folder. * Add image processing to missing components + Update examples * Fix rendering in https://themes.gohugo.io/ Co-authored-by: Emruz Hossain <emruz@appscode.com>
25 lines
1.3 KiB
HTML
25 lines
1.3 KiB
HTML
{{ $achievementImage := resources.Get .image }}
|
|
{{ $achievementImageLg := ""}}
|
|
{{ $achievementImageSm := ""}}
|
|
|
|
{{/* resize the images. don't resize svg image because its not supported */}}
|
|
{{ if $achievementImage }}
|
|
{{ $achievementImageSm = $achievementImage.Resize "x300" }}
|
|
{{ $achievementImageSm = $achievementImageSm.RelPermalink }}
|
|
{{ $achievementImageLg = $achievementImage.Resize "x1500" }}
|
|
{{ $achievementImageLg = $achievementImageLg.RelPermalink }}
|
|
{{ end }}
|
|
{{/* don't use "background-image: url('{{ $achievementImageSm }}');" Otherwise the images won't show in https://themes.gohugo.io/ */}}
|
|
<div
|
|
class="achievement-entry text-center"
|
|
style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $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('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
|
|
<span style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
|
|
</div>
|