michaelh/hugo-academic-mirror
1
0
Fork 0
mirror of https://github.com/gcushen/hugo-academic.git synced 2025-07-25 10:50:50 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: support animated featured images (GIFs)

Browse source 
Add support for animated GIFs (e.g. featured.gif) in instances of the featured image in page header and all views
This commit is contained in:
George Cushen 2023-10-19 18:28:01 +01:00
commit b70eaa9c6b
5 changed files with 15 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

7
modules/wowchemy/layouts/partials/page_header.html
View file

@ -50,14 +50,15 @@
{{ $image_container := "" }}
{{ if eq $placement 2}}
{{ $image_container = "container" }}
{{ $image = $featured.Fit "1200x2500 webp" }}
{{ $image = $featured.Fit "1200x2500" }}
{{else if eq $placement 3}}
{{ $image_container = "container-fluid" }}
{{ $image := $featured.Fit "2560x2560 webp" }}
{{ $image := $featured.Fit "2560x2560" }}
{{else}}
{{ $image_container = "article-container" }}
{{ $image = $featured.Fit "720x2500 webp" }}
{{ $image = $featured.Fit "720x2500" }}
{{end}}
{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
<div class="article-container pt-3">
<h1>{{ $title }}</h1>

3
modules/wowchemy/layouts/partials/views/card.html
View file

@ -44,7 +44,8 @@
{{ $resource := partial "functions/get_featured_image.html" $item }}
{{ $anchor := $item.Params.image.focal_point | default "Smart" }}
{{ with $resource }}
{{ $image := .Fill (printf "808x455 webp %s" $anchor) }}
{{ $image := .Fill (printf "808x455 %s" $anchor) }}
{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>
<div class="img-hover-zoom">
<img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"

3
modules/wowchemy/layouts/partials/views/compact.html
View file

@ -76,7 +76,8 @@
<div class="ml-3">
{{ $resource := partial "functions/get_featured_image.html" $item }}
{{ with $resource }}
{{ $image := .Resize "150x webp" }}
{{ $image := .Resize "150x" }}
{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
<a href="{{$link}}" {{ $target | safeHTMLAttr }}>
<img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
alt="{{ $item.Title }}" loading="lazy">

3
modules/wowchemy/layouts/partials/views/masonry.html
View file

@ -22,7 +22,8 @@
<div class="card">
{{ with $resource }}
{{ $image := .Resize "550x webp" }}
{{ $image := .Resize "550x" }}
{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
<a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay">
<img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
alt="{{ $item.Title }}" class="img-responsive" loading="lazy">

7
modules/wowchemy/layouts/partials/views/showcase.html
View file

@ -56,10 +56,13 @@
{{ $resource := partial "functions/get_featured_image.html" $item }}
{{ with $resource }}
{{ $image := .Resize "540x webp" }}
{{/* Use CSS to expand images to consistent widths rather than just Hugo as Hugo can significantly increase the
filesize of GIFs when processing them, e.g. 400kB --> 1.5MB */}}
{{ $image := . }}
{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "resize 540x webp" }}{{ end }}
{{if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{end}}
<img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
alt="{{ $item.Title }}" loading="lazy">
alt="{{ $item.Title }}" loading="lazy" style="width: 540px; height: auto; object-fit: cover;">
{{if $do_link}}</a>{{end}}
{{end}}
</div>