From 2a5bf8ee761ab2ad53341ea9cc0d1d68a8ad8158 Mon Sep 17 00:00:00 2001 From: Daniel Nitsikopoulos Date: Sun, 25 Feb 2024 13:23:26 +1100 Subject: [PATCH] Lazy loading of images --- slices/admin/templates/shared/_post.html.slim | 2 +- slices/main/templates/podcasts/index.html.slim | 2 +- slices/main/templates/posts/show.html.slim | 10 +++++----- slices/main/templates/shared/_photo_post.html.slim | 4 ++-- slices/main/templates/shared/_post.html.slim | 2 +- slices/main/templates/shared/_status.html.slim | 2 +- slices/main/templates/site/home.html.slim | 2 +- slices/main/templates/timemachine/show.html.slim | 2 +- 8 files changed, 13 insertions(+), 13 deletions(-) diff --git a/slices/admin/templates/shared/_post.html.slim b/slices/admin/templates/shared/_post.html.slim index 37d73a5..8f7c17a 100644 --- a/slices/admin/templates/shared/_post.html.slim +++ b/slices/admin/templates/shared/_post.html.slim @@ -12,7 +12,7 @@ div class="flex-initial w-full" div class="e-content prose-p:mb-0 prose-img:my-2 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline p-name text-base prose prose-ul:list-none prose-ul:pl-0 prose-li:pl-0 text-gray-800 dark:text-gray-200 prose-a:dark:text-gray-100" div class="grid gap-4 grid-flow-row grid-cols-4 grid-rows-1" -post.photos.each do |photo| - img class="w-44 h-44 object-cover rounded" src=photo["value"] + img loading="lazy" class="w-44 h-44 object-cover rounded" src=photo["value"] p class="text-sm text-blue-400" a href="/post/#{post.slug}" diff --git a/slices/main/templates/podcasts/index.html.slim b/slices/main/templates/podcasts/index.html.slim index 586d597..f18efb0 100644 --- a/slices/main/templates/podcasts/index.html.slim +++ b/slices/main/templates/podcasts/index.html.slim @@ -21,7 +21,7 @@ div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark: - podcasts.each do |podcast| tr td - img class="w-14 m-0 p-0 rounded" src="#{Hanami.app.settings.micropub_site_url}/media/podcast_art/#{podcast.overcast_id}.jpg" + img loading="lazy" class="w-14 m-0 p-0 rounded" src="#{Hanami.app.settings.micropub_site_url}/media/podcast_art/#{podcast.overcast_id}.jpg" td class="p-0 align-middle" a class="block" href="#{podcast.url}" = podcast.name diff --git a/slices/main/templates/posts/show.html.slim b/slices/main/templates/posts/show.html.slim index eaefcf8..7b08fb6 100644 --- a/slices/main/templates/posts/show.html.slim +++ b/slices/main/templates/posts/show.html.slim @@ -11,7 +11,7 @@ article class="h-entry" svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"> div class="p-2 text-center w-full" - img class="rounded object-contain h-1/2-screen shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4 mx-auto" :src="imgModalSrc" :alt="imgModalSrc" + img loading="lazy" class="rounded object-contain h-1/2-screen shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4 mx-auto" :src="imgModalSrc" :alt="imgModalSrc" p x-text="imgModalDesc" class="text-center text-white" div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200" h1 class="p-name mb-2" @@ -31,7 +31,7 @@ article class="h-entry" - if post.photos? - post.photos.each_with_index do |photo, idx| figure id="photo-#{idx}" - img class="u-photo shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" src=photo["value"] alt=photo["alt"] + img loading="lazy" class="u-photo shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" src=photo["value"] alt=photo["alt"] figcaption = photo["alt"] - if post.videos? @@ -44,14 +44,14 @@ article class="h-entry" - if post.location - img class="shadow-solid shadow-pink-100 dark:shadow-pink-200 rounded mb-4" src=post.large_map + img loading="lazy" class="shadow-solid shadow-pink-100 dark:shadow-pink-200 rounded mb-4" src=post.large_map -if post.webmentions && post.webmentions.count > 0 div class="mt-12" h3 #{post.webmentions.count} Comment#{post.webmentions.count != 1 ? "s" : ""} - post.webmentions.each do |mention| div class="prose-p:m-1 mb-6 p-8 bg-orange-100 dark:bg-indigo-900 squircle" div class="flex h-8" - img class="w-8 rounded-full m-0 mr-2" src=mention.author_photo + img loading="lazy" class="w-8 rounded-full m-0 mr-2" src=mention.author_photo a class="block text-orange-700 dark:text-violet-300 no-underline hover:underline" href=mention.author_url = mention.author_name div class="prose dark:prose-invert dark:text-indigo-250 prose-a:text-orange-700 dark:prose-a:text-violet-300 prose-a:no-underline hover:prose-a:underline" @@ -77,7 +77,7 @@ article class="h-entry" - past_movies.map do |movie| a href=movie.url figure class="w-24" - img class="rounded hover:opacity-80" src=movie.poster + img loading="lazy" class="rounded hover:opacity-80" src=movie.poster / figcaption= movie.title hr - if text_posts.count > 0 || photo_posts.count > 0 diff --git a/slices/main/templates/shared/_photo_post.html.slim b/slices/main/templates/shared/_photo_post.html.slim index c6f1212..d2837d0 100644 --- a/slices/main/templates/shared/_photo_post.html.slim +++ b/slices/main/templates/shared/_photo_post.html.slim @@ -2,8 +2,8 @@ - post.photos.each_with_index do |photo, idx| div class="rounded max-w-xs" a href="#{post.permalink}#photo-#{idx}" - img class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{photo["value"]}" alt="#{photo["alt"]}" + img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{photo["value"]}" alt="#{photo["alt"]}" - else div class="rounded max-w-xs" a href="#{post.permalink}" - img class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{post.photos[0]["value"]}" alt="#{post.photos[0]["alt"]}" \ No newline at end of file + img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{post.photos[0]["value"]}" alt="#{post.photos[0]["alt"]}" \ No newline at end of file diff --git a/slices/main/templates/shared/_post.html.slim b/slices/main/templates/shared/_post.html.slim index e2dc7e4..103f6a9 100644 --- a/slices/main/templates/shared/_post.html.slim +++ b/slices/main/templates/shared/_post.html.slim @@ -6,7 +6,7 @@ div class="mb-8 h-entry" == post.excerpt div class="grid gap-4 grid-flow-row grid-cols-#{post.photos.count} grid-rows-1" -post.photos.each do |photo| - img class="w-44 h-44 object-cover rounded" src=photo["value"] + img loading="lazy" class="w-44 h-44 object-cover rounded" src=photo["value"] / == render "shared/tags", tags: post.tags p class="text-sm text-blue-400 dark:text-indigo-400" diff --git a/slices/main/templates/shared/_status.html.slim b/slices/main/templates/shared/_status.html.slim index 8cdc566..8384501 100644 --- a/slices/main/templates/shared/_status.html.slim +++ b/slices/main/templates/shared/_status.html.slim @@ -4,7 +4,7 @@ div class="mb-8 h-entry border border-gray-200 m-2 p-4 bg-gray-50 hover:bg-gray- == " 💬 #{post.raw_content}" div class="grid gap-4 grid-flow-row grid-cols-4 grid-rows-1" -post.photos.each do |photo| - img class="w-32 h-32 object-cover rounded" src=photo["value"] + img loading="lazy" class="w-32 h-32 object-cover rounded" src=photo["value"] == render "shared/tags", tags: post.tags div class="mb-8" diff --git a/slices/main/templates/site/home.html.slim b/slices/main/templates/site/home.html.slim index 977247d..7e0dc8c 100644 --- a/slices/main/templates/site/home.html.slim +++ b/slices/main/templates/site/home.html.slim @@ -12,7 +12,7 @@ div class="mb-8 max-w-screen-md mx-auto border-t border-solid border-gray-200 da a class="u-url block my-auto hover:underline decoration-wavy" href=latest_status.permalink span class="e-content status-body" - if latest_status.key_image - img class="float-start max-w-32 rounded mr-2" src=latest_status.key_image + img loading="lazy" class="float-start max-w-32 rounded mr-2" src=latest_status.key_image p == latest_status.raw_content - latest_status.syndicated_to.each do |loc| diff --git a/slices/main/templates/timemachine/show.html.slim b/slices/main/templates/timemachine/show.html.slim index 6071561..070787e 100644 --- a/slices/main/templates/timemachine/show.html.slim +++ b/slices/main/templates/timemachine/show.html.slim @@ -26,7 +26,7 @@ div class="max-w-screen-md mx-auto px-4 m-4 h-max" - if post.photos.count > 0 - post.photos.each do |photo| a href="/post/#{post.slug}" - img class="mb-0 rounded" src="#{photo["value"]}" + img loading="lazy" class="mb-0 rounded" src="#{photo["value"]}" = post.name - else p No posts