From e6e1777296d094cae31a977fba32ba83e1fce4aa Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Tue, 2 Jul 2024 11:24:38 -0700
Subject: [PATCH] feat: leverage bunny.net transform classes
---
package.json | 2 +-
src/_includes/base.liquid | 1 -
src/_includes/partials/media/grid.liquid | 20 ++++++++---------
.../partials/media/watching/grid.liquid | 12 +++++-----
.../partials/media/watching/hero.liquid | 14 ++++++------
src/_includes/webrings/the-claw.liquid | 10 ++++-----
src/assets/styles/defaults/vars.css | 2 +-
src/pages/errors/404.html | 14 ++++++------
src/pages/errors/broken.html | 14 ++++++------
src/pages/errors/not-allowed.html | 14 ++++++------
src/pages/errors/rate-limit.html | 14 ++++++------
src/pages/main/about.md | 10 ++++-----
src/pages/main/books/index.html | 22 +++++++++----------
src/pages/main/watching/movie.html | 14 ++++++------
src/pages/main/watching/show.html | 14 ++++++------
15 files changed, 88 insertions(+), 89 deletions(-)
diff --git a/package.json b/package.json
index 01d92eae..5399038c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "coryd.dev",
- "version": "19.8.5",
+ "version": "19.9.0",
"description": "The source for my personal site. Built using 11ty.",
"type": "module",
"scripts": {
diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid
index cdcc9e3d..ff84da79 100644
--- a/src/_includes/base.liquid
+++ b/src/_includes/base.liquid
@@ -99,7 +99,6 @@
<link rel="alternate" href="https://feedpress.me/coryd-movies" title="{{ meta.siteName }}'s movies feed" type="application/rss+xml">
<link rel="alternate" href="https://feedpress.me/coryd-books" title="{{ meta.siteName }}'s books feed" type="application/rss+xml">
<link rel="alternate" href="https://feedpress.me/coryd-all" title="{{ meta.siteName }}'s activity feed" type="application/rss+xml">
- <link type="text/plain" rel="author" href="/humans.txt" />
<script defer data-domain="coryd.dev" src="/js/script.outbound-links.tagged-events.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<script type="application/ld+json">
diff --git a/src/_includes/partials/media/grid.liquid b/src/_includes/partials/media/grid.liquid
index d8988ee4..401d2841 100644
--- a/src/_includes/partials/media/grid.liquid
+++ b/src/_includes/partials/media/grid.liquid
@@ -19,16 +19,16 @@
{% if shape == 'square' %}
<img
srcset="
- https://cdn.coryd.dev{{ item.image }}?width=200&h=200&aspect_ratio=1:1 200w,
- https://cdn.coryd.dev{{ item.image }}?width=400&h=400&aspect_ratio=1:1 400w,
- https://cdn.coryd.dev{{ item.image }}?width=800&h=800&aspect_ratio=1:1 800w,
- https://cdn.coryd.dev{{ item.image }}?width=1200&h=1200&aspect_ratio=1:1 1200w
+ https://cdn.coryd.dev{{ item.image }}?class=squaresm 200w,
+ https://cdn.coryd.dev{{ item.image }}?class=squaremd 400w,
+ https://cdn.coryd.dev{{ item.image }}?class=squarebase 800w,
+ https://cdn.coryd.dev{{ item.image }}?class=squarelg 1200w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 100px) 800px,
1200px"
- src="https://cdn.coryd.dev{{ item.image }}?width=1200&h=1200&aspect_ratio=1:1"
+ src="https://cdn.coryd.dev{{ item.image }}?class=squarelg"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"
@@ -38,16 +38,16 @@
{% else %}
<img
srcset="
- https://cdn.coryd.dev{{ item.image }}?w=200&aspect_ratio=2:3 200w,
- https://cdn.coryd.dev{{ item.image }}?w=400&aspect_ratio=2:3 400w,
- https://cdn.coryd.dev{{ item.image }}?w=800&aspect_ratio=2:3 800w,
- https://cdn.coryd.dev{{ item.image }}?w=1200&aspect_ratio=2:3 1200w
+ https://cdn.coryd.dev{{ item.image }}?class=verticalsm 200w,
+ https://cdn.coryd.dev{{ item.image }}?class=verticalmd 400w,
+ https://cdn.coryd.dev{{ item.image }}?class=verticalbase 800w,
+ https://cdn.coryd.dev{{ item.image }}?class=verticallg 1200w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
- src="https://cdn.coryd.dev{{ item.image }}?w=1200&aspect_ratio=2:3"
+ src="https://cdn.coryd.dev{{ item.image }}?class=verticallg"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"
diff --git a/src/_includes/partials/media/watching/grid.liquid b/src/_includes/partials/media/watching/grid.liquid
index c1c326f2..e2879191 100644
--- a/src/_includes/partials/media/watching/grid.liquid
+++ b/src/_includes/partials/media/watching/grid.liquid
@@ -25,21 +25,21 @@
{%- endcapture -%}
<img
srcset="
- https://cdn.coryd.dev{{ item.backdrop }}?aspect_ratio=1:.5625&width=256 256w,
- https://cdn.coryd.dev{{ item.backdrop }}?aspect_ratio=1:.5625&width=512 512w,
- https://cdn.coryd.dev{{ item.backdrop }}?aspect_ratio=1:.5625&width=1024 1024w,
- https://cdn.coryd.dev{{ item.backdrop }}?aspect_ratio=1:.5625&width=2048 2048w
+ https://cdn.coryd.dev{{ item.backdrop }}?class=bannersm 256w,
+ https://cdn.coryd.dev{{ item.backdrop }}?class=bannermd 512w,
+ https://cdn.coryd.dev{{ item.backdrop }}?class=bannerbase 1024w,
+ https://cdn.coryd.dev{{ item.backdrop }}?class=bannerlg 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
- src="https://cdn.coryd.dev{{ item.backdrop }}?aspect_ratio=1:.5625&width=2048"
+ src="https://cdn.coryd.dev{{ item.backdrop }}?class=bannerlg"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"
width="256"
- height="144"
+ height="170"
/>
</div>
</a>
diff --git a/src/_includes/partials/media/watching/hero.liquid b/src/_includes/partials/media/watching/hero.liquid
index e4a129c9..0f9b2fc5 100644
--- a/src/_includes/partials/media/watching/hero.liquid
+++ b/src/_includes/partials/media/watching/hero.liquid
@@ -12,21 +12,21 @@
</div>
<img
srcset="
- https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=256 256w,
- https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=512 512w,
- https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=1024 1024w,
- https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=2048 2048w
+ https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm 256w,
+ https://cdn.coryd.dev{{ movie.backdrop }}?class=bannermd 512w,
+ https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerbase 1024w,
+ https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
- src="https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=2048"
+ src="https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg"
alt="{{ alt }}"
loading="eager"
decoding="async"
- width="768"
- height="432"
+ width="1080"
+ height="720"
/>
</div>
</a>
\ No newline at end of file
diff --git a/src/_includes/webrings/the-claw.liquid b/src/_includes/webrings/the-claw.liquid
index e4598b43..dad88294 100644
--- a/src/_includes/webrings/the-claw.liquid
+++ b/src/_includes/webrings/the-claw.liquid
@@ -2,16 +2,16 @@
<div class="flex-centered justify-centered">
<img
srcset="
- https://cdn.coryd.dev/assets/webrings/theclaw.png?width=200 200w,
- https://cdn.coryd.dev/assets/webrings/theclaw.png?width=400 400w,
- https://cdn.coryd.dev/assets/webrings/theclaw.png?width=800 800w,
- https://cdn.coryd.dev/assets/webrings/theclaw.png?width=1600 1600w
+ https://cdn.coryd.dev/assets/webrings/theclaw.png?class=w200 200w,
+ https://cdn.coryd.dev/assets/webrings/theclaw.png?class=w400 400w,
+ https://cdn.coryd.dev/assets/webrings/theclaw.png?class=w800 800w,
+ https://cdn.coryd.dev/assets/webrings/theclaw.png?class=w1600 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
- src="https://cdn.coryd.dev/assets/webrings/theclaw.png?width=1600"
+ src="https://cdn.coryd.dev/assets/webrings/theclaw.png?class=1600"
alt="The Claw Webring"
loading="lazy"
decoding="async"
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index c3456cf6..26c2c60d 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -110,7 +110,7 @@
/* aspect ratios */
--aspect-ratio-square: 1/1;
--aspect-ratio-vertical: 2/3;
- --aspect-ratio-banner: 1 / 0.5625;
+ --aspect-ratio-banner: 3/2;
/* transitions */
--transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/pages/errors/404.html b/src/pages/errors/404.html
index c284ed42..31eb3102 100644
--- a/src/pages/errors/404.html
+++ b/src/pages/errors/404.html
@@ -7,23 +7,23 @@ image: https://cdn.coryd.dev/assets/404.jpg
---
<img
srcset="
- https://cdn.coryd.dev/assets/404.jpg?aspect_ratio=1:.5625&width=256 256w,
- https://cdn.coryd.dev/assets/404.jpg?aspect_ratio=1:.5625&width=512 512w,
- https://cdn.coryd.dev/assets/404.jpg?aspect_ratio=1:.5625&width=1024 1024w,
- https://cdn.coryd.dev/assets/404.jpg?aspect_ratio=1:.5625&width=2048 2048w
+ https://cdn.coryd.dev/assets/404.jpg?class=bannersm 256w,
+ https://cdn.coryd.dev/assets/404.jpg?class=bannermd 512w,
+ https://cdn.coryd.dev/assets/404.jpg?class=bannerbase 1024w,
+ https://cdn.coryd.dev/assets/404.jpg?class=bannerlg 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
- src="https://cdn.coryd.dev/assets/404.jpg?aspect_ratio=1:.5625&width=2048"
+ src="https://cdn.coryd.dev/assets/404.jpg?class=bannerlg"
alt="{{ alt }}"
class="image-banner"
style="aspect-ratio:1/0.5625"
loading="eager"
decoding="async"
- width="768"
- height="432"
+ width="1080"
+ height="720"
/>
<div class="text-centered">
<h2>{{ title }}</h2>
diff --git a/src/pages/errors/broken.html b/src/pages/errors/broken.html
index 6ba2ff80..cfbd3189 100644
--- a/src/pages/errors/broken.html
+++ b/src/pages/errors/broken.html
@@ -7,23 +7,23 @@ image: https://cdn.coryd.dev/assets/broken.jpg
---
<img
srcset="
- https://cdn.coryd.dev/assets/broken.jpg?aspect_ratio=1:.5625&width=256 256w,
- https://cdn.coryd.dev/assets/broken.jpg?aspect_ratio=1:.5625&width=512 512w,
- https://cdn.coryd.dev/assets/broken.jpg?aspect_ratio=1:.5625&width=1024 1024w,
- https://cdn.coryd.dev/assets/broken.jpg?aspect_ratio=1:.5625&width=2048 2048w
+ https://cdn.coryd.dev/assets/broken.jpg?class=bannersm 256w,
+ https://cdn.coryd.dev/assets/broken.jpg?class=bannermd 512w,
+ https://cdn.coryd.dev/assets/broken.jpg?class=bannerbase 1024w,
+ https://cdn.coryd.dev/assets/broken.jpg?class=bannerlg 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
- src="https://cdn.coryd.dev/assets/broken.jpg?aspect_ratio=1:.5625&width=2048"
+ src="https://cdn.coryd.dev/assets/broken.jpg?class=bannerlg"
alt="{{ alt }}"
class="image-banner"
style="aspect-ratio:1/0.5625"
loading="eager"
decoding="async"
- width="768"
- height="432"
+ width="1080"
+ height="720"
/>
<div class="text-centered">
<h2>{{ title }}</h2>
diff --git a/src/pages/errors/not-allowed.html b/src/pages/errors/not-allowed.html
index 55f6584f..ccfb4188 100644
--- a/src/pages/errors/not-allowed.html
+++ b/src/pages/errors/not-allowed.html
@@ -7,23 +7,23 @@ image: https://cdn.coryd.dev/assets/not-allowed.jpg
---
<img
srcset="
- https://cdn.coryd.dev/assets/not-allowed.jpg?aspect_ratio=1:.5625&width=256 256w,
- https://cdn.coryd.dev/assets/not-allowed.jpg?aspect_ratio=1:.5625&width=512 512w,
- https://cdn.coryd.dev/assets/not-allowed.jpg?aspect_ratio=1:.5625&width=1024 1024w,
- https://cdn.coryd.dev/assets/not-allowed.jpg?aspect_ratio=1:.5625&width=2048 2048w
+ https://cdn.coryd.dev/assets/not-allowed.jpg?class=bannersm 256w,
+ https://cdn.coryd.dev/assets/not-allowed.jpg?class=bannermd 512w,
+ https://cdn.coryd.dev/assets/not-allowed.jpg?class=bannerbase 1024w,
+ https://cdn.coryd.dev/assets/not-allowed.jpg?class=bannerlg 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
- src="https://cdn.coryd.dev/assets/not-allowed.jpg?aspect_ratio=1:.5625&width=2048"
+ src="https://cdn.coryd.dev/assets/not-allowed.jpg?class=bannerlg"
alt="{{ alt }}"
class="image-banner"
style="aspect-ratio:1/0.5625"
loading="eager"
decoding="async"
- width="768"
- height="432"
+ width="1080"
+ height="720"
/>
<div class="text-centered">
<h2>{{ title }}</h2>
diff --git a/src/pages/errors/rate-limit.html b/src/pages/errors/rate-limit.html
index c0f3876d..c159b33c 100644
--- a/src/pages/errors/rate-limit.html
+++ b/src/pages/errors/rate-limit.html
@@ -7,23 +7,23 @@ image: https://cdn.coryd.dev/assets/stop.jpg
---
<img
srcset="
- https://cdn.coryd.dev/assets/stop.jpg?aspect_ratio=1:.5625&width=256 256w,
- https://cdn.coryd.dev/assets/stop.jpg?aspect_ratio=1:.5625&width=512 512w,
- https://cdn.coryd.dev/assets/stop.jpg?aspect_ratio=1:.5625&width=1024 1024w,
- https://cdn.coryd.dev/assets/stop.jpg?aspect_ratio=1:.5625&width=2048 2048w
+ https://cdn.coryd.dev/assets/stop.jpg?class=bannersm 256w,
+ https://cdn.coryd.dev/assets/stop.jpg?class=bannermd 512w,
+ https://cdn.coryd.dev/assets/stop.jpg?class=bannerbase 1024w,
+ https://cdn.coryd.dev/assets/stop.jpg?class=bannerlg 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
- src="https://cdn.coryd.dev/assets/stop.jpg?aspect_ratio=1:.5625&width=2048"
+ src="https://cdn.coryd.dev/assets/stop.jpg?class=bannerlg"
alt="{{ alt }}"
class="image-banner"
style="aspect-ratio:1/0.5625"
loading="eager"
decoding="async"
- width="768"
- height="432"
+ width="1080"
+ height="720"
/>
<div class="text-centered">
<h2>{{ title }}</h2>
diff --git a/src/pages/main/about.md b/src/pages/main/about.md
index 14fe4d34..69f44a26 100644
--- a/src/pages/main/about.md
+++ b/src/pages/main/about.md
@@ -11,16 +11,16 @@ permalink: /about.html
{%- capture about_alt -%}{{ meta.siteName }} - image by David Neal / @reverentgeek{%- endcapture -%}
<img
srcset="
- https://cdn.coryd.dev/assets/avatar-transparent.png?width=200&h=200&aspect_ratio=1:1 200w,
- https://cdn.coryd.dev/assets/avatar-transparent.png?width=400&h=400&aspect_ratio=1:1 400w,
- https://cdn.coryd.dev/assets/avatar-transparent.png?width=800&h=800&aspect_ratio=1:1 800w,
- https://cdn.coryd.dev/assets/avatar-transparent.png?width=1200&h=1200&aspect_ratio=1:1 1200w
+ https://cdn.coryd.dev/assets/avatar-transparent.png?class=squaresm 200w,
+ https://cdn.coryd.dev/assets/avatar-transparent.png?class=squaremd 400w,
+ https://cdn.coryd.dev/assets/avatar-transparent.png?class=squarebase 800w,
+ https://cdn.coryd.dev/assets/avatar-transparent.png?class=squarelg 1200w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
- src="https://cdn.coryd.dev/assets/avatar-transparent.png?width=1200&h=1200&aspect_ratio=1:1"
+ src="https://cdn.coryd.dev/assets/avatar-transparent.png?class=squarelg"
alt="{{ about_alt }}"
loading="eager"
decoding="async"
diff --git a/src/pages/main/books/index.html b/src/pages/main/books/index.html
index 76f74025..5243d52b 100644
--- a/src/pages/main/books/index.html
+++ b/src/pages/main/books/index.html
@@ -19,21 +19,21 @@ schema: books
<a href="{{ book.url }}">
<img
srcset="
- https://cdn.coryd.dev{{ book.image }}?width=203&aspect_ratio=.65:1 203w,
- https://cdn.coryd.dev{{ book.image }}?width=406&aspect_ratio=.65:1 406w,
- https://cdn.coryd.dev{{ book.image }}?width=812&aspect_ratio=.65:1 812w,
- https://cdn.coryd.dev{{ book.image }}?width=1624&aspect_ratio=.65:1 1624w
+ https://cdn.coryd.dev{{ book.image }}?class=verticalsm 200w,
+ https://cdn.coryd.dev{{ book.image }}?class=verticalmd 400w,
+ https://cdn.coryd.dev{{ book.image }}?class=verticalbase 800w,
+ https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w
"
- sizes="(max-width: 450px) 203px,
- (max-width: 850px) 406px,
- (max-width: 1000px) 812px,
- 1624px"
- src="https://cdn.coryd.dev{{ book.image }}?width=1624&aspect_ratio=.65:1"
+ sizes="(max-width: 450px) 200px,
+ (max-width: 850px) 400px,
+ (max-width: 1000px) 800px,
+ 1200px"
+ src="https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w"
alt="{{ alt }}"
loading="eager"
decoding="async"
- width="203"
- height="309"
+ width="200"
+ height="307"
/>
</a>
<div class="book-meta">
diff --git a/src/pages/main/watching/movie.html b/src/pages/main/watching/movie.html
index 01763d58..93264440 100644
--- a/src/pages/main/watching/movie.html
+++ b/src/pages/main/watching/movie.html
@@ -14,22 +14,22 @@ schema: movie
<article class="watching-focus">
<img
srcset="
- https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=256 256w,
- https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=512 512w,
- https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=1024 1024w,
- https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=2048 2048w
+ https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm 256w,
+ https://cdn.coryd.dev{{ movie.backdrop }}?class=bannermd 512w,
+ https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerbase 1024w,
+ https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
- src="https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=2048"
+ src="https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg"
alt="{{ alt }}"
class="image-banner"
loading="eager"
decoding="async"
- width="768"
- height="432"
+ width="1080"
+ height="720"
/>
<div class="watching-meta">
<p class="title"><strong>{{ movie.title }}</strong></p>
diff --git a/src/pages/main/watching/show.html b/src/pages/main/watching/show.html
index 404765e3..e0aa37b5 100644
--- a/src/pages/main/watching/show.html
+++ b/src/pages/main/watching/show.html
@@ -15,22 +15,22 @@ schema: show
<article class="watching-focus">
<img
srcset="
- https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?aspect_ratio=1:.5625&width=256 256w,
- https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?aspect_ratio=1:.5625&width=512 512w,
- https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?aspect_ratio=1:.5625&width=1024 1024w,
- https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?aspect_ratio=1:.5625&width=2048 2048w
+ https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?class=bannersm 256w,
+ https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?class=bannermd 512w,
+ https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?class=bannerbase 1024w,
+ https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?class=bannerlg 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
- src="https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?aspect_ratio=1:.5625&width=2048"
+ src="https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?class=bannerlg"
alt="{{ alt }}"
class="image-banner"
loading="eager"
decoding="async"
- width="768"
- height="432"
+ width="1080"
+ height="720"
/>
<div class="watching-meta">
<p class="title"><strong>{{ show.title }}</strong></p>