cdransf/coryd.dev
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(*): add image grids for album and associated media displays

Browse source
This commit is contained in:
Cory Dransfeldt 2025-05-24 17:19:30 -07:00
parent 9b4baad5fb
commit 36fbba761a
No known key found for this signature in database
53 changed files with 1179 additions and 764 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/assets/styles/components/media-grid.css
View file

@ -5,6 +5,14 @@
a {
aspect-ratio: var(--aspect-ratio);
img {
border-color: var(--section-color);
}
}
&:not(:has(a)) img {
border: var(--border-gray);
}
& + .media-grid {

10
src/assets/styles/pages/reading.css
View file

@ -1,9 +1,3 @@
:is(.book-entry, .book-focus) img {
height: auto;
aspect-ratio: var(--aspect-ratio-vertical);
border: var(--border-gray);
}
.book-years a:first-of-type {
font-weight: var(--font-weight-bold);
}
@ -25,10 +19,6 @@
align-items: start;
}
img {
max-width: calc(var(--sizing-3xl) * 4);
}
.media-meta {
margin-top: var(--sizing-base);
align-items: center;

6
src/feeds/manifest.json.liquid
View file

@ -13,9 +13,9 @@ excludeFromSitemap: true
"display": "minimal-ui",
"dir": "ltr",
"icons": [
{ "src": "{{ globals.url }}/og/w200/{% appVersion %}{{ globals.avatar }}", "type": "image/png", "sizes": "192x192" },
{ "src": "{{ globals.url }}/og/w800/{% appVersion %}{{ globals.avatar }}", "type": "image/png", "sizes": "512x512" },
{ "src": "{{ globals.url }}/og/w800/{% appVersion %}{{ globals.avatar }}", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
{ "src": "{{ globals.url }}/og/w200/{% appVersion %}{{ globals.metadata.open_graph_image }}", "type": "image/png", "sizes": "192x192" },
{ "src": "{{ globals.url }}/og/w800/{% appVersion %}{{ globals.metadata.open_graph_image }}", "type": "image/png", "sizes": "512x512" },
{ "src": "{{ globals.url }}/og/w800/{% appVersion %}{{ globals.metadata.open_graph_image }}", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
],
"start_url": "/",
}

8
src/feeds/rss.liquid
View file

@ -17,7 +17,7 @@ permalink: "{{ feed.permalink }}.xml"
<atom:link href="{{ globals.url }}{{ feed.permalink }}.xml" rel="self" type="application/rss+xml" />
<lastBuildDate>{{ "now" | date:"%a, %d %b %Y %H:%M:%S %z" }}</lastBuildDate>
<image>
<url>{{ globals.url }}/og/w200/{% appVersion %}{{ globals.avatar }}</url>
<url>{{ globals.url }}/og/w200/{% appVersion %}{{ globals.metadata.open_graph_image }}</url>
<title><![CDATA[{{ feed.title | append: " • " | append: globals.site_name }}]]></title>
<link>{{ globals.url }}{{ feed.permalink }}.xml</link>
<width>144</width>
@ -31,12 +31,12 @@ permalink: "{{ feed.permalink }}.xml"
<guid isPermaLink="false">{{ feedItem.url | generatePermalink: globals.url | encodeAmp }}</guid>
<pubDate>{{ feedItem.date | date: "%a, %d %b %Y %H:%M:%S %z" }}</pubDate>
{%- if feedItem.image -%}
{%- assign enclosureUrl = globals.cdn_url | append: feedItem.image | append: "?class=w800" -%}
<enclosure url="{{ globals.cdn_url }}{{ feedItem.image | encodeAmp }}?class=w800" length="{{ enclosureUrl | getRemoteFileSize }}" type="image/jpeg" />
{%- assign enclosureUrl = feedItem.image | append: "?class=w800" -%}
<enclosure url="{{ feedItem.image | encodeAmp }}?class=w800" length="{{ enclosureUrl | getRemoteFileSize }}" type="image/jpeg" />
{%- endif -%}
<description><![CDATA[
{%- if feedItem.image -%}
<img src="{{ globals.cdn_url }}{{ feedItem.image | encodeAmp }}?class=w800" alt="Image from {{ feedItem.title }}" />
<img src="{{ feedItem.image | encodeAmp }}?class=w800" alt="Image from {{ feedItem.title }}" />
{%- endif -%}
{%- if feedItem.content -%}
{{ feedItem.content | markdown | convertRelativeLinks: globals.url }}

61
src/includes/blocks/associated-media.liquid
View file

@ -2,12 +2,12 @@
{% if media.size > 0 %}
<div class="associated-media">
{% assign sections =
"artists:headphones:music:Related artist(s)," | append:
"books:books:books:Related book(s)," | append:
"genres:headphones:music:Related genre(s)," | append:
"movies:movie:movies:Related movie(s)," | append:
"posts:article:article:Related post(s)," | append:
"shows:device-tv-old:tv:Related show(s)"
"artists:headphones:music:Related artist(s):true," | append:
"books:books:books:Related book(s):true," | append:
"genres:headphones:music:Related genre(s):false," | append:
"movies:movie:movies:Related movie(s):true," | append:
"posts:article:article:Related post(s):false," | append:
"shows:device-tv-old:tv:Related show(s):true"
| split:"," %}
{% for section in sections %}
{% assign parts = section | split:":" %}
@ -15,6 +15,8 @@
{% assign icon = parts[1] %}
{% assign css_class = parts[2] %}
{% assign label = parts[3] %}
{% assign hasGrid = parts[4] == "true" %}
{% assign items = nil %}
{% case key %}
{% when "artists" %} {% assign items = artists %}
{% when "books" %} {% assign items = books %}
@ -24,26 +26,37 @@
{% when "shows" %} {% assign items = shows %}
{% endcase %}
{% if items and items.size > 0 %}
<p id="{{ key }}" class="{{ css_class }}">
<h3 id="{{ key }}" class="{{ css_class }}">
{% tablericon icon %}
{{ label }}
</p>
<ul>
{% for item in items %}
<li class="{{ css_class }}">
<a href="{{ item.url }}">{{ item.title | default:item.name }}</a>
{% if key == "artists" and item.total_plays > 0 %}
({{ item.total_plays }} {{ item.total_plays | pluralize:"play" }})
{% elsif key == "books" %}
by {{ item.author }}
{% elsif key == "movies" or key == "shows" %}
({{ item.year }})
{% elsif key == "posts" %}
({{ item.date | date:"%B %e, %Y" }})
{% endif %}
</li>
{% endfor %}
</ul>
</h3>
{% if hasGrid %}
{% assign shape = "square" %}
{% if key == "books" or key == "movies" or key == "shows" %}
{% assign shape = "vertical" %}
{% endif %}
{% render "media/grid.liquid",
data:items,
shape:shape
%}
{% else %}
<ul>
{% for item in items %}
<li class="{{ css_class }}">
<a href="{{ item.url }}">{{ item.title | default:item.name }}</a>
{% if key == "artists" and item.total_plays > 0 %}
({{ item.total_plays }} {{ item.total_plays | pluralize:"play" }})
{% elsif key == "books" %}
by {{ item.author }}
{% elsif key == "movies" or key == "shows" %}
({{ item.year }})
{% elsif key == "posts" %}
({{ item.date | date:"%B %e, %Y" }})
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endif %}
{% endfor %}
</div>

10
src/includes/blocks/hero.liquid
View file

@ -1,17 +1,17 @@
<img
srcset="
{{ globals.cdn_url }}{{ image }}?class=bannersm&type=webp 256w,
{{ globals.cdn_url }}{{ image }}?class=bannermd&type=webp 512w,
{{ globals.cdn_url }}{{ image }}?class=bannerbase&type=webp 1024w
{{ image }}?class=bannersm&type=webp 256w,
{{ image }}?class=bannermd&type=webp 512w,
{{ image }}?class=bannerbase&type=webp 1024w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
1024px"
src="{{ globals.cdn_url }}{{ image }}?class=bannersm&type=webp"
src="{{ image }}?class=bannersm&type=webp"
alt="{{ alt | replaceQuotes }}"
class="image-banner"
loading="lazy"
decoding="async"
width="720"
height="480"
/>
/>

4
src/includes/fetchers/artist.php.liquid
View file

@ -3,7 +3,6 @@
require __DIR__ . "/../../vendor/autoload.php";
require __DIR__ . "/../../server/utils/init.php";
use App\Classes\GlobalsFetcher;
use App\Classes\ArtistFetcher;
use voku\helper\HtmlMin;
@ -12,7 +11,6 @@
if (strpos($url, "music/artists/") !== 0) redirectTo404();
$globals = (new GlobalsFetcher())->fetch();
$artist = (new ArtistFetcher())->fetch($url);
if (!$artist) redirectTo404();
@ -20,7 +18,7 @@
$artist["description"] = parseMarkdown($artist["description"]);
$pageTitle = htmlspecialchars("Artists • " . $artist["name"], ENT_QUOTES, "UTF-8");
$pageDescription = truncateText(htmlspecialchars(strip_tags($artist["description"]), ENT_QUOTES, "UTF-8"), 250);
$ogImage = htmlspecialchars($artist["image"], ENT_QUOTES, "UTF-8");
$ogImage = htmlspecialchars($artist["metadata"]["open_graph_image"], ENT_QUOTES, "UTF-8");
$fullUrl = "https://www.coryd.dev" . $requestUri;
$oembedUrl = "https://www.coryd.dev/oembed" . $requestUri;

2
src/includes/fetchers/book.php.liquid
View file

@ -18,7 +18,7 @@
$book["description"] = parseMarkdown($book["description"]);
$pageTitle = htmlspecialchars("Books • {$book["title"]} by {$book["author"]}", ENT_QUOTES, "UTF-8");
$pageDescription = truncateText(htmlspecialchars(strip_tags($book["description"]), ENT_QUOTES, "UTF-8"), 250);
$ogImage = htmlspecialchars($book["image"], ENT_QUOTES, "UTF-8");
$ogImage = htmlspecialchars($book["metadata"]["open_graph_image"], ENT_QUOTES, "UTF-8");
$fullUrl = "https://www.coryd.dev" . $requestUri;
$oembedUrl = "https://www.coryd.dev/oembed" . $requestUri;

2
src/includes/fetchers/genre.php.liquid
View file

@ -20,7 +20,7 @@
htmlspecialchars(strip_tags($genre["description"]), ENT_QUOTES, "UTF-8"),
250
);
$ogImage = htmlspecialchars($genre["artists"][0]["image"] ?? "", ENT_QUOTES, "UTF-8");
$ogImage = htmlspecialchars($genre["metadata"]["open_graph_image"] ?? "", ENT_QUOTES, "UTF-8");
$fullUrl = "https://www.coryd.dev" . $requestUri;
$oembedUrl = "https://www.coryd.dev/oembed" . $requestUri;

2
src/includes/fetchers/movie.php.liquid
View file

@ -18,7 +18,7 @@
$movie["description"] = parseMarkdown($movie["description"]);
$pageTitle = htmlspecialchars("Movies • " . $movie["title"], ENT_QUOTES, "UTF-8");
$pageDescription = truncateText(htmlspecialchars(strip_tags($movie["description"]), ENT_QUOTES, "UTF-8"), 250);
$ogImage = htmlspecialchars($movie["backdrop"], ENT_QUOTES, "UTF-8");
$ogImage = htmlspecialchars($movie["metadata"]["open_graph_image"], ENT_QUOTES, "UTF-8");
$fullUrl = "https://www.coryd.dev" . $requestUri;
$oembedUrl = "https://www.coryd.dev/oembed" . $requestUri;

2
src/includes/fetchers/show.php.liquid
View file

@ -20,7 +20,7 @@
htmlspecialchars(strip_tags($show["description"]), ENT_QUOTES, "UTF-8"),
250
);
$ogImage = htmlspecialchars($show["image"], ENT_QUOTES, "UTF-8");
$ogImage = htmlspecialchars($show["metadata"]["open_graph_image"], ENT_QUOTES, "UTF-8");
$fullUrl = "https://www.coryd.dev" . $requestUri;
$oembedUrl = "https://www.coryd.dev/oembed" . $requestUri;

6
src/includes/layout/header.liquid
View file

@ -1,11 +1,11 @@
{%- capture headerContent -%}
<img
srcset="
{{ globals.cdn_url }}{{ globals.avatar_header }}?class=w100&v={% appVersion %} 100w,
{{ globals.cdn_url }}{{ globals.avatar_header }}?class=w200&v={% appVersion %} 200w
{{ globals.avatar_header }}?class=w100&v={% appVersion %} 100w,
{{ globals.avatar_header }}?class=w200&v={% appVersion %} 200w
"
sizes="(max-width: 450px) 100px, 200px"
class="icon" src="{{ globals.cdn_url }}{{ globals.avatar_header }}?class=w100&v={% appVersion %}"
class="icon" src="{{ globals.avatar_header }}?class=w100&v={% appVersion %}"
alt="{{ globals.site_name }}"
width="100"
height="145"

8
src/includes/media/grid.liquid
View file

@ -3,7 +3,7 @@
{%- for item in data limit:count -%}
{%- assign alt = item.grid.alt | replaceQuotes -%}
{%- assign imageUrl = item.grid.image -%}
<a href="{{ item.grid.url }}" title="{{ alt }}">
<a class="{{ item.type }}" href="{{ item.grid.url }}" title="{{ alt }}">
<div class="media-grid-item">
{%- if item.grid.title or item.grid.subtext -%}
<div class="meta-text media-highlight {{ item.type }}">
@ -27,11 +27,11 @@
{%- endcase -%}
<img
srcset="
{{ globals.cdn_url }}{{ imageUrl }}?class={{ imageClass }}sm&type=webp {{ width }}w,
{{ globals.cdn_url }}{{ imageUrl }}?class={{ imageClass }}md&type=webp {{ width | times:2 }}w
{{ imageUrl }}?class={{ imageClass }}sm&type=webp {{ width }}w,
{{ imageUrl }}?class={{ imageClass }}md&type=webp {{ width | times:2 }}w
"
sizes="(max-width: 450px) {{ width }}px, {{ width | times:2 }}px"
src="{{ globals.cdn_url }}{{ imageUrl }}?class={{ imageClass }}sm&type=webp"
src="{{ imageUrl }}?class={{ imageClass }}sm&type=webp"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"

6
src/includes/media/music/charts/recent.liquid
View file

@ -5,11 +5,11 @@
<a href="{{ item.chart.url }}">
<img
srcset="
{{ globals.cdn_url }}{{ item.chart.image }}?class=w50&type=webp 50w,
{{ globals.cdn_url }}{{ item.chart.image }}?class=w100&type=webp 100w
{{ item.chart.image }}?class=w50&type=webp 50w,
{{ item.chart.image }}?class=w100&type=webp 100w
"
sizes="(max-width: 450px) 50px, 100px"
src="{{ globals.cdn_url }}{{ item.chart.image }}?class=w50&type=webp"
src="{{ item.chart.image }}?class=w50&type=webp"
alt="{{ item.chart.alt | replaceQuotes }}"
loading="lazy"
decoding="async"

2
src/includes/media/music/tables/all-time/albums.liquid
View file

@ -9,7 +9,7 @@
<tr>
<td>
<div>
<img src="{{ globals.cdn_url }}{{ album.table.image }}?class=w100" alt="{{ album.table.alt }}" width="50">
<img src="{{ album.table.image }}?class=w100" alt="{{ album.table.alt }}" width="50">
{{ album.table.title }}
</div>
</td>

2
src/includes/media/music/tables/all-time/artists.liquid
View file

@ -8,7 +8,7 @@
<tr>
<td>
<div>
<img src="{{ globals.cdn_url }}{{ artist.table.image }}?class=w100" alt="{{ artist.table.alt }}" width="50">
<img src="{{ artist.table.image }}?class=w100" alt="{{ artist.table.alt }}" width="50">
<a href="{{ artist.table.url }}">{{ artist.table.title }}</a>
</div>
</td>

4
src/includes/metadata/base.liquid
View file

@ -6,8 +6,8 @@
<meta name="msapplication-TileColor" content="{{ globals.theme_color }}">
<meta name="fediverse:creator" content="{{ globals.mastodon }}" />
<meta name="generator" content="{{ eleventy.generator }}" />
<link href="{{ globals.url }}/og/w50/{% appVersion %}{{ globals.avatar_transparent }}" rel="icon" sizes="any" />
<link href="{{ globals.url }}/og/w800/{% appVersion %}{{ globals.avatar }}" rel="apple-touch-icon" />
<link href="{{ globals.url }}/og/w50/{% appVersion %}{{ globals.metadata.open_graph_image_transparent }}" rel="icon" sizes="any" />
<link href="{{ globals.url }}/og/w800/{% appVersion %}{{ globals.metadata.open_graph_image }}" rel="apple-touch-icon" />
<link rel="alternate" href="{{ globals.url }}/feeds/posts.xml" title="Posts • {{ globals.site_name }}" />
<link rel="alternate" href="{{ globals.url }}/feeds/links.xml" title="Links • {{ globals.site_name }}" type="application/rss+xml" />
<link rel="alternate" href="{{ globals.url }}/feeds/movies.xml" title="Movies • {{ globals.site_name }}" type="application/rss+xml" />

28
src/includes/metadata/index.liquid
View file

@ -20,7 +20,7 @@
{{ globals.site_description }}
{%- endif -%}
{%- endcapture -%}
{%- assign ogImage = ogImageBaseUrl | append: globals.avatar -%}
{%- assign ogImage = ogImageBaseUrl | append: globals.metadata.open_graph_image -%}
{%- case schema -%}
{%- when 'artist' -%}
{% render "fetchers/artist.php.liquid" %}
@ -37,20 +37,20 @@
{%- when 'blog' -%}
{%- assign pageTitle = post.title -%}
{%- assign pageDescription = post.description -%}
{%- assign ogImage = ogImageBaseUrl | append: post.image -%}
{%- assign ogImage = ogImageBaseUrl | append: post.metadata.open_graph_image -%}
{%- when 'music-index', 'music-week-artists' -%}
{%- assign ogImage = ogImageBaseUrl | append: music.week.artists[0].grid.image -%}
{%- assign ogImage = ogImageBaseUrl | append: music.week.artists[0].metadata.open_graph_image -%}
{%- when 'music-week-albums', 'music-week-tracks' -%}
{%- assign ogImage = ogImageBaseUrl | append: music.week.albums[0].grid.image -%}
{%- assign ogImage = ogImageBaseUrl | append: music.week.albums[0].metadata.open_graph_image -%}
{%- when 'music-month-artists' -%}
{%- assign ogImage = ogImageBaseUrl | append: music.month.artists[0].grid.image -%}
{%- assign ogImage = ogImageBaseUrl | append: music.month.artists[0].metadata.open_graph_image -%}
{%- when 'music-month-albums' -%}
{%- assign ogImage = ogImageBaseUrl | append: music.month.albums[0].grid.image -%}
{%- assign ogImage = ogImageBaseUrl | append: music.month.albums[0].metadata.open_graph_image -%}
{%- when 'music-releases' -%}
{%- assign ogImage = ogImageBaseUrl | append: albumReleases.upcoming[0].grid.image -%}
{%- assign ogImage = ogImageBaseUrl | append: albumReleases.upcoming[0].metadata.open_graph_image -%}
{%- when 'books' -%}
{%- assign overviewBook = books.all | filterBooksByStatus: 'started' | reverse | first %}
{%- assign ogImage = ogImageBaseUrl | append: overviewBook.image -%}
{%- assign ogImage = ogImageBaseUrl | append: overviewBook.metadata.open_graph_image -%}
{%- when 'reading-year' -%}
{%- assign pageTitle = 'Books' | append: ' • ' | append: year.value | append: ' • ' | append: globals.site_name -%}
{%- capture pageDescription -%}
@ -58,21 +58,21 @@
{%- endcapture -%}
{%- assign bookData = year.data | filterBooksByStatus: 'finished' -%}
{%- assign bookYear = bookData | shuffleArray | first -%}
{%- assign ogImage = ogImageBaseUrl | append: bookYear.image -%}
{%- assign ogImage = ogImageBaseUrl | append: bookYear.metadata.open_graph_image -%}
{%- when 'favorite-movies' -%}
{%- assign favoriteMovie = movies.favorites | shuffleArray | first %}
{%- assign ogImage = ogImageBaseUrl | append: favoriteMovie.backdrop -%}
{%- assign ogImage = ogImageBaseUrl | append: favoriteMovie.metadata.open_graph_image -%}
{%- when 'favorite-shows' -%}
{%- assign favoriteShow = tv.favorites | shuffleArray | first %}
{%- assign ogImage = ogImageBaseUrl | append: favoriteShow.backdrop -%}
{%- assign ogImage = ogImageBaseUrl | append: favoriteShow.metadata.open_graph_image -%}
{%- when 'watching' -%}
{%- assign mergedMovies = movies.recentlyWatched | mergeArray: movies.favorites %}
{%- assign mergedShows = tv.recentlyWatched | mergeArray: tv.favorites %}
{%- assign overviewWatched = mergedMovies | mergeArray: mergedShows | shuffleArray | first -%}
{%- assign ogImage = ogImageBaseUrl | append: overviewWatched.backdrop -%}
{%- assign ogImage = ogImageBaseUrl | append: overviewWatched.metadata.open_graph_image -%}
{%- when 'upcoming-shows' -%}
{%- assign upcomingShow = upcomingShows.watching | shuffleArray | first %}
{%- assign ogImage = ogImageBaseUrl | append: upcomingShow.backdrop -%}
{%- assign ogImage = ogImageBaseUrl | append: upcomingShow.metadata.open_graph_image -%}
{%- when 'page' -%}
{%- assign pageDescription = page.description -%}
{% endcase %}
@ -82,7 +82,7 @@
oembedUrl:oembedUrl,
pageTitle:pageTitle,
pageDescription:pageDescription,
ogImage:globals.avatar,
ogImage:globals.metadata.open_graph_image,
globals:globals,
%}
{%- else -%}

