feat: landing page image card group

packages/portal/src/components/authored/AuthoredHead.vue

@@ -38,7 +38,7 @@
         cols="12"
         class="col-lg-8"
       >
-        <ImageWithAttribution
+        <ImageWithAttributionContainer
           v-if="heroImage"
           :src="heroImage.url"
           :content-type="heroImage.contentType"
@@ -58,7 +58,7 @@
     name: 'AuthoredHead',
 
     components: {
-      ImageWithAttribution: () => import('../../components/image/ImageWithAttribution')
+      ImageWithAttributionContainer: () => import('../../components/image/ImageWithAttributionContainer')
     },
 
     props: {

packages/portal/src/components/browse/BrowseSections.vue

@@ -35,7 +35,7 @@
         :right-image-width="imageCompareImage(section, 1) ? imageCompareImage(section, 1).width : null"
         :right-image-height="imageCompareImage(section, 1) ? imageCompareImage(section, 1).height : null"
       />
-      <ImageWithAttribution
+      <ImageWithAttributionContainer
         v-else-if="contentType(section, 'ImageWithAttribution')"
         :src="section.image ? section.image.url : null"
         :content-type="section.image ? section.image.contentType : null"
@@ -77,7 +77,7 @@
       ContentRichText: () => import('../content/ContentRichText'),
       EmbedHTML: () => import('../embed/EmbedHTML'),
       ImageComparisonSlider: () => import('../image/ImageComparisonSlider'),
-      ImageWithAttribution: () => import('../image/ImageWithAttribution')
+      ImageWithAttributionContainer: () => import('../image/ImageWithAttributionContainer')
     },
 
     props: {

packages/portal/src/components/generic/StackedCardsSwiper.vue

@@ -70,6 +70,17 @@
   import swiperMixin from '@/mixins/swiper';
   import { EffectCoverflow, Keyboard, Lazy } from 'swiper';
 
+  const SRCSET_PRESETS = {
+    small: { w: 245, h: 440, fit: 'fill' },
+    medium: { w: 260, h: 420, fit: 'fill' },
+    large: { w: 280, h: 400, fit: 'fill' },
+    xl: { w: 300, h: 400, fit: 'fill' },
+    xxl: { w: 320, h: 370, fit: 'fill' },
+    xxxl: { w: 355, h: 345, fit: 'fill' },
+    wqhd: { w: 405, h: 323, fit: 'fill' },
+    '4k': { w: 480, h: 470, fit: 'fill' }
+  };
+
   export default {
     name: 'StackedCardsSwiper',
 
@@ -143,7 +154,7 @@
           '(max-width: 991px) 280px',
           '(max-width: 1199px) 300px',
           '(max-width: 1439px) 320px',
-          '(max-width: 3839px) 355px',
+          '(max-width: 3019px) 355px',
           '480px'
         ].join(',')
       };
@@ -168,17 +179,7 @@
         }
       },
       imageSrcset(image) {
-        return this.$contentful.assets.responsiveImageSrcset(image,
-                                                             {
-                                                               small: { w: 245, h: 440, fit: 'fill' },
-                                                               medium: { w: 260, h: 420, fit: 'fill' },
-                                                               large: { w: 280, h: 400, fit: 'fill' },
-                                                               xl: { w: 300, h: 400, fit: 'fill' },
-                                                               xxl: { w: 320, h: 370, fit: 'fill' },
-                                                               xxxl: { w: 355, h: 345, fit: 'fill' },
-                                                               wqhd: { w: 405, h: 323, fit: 'fill' },
-                                                               '4k': { w: 480, h: 470, fit: 'fill' }
-                                                             });
+        return this.$contentful.assets.responsiveImageSrcset(image, SRCSET_PRESETS);
       }
     }
   };

packages/portal/src/components/image/ImageOptimised.vue

@@ -6,13 +6,17 @@
     :blank-width="optimisedWidth"
     :blank-height="optimisedHeight"
     :alt="alt"
