Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Picture + webp #649

Closed
wants to merge 4 commits into from
Closed

Picture + webp #649

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
759982f
Picture + webp
stereobooster Sep 11, 2023
86dd657
Add configuration flag
stereobooster Sep 12, 2023
9b64aa8
Extracted picture partial
stereobooster Sep 12, 2023
74f82da
Option to explicitly path resource
stereobooster Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions exampleSite/config/_default/params.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ autoSwitchAppearance = true
enableSearch = true
enableCodeCopy = true
enableImageLazyLoading = true
enableWebp = true

# robots = ""
fingerprintAlgorithm = "sha256"
Expand Down
4 changes: 4 additions & 0 deletions exampleSite/content/samples/markdown/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ This article offers a sample of basic Markdown formatting that can be used in Co

<!--more-->

## Image

![sample image](thumb-surendran-mp-IhWYiwSxm8g-unsplash.jpg)

## Headings

The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
Expand Down
61 changes: 41 additions & 20 deletions layouts/_default/_markup/render-image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
{{ $altText := .Text }}
{{ $caption := .Title }}
{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
{{ $webp := $.Page.Site.Params.enableWebp | default true }}
{{ if findRE "^https?" $url.Scheme }}
<figure>
<img
Expand All @@ -23,29 +24,49 @@
{{ end }}
{{ with $resource }}
<figure>
<img
class="mx-auto my-0 rounded-md"
{{ if eq .MediaType.SubType "svg" }}
src="{{ .RelPermalink }}"
{{ else }}
width="{{ .Width }}"
height="{{ .Height }}"
{{ if lt .Width 660 }}
<picture>
{{ if (and (ne .MediaType.SubType "svg") $webp) }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this break svg support?
I'm probably wrong, but in my mind, This evaluation is
if ( (not svg) AND $webp (which is a param bool) )
which I THINK would undesirably evaluate false in the case of:
is_svg? -> true
webp = false

I could be wrong tho.... I'm wrong a lot.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it will evaluate to false. But this branch is not meant for SVG. SVG is displayed in other branches

Copy link
Contributor Author

@stereobooster stereobooster Oct 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since I wrote this code I come with more advanced and cleaner solution:

I asked author if they want it to be integrated

<source
{{ if lt .Width 660 }}
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
src="{{ .RelPermalink }}"
{{ end }}
{{ else }}
srcset="
{{- (.Resize "330x webp").RelPermalink }} 330w,
{{- (.Resize "660x webp").RelPermalink }} 660w,
{{- (.Resize "1024x webp").RelPermalink }} 1024w,
{{- (.Resize "1320x webp").RelPermalink }} 2x"
src="{{ (.Resize "660x webp").RelPermalink }}"
{{ end }}
type="image/webp"
/>
{{ end }}
<img
class="mx-auto my-0 rounded-md"
{{ if eq .MediaType.SubType "svg" }}
src="{{ .RelPermalink }}"
{{ else }}
srcset="
{{- (.Resize "330x").RelPermalink }} 330w,
{{- (.Resize "660x").RelPermalink }} 660w,
{{- (.Resize "1024x").RelPermalink }} 1024w,
{{- (.Resize "1320x").RelPermalink }} 2x"
src="{{ (.Resize "660x").RelPermalink }}"
width="{{ .Width }}"
height="{{ .Height }}"
decoding="async"
{{ if lt .Width 660 }}
src="{{ .RelPermalink }}"
{{ else }}
srcset="
{{- (.Resize "330x").RelPermalink }} 330w,
{{- (.Resize "660x").RelPermalink }} 660w,
{{- (.Resize "1024x").RelPermalink }} 1024w,
{{- (.Resize "1320x").RelPermalink }} 2x"
src="{{ (.Resize "660x").RelPermalink }}"
{{ end }}
{{ end }}
{{ end }}
alt="{{ $altText }}"
{{ if $lazyLoad }}
loading="lazy"
{{ end }}
/>
alt="{{ $altText }}"
{{ if $lazyLoad }}
loading="lazy"
{{ end }}
/>
</picture>
{{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{ else }}
Expand Down