1 files changed, 13 insertions, 5 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
index 0d08c11..3ad16b2 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.gallery.js
@@ -1,8 +1,7 @@
 import React, { Component } from 'react'
 
 export const Gallery = ({ media }) => {
-  const { image_order, image_lookup, display_lookup, thumbnail_lookup } = media.settings
-
+  const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
   // console.log(display_lookup)
   // console.log(width)
   return (
@@ -10,9 +9,10 @@ export const Gallery = ({ media }) => {
       <div className='gallery-scroll'>
         {image_order.map(id => {
           const image = display_lookup[id]
+          const caption = (caption_lookup && caption_lookup[id]) || {}
           // console.log(image)
           return (
-            <GalleryItem key={id} image={image} />
+            <GalleryItem key={id} image={image} caption={caption} />
           )
         })}
       </div>
@@ -20,10 +20,18 @@ export const Gallery = ({ media }) => {
   )
 }
 
-const GalleryItem = ({ image }) => {
+const GalleryItem = ({ image, caption }) => {
+  console.log(image)
   return (
     <div className='gallery-item'>
-      <img src={image.url} />
+      <div className='gallery-image'>
+        <img src={image.url} />
+      </div>
+      {caption.caption && (
+        <div className='gallery-caption'>
+          {caption.caption}
+        </div>
+      )}
     </div>
   )
 }