+    :srcset="imageSrcset"
+    :sizes="imageSizes"
   />
   <b-img
     v-else
     :src="optimisedSrc"
     :width="optimisedWidth"
     :height="optimisedHeight"
     :alt="alt"
+    :srcset="imageSrcset"
+    :sizes="imageSizes"
   />
 </template>
 
@@ -53,6 +57,14 @@
       lazy: {
         type: Boolean,
         default: true
+      },
+      imageSrcset: {
+        type: String,
+        default: null
+      },
+      imageSizes: {
+        type: String,
+        default: null
       }
     },
 

packages/portal/src/components/image/ImageWithAttribution.vue

@@ -1,32 +1,21 @@
 <template>
-  <b-container
-    fluid
-    class="image-wrapper"
-  >
-    <b-jumbotron
-      fluid
-      text-variant="white"
-      class="mt-0"
-      :class="hero ? 'hero' : ''"
-      @click="!citeCollapsed ? toggleCite : null"
-    >
-      <figure>
-        <ImageOptimised
-          v-if="src"
-          :src="src"
-          :width="width"
-          :height="height"
-          :alt="alt"
-          :content-type="contentType"
-          :max-width="1100"
-          data-qa="image"
-        />
-        <AttributionToggle
-          :attribution="attribution"
-        />
-      </figure>
-    </b-jumbotron>
-  </b-container>
+  <figure>
+    <ImageOptimised
+      v-if="src"
+      :src="src"
+      :width="width"
+      :height="height"
+      :alt="alt"
+      :content-type="contentType"
+      :max-width="maxWidth"
+      data-qa="image"
+      :image-srcset="imageSrcset"
+      :image-sizes="imageSizes"
+    />
+    <AttributionToggle
+      :attribution="attribution"
+    />
+  </figure>
 </template>
 
 <script>
@@ -42,14 +31,6 @@
     },
 
     props: {
-      header: {
-        type: String,
-        default: ''
-      },
-      lead: {
-        type: String,
-        default: ''
-      },
       src: {
         type: String,
         required: true,
@@ -67,10 +48,6 @@
         type: String,
         default: ''
       },
-      name: {
-        type: String,
-        default: null
-      },
       contentType: {
         type: String,
         default: null
@@ -79,75 +56,29 @@
         type: Object,
         required: true
       },
-      hero: {
-        type: Boolean,
-        default: false
+      maxWidth: {
+        type: Number,
+        default: 1100
+      },
+      imageSrcset: {
+        type: String,
+        default: null
+      },
+      imageSizes: {
+        type: String,
+        default: null
       }
     }
   };
 </script>
 
 <style lang="scss" scoped>
-  @import '@europeana/style/scss/variables';
-
-  .image-wrapper {
-    padding: 0;
-  }
+figure {
+  overflow: hidden;
 
-  .jumbotron {
-    height: auto;
-    background: $white;
-
-    @media (min-width: $bp-medium) {
-      margin-left: -1rem;
-      margin-right: -1rem;
-    }
-
-    @media (min-width: $bp-large) {
-      margin-left: -3rem;
-      margin-right: -3rem;
-    }
-
-    &::before {
-      display: none;
-    }
-
-    figure {
-      overflow: hidden;
-
-      img {
-        width: 100%;
-        object-fit: cover;
-      }
-    }
-
-    &.hero {
-      min-height: initial;
-
-      figure {
-        height: 0;
-        padding-top: 56.25%;
-        position: relative;
-        margin: 0;
-        display: flex;
-        justify-content: center;
-        width: 100%;
-
-        img {
-          position: absolute;
-          top: 0;
-          left: 0;
-          height: 100%;
-          object-fit: cover;
-          width: 100%;
-        }
-      }
-    }
-
-    .container {
-      max-width: none;
-      justify-content: center;
-      align-items: center;
-    }
+  img {
+    width: 100%;
+    object-fit: cover;
   }
+}
 </style>