@asd20/ui 3.2.378 → 3.2.379

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.378",
+  "version": "3.2.379",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20ImageGallery/index.vue

@@ -19,6 +19,7 @@
         target="_blank"
       >
         <img :src="image.thumbnailUrl" :alt="image.alt" />
+        <p class="grid-overlay">{{ truncatedDescription(image.credits) }}</p>
       </a>
     </asd20-grid>
 
@@ -38,6 +39,7 @@
           :key="index"
         >
           <img :src="image.url" :alt="image.alt" />
+          <p class="text-overlay">{{ image.credits }}</p>
         </asd20-swipe-item>
       </asd20-swipe>
     </transition>
@@ -50,6 +52,8 @@ import Asd20Swipe from '../../../components/molecules/Asd20Swipe'
 import Asd20SwipeItem from '../../../components/atoms/Asd20SwipeItem'
 import Asd20Icon from '../../../components/atoms/Asd20Icon'
 
+import truncate from 'lodash-es/truncate'
+
 export default {
   name: 'Asd20ImageGallery',
 
@@ -82,6 +86,7 @@ export default {
             ).url,
             url: (i.files.find(f => f.name === 'full') || i.files[0]).url,
             alt: i.metadata.alt,
+            credits: i.metadata.credits,
             // isCover: i.isCover,
           }))
       )
@@ -93,6 +98,9 @@ export default {
       this.selectedIndex = index + 1
       this.showSlideshow = true
     },
+    truncatedDescription(description) {
+      return truncate(description, { length: 50, separator: /,? +/ })
+    },
   },
 }
 </script>
@@ -156,6 +164,15 @@ export default {
     object-fit: cover;
     object-position: center;
   }
+  .grid-overlay {
+    position: absolute;
+    color: #fff;
+    background: rgba(50, 50, 50, 0.5);
+    bottom: 0;
+    padding: space(0.25);
+    font-size: 12px !important;
+    width: 100%;
+  }
 }
 .image-slideshow {
   position: fixed;
@@ -181,10 +198,26 @@ export default {
   opacity: 0;
   transform: scale(0);
 }
+.asd20-swipe-item {
+  .text-overlay {
+    position: absolute;
+    display: block;
+    bottom: space(2);
+    color: #fff;
+    background: rgba(50, 50, 50, 0.7);
+    padding: space(0.5);
+    max-width: 80vw;
+    text-align: center;
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-image-gallery {
-    // padding: space(0) space(3) space(1) space(3);
+    .image-grid {
+      .grid-overlay {
+        font-size: 14px !important;
+      }
+    }
   }
 }
 </style>

package/src/data/page-queries/sublanding-page-query-result.json

@@ -58,7 +58,8 @@
                     }
                   ],
                   "metadata": {
-                    "alt": "This is ALT text."
+                    "alt": "This is ALT text.",
+                    "credits": "John Smith competes in the 100m backstroke. He's really a great swimmer. No, really. And this picture demonstrates just what a great swimmer he is."
                   }
                 },
                 {
@@ -74,7 +75,8 @@
                     }
                   ],
                   "metadata": {
-                    "alt": "This is ALT text."
+                    "alt": "This is ALT text.",
+                    "credits": "Jane Doe competes in the 100m freestyle."
                   }
                 },
                 {
@@ -90,7 +92,8 @@
                     }
                   ],
                   "metadata": {
-                    "alt": "This is ALT text."
+                    "alt": "This is ALT text.",
+                    "credits": "The Discovery Canyon Campus swimming pool."
                   }
                 }
               ],