1
Fork 0
theorangeone.net-legacy/layouts/partials/list_item.html
Jake Howard 73bea50756
Reduce size of images on list page
It maxes out at ~220 anyway, and 200 is how large the unsplash images are anyway
2022-01-03 14:52:13 +00:00

28 lines
1.3 KiB
HTML

<div class="media list-page-item mb-3" data-id="{{ .File.UniqueID }}">
{{ if .Params.image }}
<div class="d-none d-md-block align-self-center img-wrapper mr-3">
<a href="{{ .RelPermalink }}" title="{{ .Title }}">
{{ .Scratch.Set "image" .Params.image }}
{{ if hasPrefix .Params.image "resource:" }}
{{ $resource := .Resources.GetMatch (replace .Params.image "resource:" "") }}
{{ .Scratch.Set "image" ($resource.Resize "200x webp").RelPermalink }}
{{ else if hasPrefix .Params.image "unsplash:" }}
{{ $unsplash_id := replace .Params.image "unsplash:" "" }}
{{ $query := querify "client_id" (getenv "UNSPLASH_ACCESS_KEY") }}
{{ $unsplash_data := (getJSON "https://api.unsplash.com/photos/" $unsplash_id "?" $query )}}
{{ .Scratch.Set "image" $unsplash_data.urls.thumb }}
{{ end }}
<img src='{{ .Scratch.Get "image" }}' decoding="async" loading="lazy" referrerpolicy="no-referrer" alt="" />
</a>
</div>
{{ end }}
<div class="media-body">
<h3 class="my-0 h5">
<a href="{{ .RelPermalink }}" title="{{ .Title }}">
{{ .Title }}
</a>
</h3>
<small>{{ partial "content-details.html" . }}</small>
<p>{{ partial "summary.html" . }}</p>
</div>
</div>