From e9152585176e8ed0a511c03d492720373d547e00 Mon Sep 17 00:00:00 2001
From: Lightling <contact@lightling.xyz>
Date: Sat, 13 Apr 2024 02:16:51 -0400
Subject: [PATCH] styles on thumbnails/images

- thumbnail and image background
- apply thumbnail position as object-position directly
---
 src/views/gallery/gallery-tile.vue     | 10 +++++++++-
 src/views/gallery/gallery-utilities.ts |  6 ++++++
 src/views/gallery/gallery-view.vue     | 10 +++++++++-
 src/views/gallery/gallery.d.ts         | 11 +++++++++--
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/views/gallery/gallery-tile.vue b/src/views/gallery/gallery-tile.vue
index 7065eda..fffb8c9 100644
--- a/src/views/gallery/gallery-tile.vue
+++ b/src/views/gallery/gallery-tile.vue
@@ -15,6 +15,14 @@ defineEmits<{
 }>()
 
 const title = computed(() => getTitleFromEntryOrId(props.entry, props.id))
+const styles = computed(() => {
+  const stylesReturn: Record<string, string> = {}
+  if (!!props.entry.thumbnailBackground) {
+    stylesReturn.background = props.entry.thumbnailBackground
+  }
+  stylesReturn['object-position'] = props.entry.thumbnailPosition || 'center center'
+  return stylesReturn
+})
 </script>
 
 <template lang="pug">
@@ -27,7 +35,7 @@ const title = computed(() => getTitleFromEntryOrId(props.entry, props.id))
     img(
       :src='entry.thumbnailUrl || entry.url'
       :alt='entry.description || id'
-      :data-thumbnail-position='entry.thumbnailPosition || "center center"'
+      :style='styles'
     )
   .caption-wrapper
     p.variants(
diff --git a/src/views/gallery/gallery-utilities.ts b/src/views/gallery/gallery-utilities.ts
index 6386903..f5be88f 100644
--- a/src/views/gallery/gallery-utilities.ts
+++ b/src/views/gallery/gallery-utilities.ts
@@ -38,6 +38,12 @@ export const _amendVariantWithDefaults = (parent: GalleryEntryInheritedPropertie
   if (!variant.thumbnailPosition && !!parent.thumbnailPosition) {
     variant.thumbnailPosition = parent.thumbnailPosition
   }
+  if (!variant.thumbnailBackground && !!parent.thumbnailBackground) {
+    variant.thumbnailBackground = parent.thumbnailBackground
+  }
+  if (!variant.background && !!parent.background) {
+    variant.background = parent.background
+  }
 
   return variant
 }
diff --git a/src/views/gallery/gallery-view.vue b/src/views/gallery/gallery-view.vue
index 0becfa4..46c1329 100644
--- a/src/views/gallery/gallery-view.vue
+++ b/src/views/gallery/gallery-view.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import type { GalleryEntry, GalleryList } from './gallery'
 import { type GalleryListDefinition } from 'content/routes.js'
@@ -27,6 +27,13 @@ const routeStore = useRouteStore()
 const routeConfig = routeStore._routes[currentRoute.path.substring(0, currentRoute.path.length - 5)] as GalleryListDefinition
 const routeSubConfig = routeStore._routes[currentRoute.path]
 const title = ref('')
+const styles = computed(() => {
+  const stylesReturn: Record<string, string> = {}
+  if (!!entry.value.background) {
+    stylesReturn.background = entry.value.background
+  }
+  return stylesReturn
+})
 
 onMounted(async () => {
   config.value = await fetchAndParseYaml<GalleryList>(routeConfig.config)
@@ -51,6 +58,7 @@ onMounted(async () => {
     .view-outlet
       img(
         :src='entry.url || entry.thumbnailUrl'
+        :style='styles'
       )
     .view-content
       p {{ title }}
diff --git a/src/views/gallery/gallery.d.ts b/src/views/gallery/gallery.d.ts
index 87bdbc7..28efb0d 100644
--- a/src/views/gallery/gallery.d.ts
+++ b/src/views/gallery/gallery.d.ts
@@ -4,6 +4,10 @@
  * that can be passed down from a top-level entry down to its variants
  */
 export type GalleryEntryInheritedProperties = {
+  /**
+   * css background applied to the image (useful for transparent images)
+   */
+  background?: string
   /**
    * [SUPPORTS MARKDOWN] a place for the siteowner to describe the entry
    */
@@ -22,10 +26,13 @@ export type GalleryEntryInheritedProperties = {
    * @see {@link GalleryList.tags}
    */
   tags: string[]
+  /**
+   * css background applied to the thumbnail (useful for transparent images)
+   */
+  thumbnailBackground?: string
   /**
    * the position of the thumbnail;
-   * reflects this as a dataset attribute that can be targeted by CSS selectors
-   * for the purpose of positioning the thumbnail
+   * this will be applied as css `object-position`
    */
   thumbnailPosition?: string
   /**