Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 03:53:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(gallery): calculate flex-basis & flex-grow on generation

Browse Source 
Reduce layout shift
This commit is contained in:
Jimmy Cai 2020-12-22 19:24:41 +01:00
parent 69cd9343a0
commit 474d7911e8
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
2 changed files with 2 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/ts/gallery.ts
View File

@ -83,8 +83,7 @@ class StackGallery {
} }
/** /**
* Wrap adjacent figure tags with div.gallery, and append style * Wrap adjacent figure tags with div.gallery
* Reference: https://github.com/xieranmaya/blog/issues/6
* @param figures * @param figures
*/ */
public static wrap(figures: HTMLElement[]) { public static wrap(figures: HTMLElement[]) {
@ -97,12 +96,6 @@ class StackGallery {
parentNode.insertBefore(galleryContainer, first) parentNode.insertBefore(galleryContainer, first)
for (const figure of figures) { for (const figure of figures) {
const width = figure.querySelector('img').width,
height = figure.querySelector('img').height;
figure.style.flexGrow = `${width * 100 / height}`;
figure.style.flexBasis = `${width * 240 / height}px`;
galleryContainer.appendChild(figure); galleryContainer.appendChild(figure);
} }
} }

2
layouts/_default/_markup/render-image.html
View File

@ -7,7 +7,7 @@
{{- with $alt -}} {{- with $alt -}}
{{- $caption = . | safeHTML -}} {{- $caption = . | safeHTML -}}
{{- end -}} {{- end -}}
<figure> <figure style="flex-grow: {{ $image.Width * 100 / $image.Height }}; flex-basis: {{ $image.Width * 240 / $image.Height }}">
<a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}"> <a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}">
<img srcset="{{ $small.RelPermalink }} 480w, {{ $big.RelPermalink }} 1024w" <img srcset="{{ $small.RelPermalink }} 480w, {{ $big.RelPermalink }} 1024w"
src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"