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

2025-05-24 17:19:30 -07:00 · 2025-05-24 17:19:30 -07:00 · 36fbba761a
commit 36fbba761a
parent 9b4baad5fb
53 changed files with 1179 additions and 764 deletions
--- a/src/includes/blocks/associated-media.liquid
+++ b/src/includes/blocks/associated-media.liquid
@ -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>
--- a/src/includes/blocks/hero.liquid
+++ b/src/includes/blocks/hero.liquid
@ -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"
-/>
+/>
--- a/src/includes/fetchers/artist.php.liquid
+++ b/src/includes/fetchers/artist.php.liquid
@ -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;

--- a/src/includes/fetchers/book.php.liquid
+++ b/src/includes/fetchers/book.php.liquid
@ -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;

--- a/src/includes/fetchers/genre.php.liquid
+++ b/src/includes/fetchers/genre.php.liquid
@ -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;

--- a/src/includes/fetchers/movie.php.liquid
+++ b/src/includes/fetchers/movie.php.liquid
@ -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;

--- a/src/includes/fetchers/show.php.liquid
+++ b/src/includes/fetchers/show.php.liquid
@ -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;

--- a/src/includes/layout/header.liquid
+++ b/src/includes/layout/header.liquid
@ -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"
--- a/src/includes/media/grid.liquid
+++ b/src/includes/media/grid.liquid
@ -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"
--- a/src/includes/media/music/charts/recent.liquid
+++ b/src/includes/media/music/charts/recent.liquid
@ -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"
--- a/src/includes/media/music/tables/all-time/albums.liquid
+++ b/src/includes/media/music/tables/all-time/albums.liquid
@ -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>
--- a/src/includes/media/music/tables/all-time/artists.liquid
+++ b/src/includes/media/music/tables/all-time/artists.liquid
@ -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>
--- a/src/includes/metadata/base.liquid
+++ b/src/includes/metadata/base.liquid
@ -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" />
--- a/src/includes/metadata/index.liquid
+++ b/src/includes/metadata/index.liquid
@ -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 -%}