lumbung.space/themes/lumbung-theme/layouts/partials/shout_card.html

<div class='shout card {{ .Params.feed_name }} filter-item' data-section="{{ .Section }}" data-sources='{{- partial "data/sources.html" . -}}' data-contributors='{{- partial "data/contributors.html" . -}}' data-tags='{{- partial "data/tags.html" . -}}'>
  <article class="h-entry shout">
    <header>
      {{ $postPermalink := .Permalink}}
      <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
      <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
    </header>
    
    <div class="shout-source"><span class="from p-author">From {{ if .Params.contributors }}<b>{{range .Params.contributors}} <a href='{{ "/contributors/" | relLangURL }}{{ . | urlize }}/'> {{ . }}</a> {{end}}</b> at {{ end }}<a href="{{ "/sources/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></span></div>

    {{ if .Params.featured_image }}
      {{ with $img := .Resources.GetMatch .Params.featured_image }}
      {{ $height := add $img.Height 0.0}}
      {{ $ratio := div $height $img.Width}}
      {{ $thumb := $img.Fit "540x540 q80 webp"}}
      <div class="p-summary{{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
        <div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}"> 
          <a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}"  alt="{{ .Title }}"> </a>
        </div>
      {{end}}
    {{ else if (.Resources.ByType "image") }}
      {{/* Somehow the image resources are iterated in reverse, so we need to get the last one*/}}
      {{ range last 1 (.Resources.ByType "image") }}
        {{ $img := . }}
        {{ $height := add .Height 0.0}}
        {{ $ratio := div $height .Width}}
        {{ $thumb := .Fit "540x540 q80 webp"}}
    <div class="p-summary{{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
      <div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}"> 
        <a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}"  alt="{{ .Title }}"> </a>
      </div>
      {{ end }}
    {{ else }}
      <div class="p-summary">
      {{ end }}
      <div class="summary-text">
        {{ .Summary }}
      </div>
    </div>
  
    <footer class='post-footer'>
      <a href="{{ .RelPermalink }}">
        <svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
        </svg>
      </a>
    </footer>            
  </article>
</div>