From d1f1fa2645d93524207bb0095f39c6bb616ce9c0 Mon Sep 17 00:00:00 2001
From: Alexis Santini <santini.alexis@gmail.com>
Date: Fri, 27 Aug 2021 10:23:49 +0200
Subject: [PATCH 1/2] Adding "imgClass" prop to the CldImage vue component

---
 src/components/CldImage/CldImage.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/CldImage/CldImage.vue b/src/components/CldImage/CldImage.vue
index 63c3bc1..b116ef4 100644
--- a/src/components/CldImage/CldImage.vue
+++ b/src/components/CldImage/CldImage.vue
@@ -73,6 +73,14 @@ export default {
       type: String,
       default: "",
       validator: value => !value || !!ACCESSIBILITY_TRANSFORMATIONS[value]
+    },
+
+    /**
+     * The css class that will be applied to the <img> tag
+     */
+    imgClass: {
+      type: String,
+      default: "",
     }
   },
   data() {
@@ -86,7 +94,7 @@ export default {
       this.imageLoaded = true;
     },
     renderImageOnly(src, hasPlaceholder = false) {
-      const imgClass = `${IMAGE_CLASSES.DEFAULT} ${!this.imageLoaded ? IMAGE_CLASSES.LOADING : IMAGE_CLASSES.LOADED}`
+      const imgClass = `${IMAGE_CLASSES.DEFAULT} ${!this.imageLoaded ? IMAGE_CLASSES.LOADING : IMAGE_CLASSES.LOADED} ${this.imgClass}`
       const style = {
         ...(this.responsive ? RESPONSIVE_CSS[this.responsive] : {}),
         ...(!this.imageLoaded && hasPlaceholder ? IMAGE_WITH_PLACEHOLDER_CSS[IMAGE_CLASSES.LOADING] : {})

From 1ac8f724756b406e6ecd6d3cbd8b66f99445f2bf Mon Sep 17 00:00:00 2001
From: Alexis Santini <santini.alexis@gmail.com>
Date: Mon, 30 Aug 2021 08:36:59 +0200
Subject: [PATCH 2/2] Fix empty space when imgClass prop is empty

---
 src/components/CldImage/CldImage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CldImage/CldImage.vue b/src/components/CldImage/CldImage.vue
index b116ef4..f1bb9b6 100644
--- a/src/components/CldImage/CldImage.vue
+++ b/src/components/CldImage/CldImage.vue
@@ -94,7 +94,7 @@ export default {
       this.imageLoaded = true;
     },
     renderImageOnly(src, hasPlaceholder = false) {
-      const imgClass = `${IMAGE_CLASSES.DEFAULT} ${!this.imageLoaded ? IMAGE_CLASSES.LOADING : IMAGE_CLASSES.LOADED} ${this.imgClass}`
+      const imgClass = `${IMAGE_CLASSES.DEFAULT} ${!this.imageLoaded ? IMAGE_CLASSES.LOADING : IMAGE_CLASSES.LOADED}${this.imgClass ? ` ${this.imgClass}` : ''}`
       const style = {
         ...(this.responsive ? RESPONSIVE_CSS[this.responsive] : {}),
         ...(!this.imageLoaded && hasPlaceholder ? IMAGE_WITH_PLACEHOLDER_CSS[IMAGE_CLASSES.LOADING] : {})