hugo-toha/layouts/partials/sections/achievements/entry.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>