Bedienungsanleitung Modul-Funktionen

Initiale Modul Konfiguration nach Installation

Falls ein Setting deaktiviert ist seitens Magento, dann die Option Use system value deaktivieren, danach lässt sich das Setting wieder bearbeiten.

Enable/Disable des Moduls

  • Navigieren Sie zu Stores >> Settings >> Configuration >> TechDivision >> Pagebuilder Responsive Image

  • Aktivieren Sie das Modul unter General >> Enable responsive images for pagebuilder

  • save Config

manual 01

Einstellen der benötigten Breakpoints

  • Navigieren Sie zu Stores >> Settings >> Configuration >> TechDivision >> Pagebuilder Responsive Image

  • Öffnen Sie die Optionen der Breakpoints unter Image max width >> Screen width xx

  • Setzen Sie die für ihren Shop entsprechend benötigten Breakpoints ihrer responsiv Images

  • save Config

manual 02

Scope abhängige Einstellung der benötigten Breakpoints

  • Stellen Sie den benötigten Scope ein unter Scope >> Mein benötigter Scope oben links

  • Stellen Sie die nun für diesen Scope benötigten Breakpoints ein

  • save Config

Frontend Auswirkungen

Wenn das Modul aktiv ist wird nun das 'srcset' Attribut von Bildern (img-Tag) auf Frontend-Seiten mit den konfigurierten Werten versorgt

Standard Responsive Images
<img class="pagebuilder-mobile-hidden" src="https://magento245ee.test/media/wysiwyg/pexels-pixabay-36717.jpg" alt="" title="" data-element="desktop_image" data-pb-style="RM0ENU6">
<img class="pagebuilder-mobile-only" src="https://magento245ee.test/media/wysiwyg/pexels-pixabay-36717.jpg" alt="" title="" data-element="mobile_image" data-pb-style="O9HREC6">
<img class="pagebuilder-mobile-hidden" src="https://magento245ee.test/media/wysiwyg/pexels-pixabay-36717.jpg" alt="" title="" data-element="desktop_image" data-pb-style="RM0ENU6" srcset="https://magento245ee.test/media/wysiwyg/cache/480/wysiwyg/pexels-pixabay-36717_500.jpg 480w, https://magento245ee.test/media/wysiwyg/cache/640/wysiwyg/pexels-pixabay-36717_700.jpg 640w, https://magento245ee.test/media/wysiwyg/cache/768/wysiwyg/pexels-pixabay-36717_800.jpg 768w, https://magento245ee.test/media/wysiwyg/cache/1024/wysiwyg/pexels-pixabay-36717_1200.jpg 1024w, https://magento245ee.test/media/wysiwyg/cache/1440/wysiwyg/pexels-pixabay-36717_1500.jpg 1440w, https://magento245ee.test/media/wysiwyg/cache/2400/wysiwyg/pexels-pixabay-36717_1920.jpg 2400w">
<img class="pagebuilder-mobile-only" src="https://magento245ee.test/media/wysiwyg/pexels-pixabay-36717.jpg" alt="" title="" data-element="mobile_image" data-pb-style="O9HREC6" srcset="https://magento245ee.test/media/wysiwyg/cache/480/wysiwyg/pexels-pixabay-36717_500.jpg 480w, https://magento245ee.test/media/wysiwyg/cache/640/wysiwyg/pexels-pixabay-36717_700.jpg 640w, https://magento245ee.test/media/wysiwyg/cache/768/wysiwyg/pexels-pixabay-36717_800.jpg 768w, https://magento245ee.test/media/wysiwyg/cache/1024/wysiwyg/pexels-pixabay-36717_1200.jpg 1024w, https://magento245ee.test/media/wysiwyg/cache/1440/wysiwyg/pexels-pixabay-36717_1500.jpg 1440w, https://magento245ee.test/media/wysiwyg/cache/2400/wysiwyg/pexels-pixabay-36717_1920.jpg 2400w">
manual 03
manual 04