• #SPIP : un modèle pour mettre en forme le contenu des newsletters

    Un besoin qui remonte régulièrement quand on envoie des newsletter avec SPIP et le trio magique Newsletter/Mailsubscriber/Mailshot, c’est la possibilité de mettre en forme le contenu pour le rendre plus dynamique. Bien sûr, et c’est là que se cache le pot de pus, ça doit fonctionner sur toutes les plateformes et avec tous les logiciels, webmails compris.

    Principe

    J’ai donc utilisé l’astuce lue je ne sais plus où (de @rastapopoulos je crois ?) de passer par des sélections éditoriales (https://contrib.spip.net/Selections-editoriales) pour afficher le contenu dans les newsletters.

    Il suffit donc de faire un modèle simple qui affiche ces sélections et le tour est joué.

    Pour ça, j’ai regardé ce qui se faisait chez Mailjet et le principe est d’avoir un template qui affiche de base tout en une colonne et, via des Media Queries, gérer les mises en forme plus complexes (ligne, 2 colonnes, etc...). Ça semble malin car les cas où on doit afficher le contenu en 1 colonne, c’est sur smartphone et ces applis sont les moins aptes à gérer Media Queries.

    Il y a donc 2 fichiers

    La feuille de styles insérée dans le modèle de la newsletter :
    https://gitlab.com/jmoupah/zcm/blob/master/css/newsletter_rwd.css.html
    le modèle
    https://gitlab.com/jmoupah/zcm/blob/master/modeles/selection_newsletter.html

    Le modèle

    {{Affichage pleine largeur}} <selection_newsletterX>
    {{Affichage par ligne}} <selection_newsletterX|affichage=ligne>
    {{Modèle par colonne}} <selection_newsletterX|affichage=colonne>

    Le résultat

    D’après mes 1ers tests, ça semble fonctionner sur pas mal de configs (Thuberbird, Yahoo/GMail/Zimbra webmail, GMail sur Android). Étonnamment ^^, MS Outlook n’affiche pas bien les 2 colonnes. N’ayant pas cette usine à gaz, je n’ai pas encore pu creuser. Et je n’ai pas encore pu tester sur Mail de MacOS non plus.

    Donc voilà, si qq1 veut tester et faire des retours, je prends.

    #spip_recette #webdev #integrationweb

    • Hello,
      Je n’arrive pas à faire fonctionner le modèle. Si je sélectionne squelettes/newsletters/selection_newsletter.html j’ai une page blanche en previsu et lors d’un test d’envoi j’ai « Une erreur est survenue lors de la génération de la newsletter. »
      J’ai testé avec <selection_newsletter13> dans le texte de la newsletter. Il y a 2 articles (publiés) dans la sélection.

      Est-ce que squelettes/newsletter_rwd.css.html est au bon endroit ? Je comprends pas comment cette css est appelée, mais bon, ça c’est moi.

    • Pas sûr de bien comprendre la question :)

      Il faut insérer <selection_newsletter13> dans le texte de la newsletter et prévisualiser la newsletter de façon classique.

      Et il faut ranger le squelette newsletter_rwd.css.html dans ton dossier css par ex et ajouter <INCLURE{fond=css/newsletter_rwd.css} /> dans les styles de ta newsletter.