{{ $image := index (.Params.images) 0 }}
{{ with $image }}
  {{ if in (print $.Site.BaseURL) "localhost" }}
    <img data-src="{{ . }}" src="/images/placeholder.svg" class="lazyload mw-100">
  {{ else }}
    {{ $img := replace . "/uploads" ($.Param "dev.image_url")  }}
    <picture>
      <source data-srcset="{{ $img }}?{{ (querify "w" "1280") | safeURL }}" media="(min-width: 1024px)">
      <source data-srcset="{{ $img }}?{{ (querify "w" "768" "h" "474" "fit" "crop") | safeURL }}" media="(min-width: 768px)">
      <source data-srcset="{{ $img }}?{{ (querify "w" "568" "h" "351" "fit" "crop") | safeURL }}" media="(min-width: 480px)">
      <img src="/images/placeholder.svg" data-src="{{ $img }}?{{ (querify "w" "400" "h" "247" "fit" "crop") | safeURL }}" class="lazyload max-w-full">
    </picture>
  {{ end }}
{{ end }}

{{ $image := index (.Params.images) 0 }}
{{ with $image }}
  {{ if in (print $.Site.BaseURL) "localhost" }}
    <img data-src="{{ . }}" src="/images/placeholder.svg" class="lazyload mw-100">
  {{ else }}
    {{ $img := replace . "/uploads" ($.Param "dev.image_url")  }}
    <picture>
      <source data-srcset="{{ $img }}?{{ (querify "w" "981" "h" "606" "fit" "crop") | safeURL }}" media="(min-width: 768px)">
      <source data-srcset="{{ $img }}?{{ (querify "w" "568" "h" "351" "fit" "crop") | safeURL }}" media="(min-width: 480px)">
      <img src="/images/placeholder.svg" data-src="{{ $img }}?{{ (querify "w" "400" "h" "247" "fit" "crop") | safeURL }}" class="lazyload max-w-full">
    </picture>
  {{ end }}
{{ end }}

Make max-image size more relevant
Make max-image size more relevant

We won't be using any full-screen images here. Ref #34
