mjml - šablony pro responzivní emaily poměrně snadno a celkem rychle

Už přes dva roky mám v konceptu postu o mjml poznámku "ROZPRACOVANÉ!". To jsme se s mjml našli poprvé, když jsem připravoval layout emailového newsletteru pro jistý projekt. No a po dvou letech jsme se našli znovu, tentokrát při přípravě layoutu obecných emailů.

mjml je šablonovací systém pro generování responzivních emailů. Všecky ty hnusy tabulek v tabulkách, inline styly, definice písma pro každý element a jiná zvěrstva řeší sám. Samosebou ne vše je v každém mailovacím programu nebo službě stoprocentní, ale to není snad ani email v prostém textu.

Pro editaci lze využít jak online mjml editor, editor mjml-app se zabudovanou validací i kompilací, editor Atom s pluginem, stejně tak Sublime text, tak jakýkoliv textový editor, balíček pro node.js (npm) a příkazový řádek. Také lze využít drag&drop online editor služby Mailjet.

Ostatně pomocí čeho mjml soubor připravit je popsáno v podrobné dokumentaci...

Před dvěma lety jsem bojoval s několika problémy, které, jak se ukázalo, způsobily různé verze mjml - dokumentace, ukázkové šablony, pluginy do Atomu byly pro verzi 3.3.5, ale aktuální verze mjml byla 4.0.3 a některé komponenty byly změněné a migrace z verze 3 na 4 (lze příkazem i v online editoru) nefungovala správně. Po downgradu na 3.3.5 mi zmizelo několik problematických momentů a vygenerované html konečně vypadalo správně. To jen jako upozornění, že ne vždy jde vše hladce.

Samostatná kapitola jsou obrázky. Výsledný email musí obsahovat absolutní url na obrázky, při vývoji je ale snazší pracovat s relativní cestou. S tím je třeba se nějak vypořádat. Pro správnou funkci preview pluginu do Atomu jsem si tehdy musel "dát obrázky na web", jinak se vůbec nezobrazovaly.

Je tu ale i možnost vložit obrázky přímo do emailu pomocí mjml-with-images-loader pro Webpack, ale ještě jsem to nezkoušel.

Ohledně obrázků v emailech jsem studoval ještě A Guide for SVG Support in Email | CSS-Tricks, SVG | Campaign Monitor a How to Embed Images in Your Emails: The Facts | SendGrid.

Pro integraci do Symfony potažmo Twigu existuje balík Symfony bundle for MJML nebo AssoconnectMJMLBundle (o čemž je článek Using MJML email templates with Symfony).

Vybrat a implementovat jeden z nich mě ještě čeká.

---

P.S.: Po dalším průzkumu a samostudiu jsem nakonec jen "vypáral" z balíčku asi tak tři řádky kódu -  samotné zavolání kompilace mjml, protože jsem potřeboval přidat pro render další parametry, což balíček neumožňuje, a naopak zbytek funkcí jsem vůbec nepotřeboval.