mjml-image-swapper

A MJML plugin to allow for more responsive images through separate images in mobile and desktop. Since MJML is mobile first design, this package will default to using the mobile image if the responsive styles are stripped from the HEAD.

Installation

• Clone the repo
• npm install inside
• Add your component inside components folder
• Add your component route to .mjmlconfig (make sure to link the one in the /lib folder)
• Use your own component in index.mjml (or uncomment the mj-image-swapper if you want to test the one already created)
• npm run build to build, or npm start if you want to watch recompile on each file change
• Result will be in index.html

Attributes

All attributes are passthroughs for the mj-image component. Not all attributes are supported at this time.

attribute | unit | description | default

desktop-image-padding | px | Only applied to the desktop image. | 0 desktop-image-src | url | Only applied to the desktop image. | null desktop-image-width | px | Only applied to the desktop image. | null mobile-image-padding | px | Only applied to the mobile image. | 0 mobile-image-src | url | Only applied to the mobile image. | null mobile-image-width | px | Only applied to the mobile image. | null alt | string | Applied to both images. | '' href | url | Applied to both images. | null

TODO

• Add support for complete list of attributes on mj-image
• Refactor component for more DRY handling of small and large images
• Add convenience attributes to passthrough to both images
• Add separate alt and href attributes for each image