update gallery-view with the data changes

libs/types/src/content/templates/gallery-list.d.ts

@@ -39,10 +39,10 @@ export type GalleryEntryWithoutVariants = {
  */
 export type GalleryEntryWithVariants = {
   /**
-   * The id of the entry from the {@link GalleryEntry variants} collection to display when the page first loads.
+   * The index of the entry from the {@link GalleryEntry variants} collection to display when the page first loads.
    * If this is not defined, the first entry will be chosen instead.
    */
-  defaultVariant?: string
+  defaultVariant?: number
   /**
    * Variants are a collection of alternate media to display for the entry.
    * This changes based on the {@link GalleryEntryFormat format} of the entry:
@@ -51,7 +51,7 @@ export type GalleryEntryWithVariants = {
    * - For all other media, this is put into a carousel,
    *   where the {@link GalleryEntry.defaultVariant default} or selected variant is displayed in the main viewer
    */
-  variants: Record<string, GalleryEntryWithoutVariants>
+  variants: GalleryEntryWithoutVariants[]
 } & GalleryEntrySharedProperties
 
 /**

projects/frontend/src/views/gallery/gallery-view.vue

@@ -31,24 +31,25 @@ const routeSubConfig = routeStore._routes[currentRoute.path]
 const description = computed(() => marked.parse(resolved.value.description || '') as string)
 const title = computed(() => marked.parse(resolved.value.title || currentRoute.query.id!.toString()) as string)
 const url = computed(() => (resolved.value as GalleryEntryWithoutVariants).url)
-const hasVariants = computed(() => !!(resolved.value as GalleryEntryWithVariants).variants)
 const fields = computed(() => {
   const toReturn = {} as Record<string, any>
   if (!!resolved.value.date) {
     toReturn.date = resolved.value.date
   }
   if (!!resolved.value.warnings) {
-    toReturn.warning = resolved.value.warnings
+    toReturn.warnings = resolved.value.warnings
   }
   return toReturn
 })
 const variants = computed(() => (resolved.value as GalleryEntryWithVariants).variants)
 const variantsCount = computed(() => Object.keys((resolved.value as GalleryEntryWithVariants).variants).length)
-const currentSelection = defineModel('currentSelection', { type: String, default: '' })
+const currentSelection = defineModel('currentSelection', { type: Number, default: 0 })
-const currentUrl = computed(() => hasVariants ? (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].url : url)
+const currentUrl = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].url)
+const currentAlt = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].alternativeText)
+const currentCaption = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].caption)
 const carousel = ref(null! as HTMLElement)
 
-const onVariantSelected = (event: Event, id: string) => {
+const onVariantSelected = (event: Event, id: number) => {
   currentSelection.value = id
 }
 
@@ -78,11 +79,7 @@ onMounted(async () => {
   window.routeConfig = {...routeConfig}
   window.routeSubConfig = {...routeSubConfig}
   window.routeContentConfig = {...resolved.value}
-
+  currentSelection.value = (resolved.value as GalleryEntryWithVariants).defaultVariant || 0
-  if (hasVariants) {
-    currentSelection.value = (resolved.value as GalleryEntryWithVariants).defaultVariant || Object.keys((resolved.value as GalleryEntryWithVariants).variants)[0]
-  }
-
   ready.value = true
   emits('loaded')
 })
@@ -97,10 +94,10 @@ onMounted(async () => {
       .view-outlet
         img(
           :src='currentUrl'
+          :title='currentCaption || currentAlt || description'
+          :alt='currentAlt || currentCaption || description'
         )
-        .view-carousel(
+        .view-carousel
-          v-if='hasVariants'
-        )
           button.left(
             @click='onButtonClicked($event, -1)'
           )
@@ -112,8 +109,9 @@ onMounted(async () => {
             img(
               v-for='(variant, id) in variants'
               :class='{ active: id === currentSelection }'
+              :alt='variant.alternativeText || variant.caption || description'
               :src='variant.thumbnailUrl || variant.url'
-              :title='variant.title || id'
+              :title='variant.caption || id'
               @click='onVariantSelected($event, id)'
             )
           button.right(