mjml-image-swapper
v1.2.0
Published
Renders separate images for mobile and desktop email viewports
Downloads
15
Readme
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 themj-image-swapper
if you want to test the one already created) npm run build
to build, ornpm 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
andhref
attributes for each image