2
src/meta/webfinger.json.liquid
View file

@ -28,7 +28,7 @@ excludeFromSitemap: true
{
"rel":"http://webfinger.net/rel/avatar",
"type":"image/png",
"href":"{{ globals.cdn_url }}{{ globals.avatar }}?class=squarebase"
"href":"{{ globals.url }}/og/w800/{% appVersion %}{{ globals.metadata.open_graph_image }}"
}
]
}

10
src/pages/dynamic/artist.php.liquid
View file

@ -9,14 +9,14 @@ schema: artist
<img
class="media-image"
srcset="
{{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w200&type=webp 200w,
{{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w600&type=webp 400w,
{{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w800&type=webp 800w
<?= htmlspecialchars($artist["image"]) ?>?class=w200&type=webp 200w,
<?= htmlspecialchars($artist["image"]) ?>?class=w600&type=webp 400w,
<?= htmlspecialchars($artist["image"]) ?>?class=w800&type=webp 800w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
800px"
src="{{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w200&type=webp"
src="<?= htmlspecialchars($artist["image"]) ?>?class=w200&type=webp"
alt="<?= htmlspecialchars($artist["name"]) ?> • <?= htmlspecialchars(parseCountryField($artist["country"])) ?>"
decoding="async"
width="200"
@ -108,7 +108,7 @@ schema: artist
<?= getTablerIcon('vinyl') ?>
Albums
</h3>
<?php renderMediaGrid($artist["albums"], $globals["cdn_url"]); ?>
<?php renderMediaGrid($artist["albums"]); ?>
<?php endif; ?>
</article>
<?php

8
src/pages/dynamic/book.php.liquid
View file

@ -9,15 +9,15 @@ schema: book
<img
class="media-image"
srcset="
{{ globals.cdn_url }}<?= htmlspecialchars($book["image"]) ?>?class=verticalsm&type=webp 200w,
{{ globals.cdn_url }}<?= htmlspecialchars($book["image"]) ?>?class=verticalmd&type=webp 400w,
{{ globals.cdn_url }}<?= htmlspecialchars($book["image"]) ?>?class=verticalbase&type=webp 800w
<?= htmlspecialchars($book["image"]) ?>?class=verticalsm&type=webp 200w,
<?= htmlspecialchars($book["image"]) ?>?class=verticalmd&type=webp 400w,
<?= htmlspecialchars($book["image"]) ?>?class=verticalbase&type=webp 800w
"
sizes="(max-width: 450px) 203px,
(max-width: 850px) 406px,
(max-width: 1000px) 812px,
812px"
src="{{ globals.cdn_url }}<?= htmlspecialchars($book["image"]) ?>?class=verticalsm&type=webp"
src="<?= htmlspecialchars($book["image"]) ?>?class=verticalsm&type=webp"
alt="<?= htmlspecialchars($book["title"]) ?> by <?= htmlspecialchars($book["author"]) ?>"
decoding="async"
width="200"

8
src/pages/dynamic/movie.php.liquid
View file

@ -7,14 +7,14 @@ schema: movie
<article class="watching-focus">
<img
srcset="
{{ globals.cdn_url }}<?= htmlspecialchars($movie["backdrop"]) ?>?class=bannersm&type=webp 256w,
{{ globals.cdn_url }}<?= htmlspecialchars($movie["backdrop"]) ?>?class=bannermd&type=webp 512w,
{{ globals.cdn_url }}<?= htmlspecialchars($movie["backdrop"]) ?>?class=bannerbase&type=webp 1024w
<?= htmlspecialchars($movie["backdrop"]) ?>?class=bannersm&type=webp 256w,
<?= htmlspecialchars($movie["backdrop"]) ?>?class=bannermd&type=webp 512w,
<?= htmlspecialchars($movie["backdrop"]) ?>?class=bannerbase&type=webp 1024w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
1024px"
src="{{ globals.cdn_url }}<?= htmlspecialchars($movie["backdrop"]) ?>?class=bannersm&type=webp"
src="<?= htmlspecialchars($movie["backdrop"]) ?>?class=bannersm&type=webp"
alt="<?= htmlspecialchars($movie["title"]) ?> (<?= htmlspecialchars($movie["year"]) ?>)"
class="image-banner"
decoding="async"

8
src/pages/dynamic/show.php.liquid
View file

@ -7,14 +7,14 @@ schema: show
<article class="watching-focus">
<img
srcset="
{{ globals.cdn_url }}<?= htmlspecialchars($show["backdrop"]) ?>?class=bannersm&type=webp 256w,
{{ globals.cdn_url }}<?= htmlspecialchars($show["backdrop"]) ?>?class=bannermd&type=webp 512w,
{{ globals.cdn_url }}<?= htmlspecialchars($show["backdrop"]) ?>?class=bannerbase&type=webp 1024w
<?= htmlspecialchars($show["backdrop"]) ?>?class=bannersm&type=webp 256w,
<?= htmlspecialchars($show["backdrop"]) ?>?class=bannermd&type=webp 512w,
<?= htmlspecialchars($show["backdrop"]) ?>?class=bannerbase&type=webp 1024w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
1024px"
src="{{ globals.cdn_url }}<?= htmlspecialchars($show["backdrop"]) ?>?class=bannersm&type=webp"
src="<?= htmlspecialchars($show["backdrop"]) ?>?class=bannersm&type=webp"
alt="<?= htmlspecialchars($show["title"]) ?> (<?= htmlspecialchars($show["year"]) ?>)"
class="image-banner"
decoding="async"

6
src/pages/media/reading/index.html
View file

@ -26,12 +26,12 @@ updated: "now"
<a href="{{ book.url }}">
<img
srcset="
{{ globals.cdn_url }}{{ book.image }}?class=verticalsm&type=webp 200w,
{{ globals.cdn_url }}{{ book.image }}?class=verticalmd&type=webp 400w
{{ book.image }}?class=verticalsm&type=webp 200w,
{{ book.image }}?class=verticalmd&type=webp 400w
"
sizes="(max-width: 450px) 200px,
400px"
src="{{ globals.cdn_url }}{{ book.image }}?class=verticalsm&type=webp"
src="{{ book.image }}?class=verticalsm&type=webp"
alt="{{ alt | replaceQuotes }}"
loading="lazy"
decoding="async"

2
src/pages/page.html
View file

@ -4,7 +4,7 @@ pagination:
size: 1
alias: page
permalink: "{{ page.permalink }}/index.html"
image: "{{ page.open_graph_image | prepend: globals.cdn_url | default: globals.avatar }}"
image: "{{ page.metadata.open_graph_image | default: globals.avatar }}"
updated: "{{ page.updated | default: null }}"
schema: page
---

10
src/pages/sections/posts/post.html
View file

@ -24,16 +24,16 @@ schema: blog
{%- if post.image -%}
<img
srcset="
{{ globals.cdn_url }}{{ post.image }}?class=w200&type=webp 200w,
{{ globals.cdn_url }}{{ post.image }}?class=w400&type=webp 400w,
{{ globals.cdn_url }}{{ post.image }}?class=w800&type=webp 800w,
{{ globals.cdn_url }}{{ post.image }}?class=w1600&type=webp 1600w
{{ post.image }}?class=w200&type=webp 200w,
{{ post.image }}?class=w400&type=webp 400w,
{{ post.image }}?class=w800&type=webp 800w,
{{ post.image }}?class=w1600&type=webp 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
src="{{ globals.cdn_url }}{{ post.image }}?class=w200"
src="{{ post.image }}?class=w200"
alt="{{ post.image_alt | replaceQuotes }}"
class="image-banner"
loading="eager"