Skip to content

Serve resized WebP images and lazy-load them #193

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

Closed
bendichter wants to merge 1 commit into from
Closed

Serve resized WebP images and lazy-load them #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,15 +431,15 @@ h6 {
}

/* Limit the maximum size of images in the about page */
section img[src*="Neurophysiology-min.png"] {
section img[src*="Neurophysiology-min"] {
width: 100% !important;
max-width: 800px !important;
margin: 0 auto !important;
display: block !important;
}

/* Limit the maximum size of pynapple graphic abstract image */
.content img[src*="pynapple/GraphicAbstract.png"] {
.content img[src*="pynapple/GraphicAbstract"] {
width: 100% !important;
max-width: 600px !important;
margin: 0 auto !important;
Expand All @@ -448,10 +448,10 @@ section img[src*="Neurophysiology-min.png"] {

/* Ensure the image is responsive on smaller screens */
@media (max-width: 900px) {
section img[src*="Neurophysiology-min.png"] {
section img[src*="Neurophysiology-min"] {
max-width: 95% !important;
}
.content img[src*="pynapple/GraphicAbstract.png"] {
.content img[src*="pynapple/GraphicAbstract"] {
max-width: 90% !important;
}
}
Expand Down
4 changes: 4 additions & 0 deletions hugo.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,7 @@ module:
mounts:
- source: assets
target: assets
# Lets templates resize images that live in static/images. See
# layouts/partials/img-src.html.
- source: static/images
target: assets/images
2 changes: 2 additions & 0 deletions layouts/_default/_markup/render-image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<img src="{{ partial "img-src.html" (dict "src" .Destination) }}" alt="{{ .PlainText }}"{{ with .Title }} title="{{ . }}"{{ end }} loading="lazy">
{{- /* chomp trailing newline */ -}}
10 changes: 5 additions & 5 deletions layouts/about-nwb/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h1 class="inter-700 text-48 text-white text-center">{{ .Title | markdownify }}<
<div class="d-flex flex-column flex-lg-row gap-4 container-lg mx-auto align-items-center justify-content-center justify-content-md-between">
<div class="col-12 col-sm-4 col-lg-3">
<div>
<img src="{{ .image }}" alt="" class="img-fluid">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid">
</div>
</div>
<div class="col-12 col-sm-8 col-lg-8">
Expand Down Expand Up @@ -42,7 +42,7 @@ <h3 class="dark-900 inter-700 text-40 mb-4">{{ .title | markdownify }}</h3>
</div>
<div class="col-12 col-sm-8 col-lg-6">
<div>
<img src="{{ .image }}" alt="" class="img-fluid">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid">
</div>
</div>
</div>
Expand Down Expand Up @@ -75,7 +75,7 @@ <h3 class="inter-700 text-40 dark-900">{{ .title | markdownify }}</h3>
<p class="inter-400 text-16 dark-700 mb-0">{{ . | markdownify }}</p>
{{ end }}
{{ with .image }}
<img src="{{ . }}" alt="nwb-neuro" class="img-fluid my-5">
<img src="{{ partial "img-src.html" (dict "src" . "width" 2000) }}" loading="lazy" alt="nwb-neuro" class="img-fluid my-5">
{{ end }}
{{ with .wide_image }}
<div class="wide-image-container">
Expand All @@ -100,7 +100,7 @@ <h3 class="inter-700 text-40 dark-900 text-center">{{ .title | markdownify }}</h
<div class="col-12 col-sm-6 col-md-4">
<div class="bg-white p-4 rounded-4 d-flex gap-4 h-100">
<div class="boxImg">
<img src="{{ .icon }}" alt="" width="36">
<img src="{{ partial "img-src.html" (dict "src" .icon "width" 108) }}" loading="lazy" alt="" width="36">
</div>
<div class="d-flex flex-column gap-2">
<strong class="inter-600 text-20 text-black mb-1">{{ .title | markdownify }}</strong>
Expand Down Expand Up @@ -132,7 +132,7 @@ <h3 class="inter-700 text-40 dark-900">{{ .title | markdownify }}</h3>
<p class="inter-400 text-18 dark-700 mb-0">{{ . | markdownify }}</p>
{{ end }}
{{ with .image }}
<img src="{{ . }}" alt="nwb-neuro" class="img-fluid my-5">
<img src="{{ partial "img-src.html" (dict "src" . "width" 2000) }}" loading="lazy" alt="nwb-neuro" class="img-fluid my-5">
{{ end }}
{{ with .wide_image }}
<div class="wide-image-container">
Expand Down
2 changes: 1 addition & 1 deletion layouts/archives/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
<a href="{{ .url }}" class="col-12 col-md-6" target="_blank">
<div class="bg-white h-100 rounded-3 p-4 shadow-sm">
<div class="d-flex flex-column flex-sm-row gap-4">
<img src="{{ .image }}" alt="{{ .title }}" width="80" height="80" class="flex-shrink-0" style="object-fit: contain;">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 240) }}" loading="lazy" alt="{{ .title }}" width="80" height="80" class="flex-shrink-0" style="object-fit: contain;">
<div class="">
<h5 class="inter-700 text-18 dark-900 mb-2">{{ .title | markdownify }}</h5>
<p class="inter-400 text-14 dark-700">{{ .content | markdownify }}</p>
Expand Down
4 changes: 2 additions & 2 deletions layouts/community/educators.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
{{ if .image }}
<div class="me-4 flex-shrink-0">
<a href="{{ .url }}" target="_blank">
<img src="{{ .image }}" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
</a>
</div>
{{ end }}
Expand Down Expand Up @@ -99,7 +99,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
{{ if .image }}
<div class="me-4 flex-shrink-0">
<a href="{{ .url }}" target="_blank">
<img src="{{ .image }}" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
</a>
</div>
{{ end }}
Expand Down
6 changes: 3 additions & 3 deletions layouts/community/gallery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
{{ if .image }}
<div class="me-4 flex-shrink-0">
<a href="{{ .url }}" target="_blank">
<img src="{{ .image }}" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
</a>
</div>
{{ end }}
Expand Down Expand Up @@ -71,7 +71,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
{{ if .image }}
<div class="me-4 flex-shrink-0">
<a href="{{ .url }}" target="_blank">
<img src="{{ .image }}" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="{{ .title }}" class="rounded-3 gallery-card-image" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.parentElement.parentElement.style.display='none';">
</a>
</div>
{{ end }}
Expand Down Expand Up @@ -106,7 +106,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
<div class="d-flex flex-row">
<div class="me-4">
<a href="{{ .url }}" target="_blank">
<img src="{{ .image }}" alt="{{ .title }}" class="rounded-3" style="width: 100px; height: 100px; object-fit: cover;">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 300) }}" loading="lazy" alt="{{ .title }}" class="rounded-3" style="width: 100px; height: 100px; object-fit: cover;">
</a>
</div>
<div class="flex-grow-1">
Expand Down
4 changes: 2 additions & 2 deletions layouts/contact-us/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
<a href=" {{ .url }}" class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="bg-white h-100 rounded-3 p-4 shadow-sm">
<div class="d-flex flex-column row-gap-4">
<img src="{{ .image }}" alt="" width="40">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 120) }}" loading="lazy" alt="" width="40">
<div class="">
<h5 class="inter-700 text-18 dark-900 mb-2">{{ .title | markdownify }}</h5>
<p class="inter-400 text-14 dark-700">{{ .content | markdownify }}</p>
Expand Down Expand Up @@ -54,7 +54,7 @@ <h3 class="inter-700 text-40 dark-900 mb-3">{{ .title | markdownify }}</h3>
<div class="rounded-3 shadow-sm p-3 h-100">
<div class="mx-auto text-center d-flex flex-column justify-content-center align-items-center">
<div>
<img src="{{ .icon }}" alt="" width="100">
<img src="{{ partial "img-src.html" (dict "src" .icon "width" 300) }}" loading="lazy" alt="" width="100">
</div>
<div>
<p class="inter-400 lighter text-14 mb-2">{{ .title | markdownify }}</p>
Expand Down
2 changes: 1 addition & 1 deletion layouts/convert/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ <h3 class="inter-700 dark-900 text-36">Available Tools</h3>
<div class="d-flex flex-column row-gap-4">
<div class="d-flex align-items-center gap-4">
{{ with .icon }}
<img src="{{ . }}" alt="" width="60">
<img src="{{ partial "img-src.html" (dict "src" . "width" 180) }}" loading="lazy" alt="" width="60">
{{ end }}
{{ with .title }}
<h3 class="inter-700 text-28 dark-900 mb-0 mt-2">{{ . | markdownify }}</h3>
Expand Down
4 changes: 2 additions & 2 deletions layouts/enhancement-proposals/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h4 class="inter-600 text-20 dark-900">{{ . | markdownify }}</h4>
{{ range $i, $p := .items }}
<div class="d-flex gap-3 ms-1 {{ if eq $i 0 }}pt-4{{ else }}pt-3{{ end }}">
<div>
<img src="{{ .icon }}" alt="" width="20">
<img src="{{ partial "img-src.html" (dict "src" .icon "width" 60) }}" loading="lazy" alt="" width="20">
</div>
<div>
{{ if .heading }}
Expand All @@ -44,7 +44,7 @@ <h4 class="inter-600 text-20 dark-900">{{ . | markdownify }}</h4>
{{ range $index, $params := .nested_list }}
<div class="d-flex gap-3 ms-1 {{ if eq $index 0 }}pt-4{{ else }}pt-3{{ end }}">
<div>
<img src="{{ .icon }}" alt="" width="20">
<img src="{{ partial "img-src.html" (dict "src" .icon "width" 60) }}" loading="lazy" alt="" width="20">
</div>
<div>
<a href="{{ .link }}" class="inter-600 text-16 blue nav-link">{{ .heading | markdownify }}</a>
Expand Down
2 changes: 1 addition & 1 deletion layouts/event-cards/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify
<div class="container-lg">
<div class="row justify-content-center justify-content-md-between gy-5 g-md-0 align-items-center">
<div class="col-sm-8 col-md-4">
<img src="{{ .image }}" alt="" class="img-fluid">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid">
</div>
<div class="col-sm-8 col-md-7">
<h3 class="inter-700 text-48 dark-900 mb-4">{{ .title | markdownify }}</h3>
Expand Down
2 changes: 1 addition & 1 deletion layouts/events/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ <h1 class="inter-700 text-48 text-white text-center">{{ .title | markdownify }}<
<p class="dark-700 text-16 inter-400 lh-md mb-4">{{ .content | markdownify }}</p>
</div>
<div class="col-12 col-md-4">
<img src="{{ .image }}" alt="NWB Events" class="img-fluid">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="NWB Events" class="img-fluid">
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion layouts/events/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify
<div class="bg-white p-4 rounded-3 shadow-sm">
{{ if .Params.image }}
<div class="mb-4">
<img src="{{ .Params.image }}" alt="{{ .Title }}" class="img-fluid rounded-3 w-100">
<img src="{{ partial "img-src.html" (dict "src" .Params.image "width" 2000) }}" alt="{{ .Title }}" class="img-fluid rounded-3 w-100">
</div>
{{ end }}
<div class="d-flex flex-wrap gap-4 mb-4">
Expand Down
6 changes: 3 additions & 3 deletions layouts/grants-and-projects/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h4 class="inter-600 text-32 dark-900 pb-3">{{ .title | markdownify }}</h4>
<p class="inter-400 text-16 dark-700">{{ .content | markdownify }}</p>
</div>
<div class="col-sm-10 col-md-5">
<img src="{{ .image }}" alt="" class="img-fluid rounded-3">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-3">
</div>
</div>
{{ end }}
Expand Down Expand Up @@ -134,7 +134,7 @@ <h3 class="inter-700 text-48 dark-900 text-center mb-5">Past Projects</h3>
<div
class="row justify-content-center justify-content-md-between {{ if not (modBool $i 2) }}flex-row-reverse{{ end }}">
<div class="col-sm-10 col-md-5 mb-4 mb-md-0">
<img src="{{ .image }}" alt="" class="img-fluid rounded-3">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-3">
</div>
<div class="col-sm-10 col-md-6">
<h4 class="inter-600 text-32 dark-900 mb-4">{{ .title | markdownify }}</h4>
Expand Down Expand Up @@ -163,7 +163,7 @@ <h4 class="inter-600 text-36 dark-900 mb-3">{{ .title | markdownify }}</h4>
<p class="inter-400 text-16 dark-700">{{ .content | markdownify }}</p>
</div>
<div class="pt-3">
<img src="{{ .image }}" alt="" class="img-fluid rounded-3">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="" class="img-fluid rounded-3">
</div>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ <h1 class="inter-700 text-white text-48-responsive">{{ .title | markdownify }}</
<div class="col-12 col-sm-6 col-lg-3 mx-auto px-0 px-sm-2">
<div
class="rounded-3 px-5 py-4 d-flex flex-column justify-content-between align-items-center aboutBox animate h-100 row-gap-4">
<img src="{{ .image }}" alt="about-nwb" width="64">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 192) }}" loading="lazy" alt="about-nwb" width="64">
<div class="h-25">
<p class="inter-600 text-20 text-center mb-0">{{ .title | markdownify }}</p>
</div>
Expand All @@ -86,7 +86,7 @@ <h1 class="inter-700 text-white text-48-responsive">{{ .title | markdownify }}</
<section class="section w-100 h-100 pt-0">
<div class="container-lg row mx-auto justify-content-between">
<div class="col-12 col-md-5 rounded-3 px-0 mb-5 mb-md-0">
<img src="{{ .image }}" alt="nwb-portfolio" class="w-100">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 1400) }}" loading="lazy" alt="nwb-portfolio" class="w-100">
</div>
<div class="col-12 col-md-6 d-flex flex-column gap-4 px-0">
<h3 class="inter-700 text-40 mb-0">{{ .heading | markdownify }}</h3>
Expand All @@ -96,7 +96,7 @@ <h3 class="inter-700 text-40 mb-0">{{ .heading | markdownify }}</h3>
<div class="d-flex gap-3 ms-1 ms-md-0">
{{ range .logos }}
<div class="p-1 shadow-sm rounded-3 achiImg">
<img src="{{ .logo }}" alt="nwb-achivements" class="img-fluid">
<img src="{{ partial "img-src.html" (dict "src" .logo "width" 240) }}" loading="lazy" alt="nwb-achivements" class="img-fluid">
</div>
{{ end }}
</div>
Expand Down Expand Up @@ -154,7 +154,7 @@ <h2 class="text-white inter-700 text-40 mb-0 text-center text-md-start">Latest N
<div class="swiper-slide">
<div class="shadow">
<div class="shadow-sm">
<img src="{{ .Params.image }}" alt="" class="rounded-top-3" style="width: 100% !important; height: 240px !important; object-fit: cover !important;">
<img src="{{ partial "img-src.html" (dict "src" .Params.image "width" 900) }}" loading="lazy" alt="" class="rounded-top-3" style="width: 100% !important; height: 240px !important; object-fit: cover !important;">
</div>
<div class="h-40 p-4 bg-main rounded-bottom-3 d-flex flex-column gap-3">
<div class="d-flex gap-2 align-items-center">
Expand Down Expand Up @@ -208,7 +208,7 @@ <h3 class="inter-600 text-24 text-center">Current Sponsors</h3>
{{ range .logos }}
<div class="logo clients">
<a href="{{ .link }}" target="_blank">
<img src="{{ .image }}" alt="Logo 1">
<img src="{{ partial "img-src.html" (dict "src" .image "width" 400) }}" loading="lazy" alt="Logo 1">
</a>
</div>
{{ end }}
Expand Down
Loading
Loading