forked from pnp/blog
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🎨🐞🧼📦 optimize image processing for single posts
- remove image processing for unused images
- current theme only supports max content width of ~675px, soooo...
- removed processing for images never used (800px, 1200px, 1500px)
- refactored logic to determine featured image (ie: thumbnail)
for to standardized partial (**get-featured-image.html**)
- improved responsive images
- replaced prev 4x img processing (see above) w/ 2 default images
(mobile/desktop) with ideal optimization (webp)
- added fallback image for old browsers (jpeg)
- replaced image reference with simplified `<picture>` element
- theme code formatting
- changed single post rendering to use `partialCache` for widgets
- widgets (categories/tags/recent posts/social) aren't page unique,
so switch partial to cache so only gen once to optimize build
- updated `params.toml` with warning about personalized widget usage
- references pnp#144- Loading branch information
1 parent
72b4350
commit d3a8942
Showing
4 changed files
with
202 additions
and
178 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,38 @@ | ||
| {{ if findRE `^https?://` .Destination }} | ||
| <img src="{{ .Destination | safeURL }}" {{ with .Text }} alt="{{ . }}" {{ end }} {{ with .Title }} | ||
| title="{{ . }}" {{ end }} style="width:auto;"> | ||
| <img src="{{ .Destination | safeURL }}" style="width:auto;"{{ with .Text }} title="{{ . }}" alt="{{ . }}"{{ end }}> | ||
| {{ else }} | ||
| {{ $image := .Page.Resources.GetMatch .Destination }} | ||
| {{ if $image }} | ||
| {{ $image_ext := path.Ext $image.RelPermalink }} | ||
| {{ $image_width := $image.Width }} | ||
| {{ if (ne $image_ext ".gif") }} | ||
| {{ $tinyImage := $image.Resize "500x webp" }} | ||
| {{ $smallImage := $image.Resize "800x webp" }} | ||
| {{ $mediumImage := $image.Resize "1200x webp" }} | ||
| {{ $largeImage := $image.Resize "1500x webp" }} | ||
|
|
||
| {{ if .Title }} | ||
| <figure> | ||
| <picture> | ||
| <source media="(min-width:500px)" srcset={{ $smallImage.RelPermalink | safeURL }}> | ||
| <source media="(min-width:800px)" srcset={{ $mediumImage.RelPermalink | safeURL }}> | ||
| <source media="(min-width:1200px)" srcset={{ $largeImage.RelPermalink | safeURL }}> | ||
| <source media="(min-width:1500px)" srcset={{ .Destination | safeURL }}> | ||
| <img src="{{ $tinyImage.RelPermalink | safeURL }}" {{ with .Text }} alt="{{ . }}" {{ end }} {{ with .Title }} | ||
| title="{{ . }}" {{ end }} style="width:auto;"> | ||
| </picture> | ||
|
|
||
| {{ with .Title}} <figcaption>{{ . | markdownify }}</figcaption> {{ end }} | ||
| </figure> | ||
| {{ else }} | ||
| <picture> | ||
| <source media="(min-width:500px)" srcset={{ $smallImage.RelPermalink | safeURL }}> | ||
| <source media="(min-width:800px)" srcset={{ $mediumImage.RelPermalink | safeURL }}> | ||
| <source media="(min-width:1200px)" srcset={{ $largeImage.RelPermalink | safeURL }}> | ||
| <source media="(min-width:1500px)" srcset={{ .Destination | safeURL }}> | ||
| <img src="{{ $tinyImage.RelPermalink | safeURL }}" {{ with .Text }} alt="{{ . }}" {{ end }} style="width:auto;"> | ||
| </picture> | ||
| {{ end }} | ||
| {{ else }} | ||
| <img src="{{ $image.RelPermalink }}" {{ with .Text }} alt="{{ . }}" {{ end }} {{ with .Title }} | ||
| title="{{ . }}" {{ end }} style="width:auto;"> | ||
| {{ end }} | ||
| {{ $image := .Page.Resources.GetMatch .Destination }} | ||
| {{ if $image }} | ||
| {{/* if GIF, assume animated => don't resize*/}} | ||
| {{ if eq (path.Ext $image.RelPermalink) ".gif" }} | ||
| <img src="{{ $image.RelPermalink }}" style="width:auto;" {{ with .Text }} title="{{ . }}" alt="{{ . }}"{{ end }}> | ||
| {{/* else, resize to responsive breakpoints */}} | ||
| {{ else }} | ||
| <img src="{{ .Destination | safeURL }}" {{ with .Text }} alt="{{ . }}" {{ end }} {{ with .Title }} | ||
| title="{{ . }}" {{ end }} style="width:auto;"> | ||
| {{- $fallbackImage := $image.Resize "850x jpg" -}} | ||
| {{/* supported responsive image dimensions */}} | ||
| {{- $respSizes := slice "325" "675" -}} | ||
| {{- $sourceSizes := "(max-width: 400px) 325px, 675px" -}} | ||
| <figure> | ||
| <picture> | ||
| <source type="image/webp" | ||
| srcset="{{- with $respSizes -}} | ||
| {{- range $i, $e := . -}} | ||
| {{- if ge $image.Width . -}} | ||
| {{- if $i }}, {{ end -}}{{- ($image.Resize (printf "%sx%s" . " webp") ).RelPermalink }} {{ . }}w | ||
| {{- end -}} | ||
| {{- end -}} | ||
| {{- end -}}" | ||
| sizes="{{ $sourceSizes }}" | ||
| /> | ||
| <img src="{{ $fallbackImage.RelPermalink | safeURL }}" | ||
| style="width:auto;" loading="lazy" | ||
| width="{{ $image.Width }}" height="{{ $image.Height }}" | ||
| {{ with .Text }} title="{{ . }}" alt="{{ . }}"{{ end }}> | ||
| </picture> | ||
| {{ with .Title }}<figcaption>{{ . | markdownify }}</figcaption> {{ end }} | ||
| </figure> | ||
| {{ end }} | ||
| {{ else }} | ||
| <img src="{{ .Destination | safeURL }}" style="width:auto;" {{ with .Text }} title="{{ . }}" alt="{{ . }}"{{ end }}> | ||
| {{ end }} | ||
| {{ end}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.