#636: Responsive breakpoint switcher - worked on pulling mobile images in mobile viewport

Author: yolouiese

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/image/_default.less

@@ -40,8 +40,3 @@
         border-radius: inherit;
     }
 }
-
-.mobile-viewport .pagebuilder-desktop-image,
-.desktop-viewport .pagebuilder-mobile-image {
-    display: none;
-}

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/image/_import.less

@@ -8,4 +8,3 @@
 //  _____________________________________________
 
 @import './_default.less';
-@import './_mobile.less';

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/image/_mobile.less

@@ -11,20 +11,11 @@
         <scope args="getUploader().getUiComponent()">
             <render />
         </scope>
-        <div class="pagebuilder-desktop-image">
-            <img if="data.desktop_image.attributes().src"
-                 attr="data.desktop_image.attributes"
-                 class="preview-image"
-                 css="data.desktop_image.css"
-                 ko-style="data.desktop_image.style" />
-        </div>
-        <div class="pagebuilder-mobile-image">
-            <img if="data.mobile_image.attributes().src"
-                 attr="data.mobile_image.attributes"
-                 class="preview-image"
-                 css="data.mobile_image.css"
-                 ko-style="data.mobile_image.style" />
-        </div>
+        <img if="getViewportImageData().attributes().src"
+             attr="getViewportImageData().attributes"
+             class="preview-image"
+             css="getViewportImageData().css"
+             ko-style="getViewportImageData().style" />
         <figcaption if="data.caption.html()"
                     attr="data.caption.attributes"
                     css="data.caption.css"

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/image/preview.js

@@ -86,4 +86,13 @@ export default class Preview extends BasePreview {
             uploader.visibleControls = !this.isSnapshot();
         });
     }
+
+    /**
+     * Get viewport image data
+     */
+    public getViewportImageData() {
+        const desktopImageData = this.data.desktop_image;
+        const mobileImageData = this.data.mobile_image;
+        return this.viewport() === "mobile" ? mobileImageData : desktopImageData
+    }
 }