Carnet Wiki

Version 4 — 4 months ago JLuc

Voir aussi : Le plugin newsletters_modeles propose des modèles de newsletter avec mise en page pleine largeur, en ligne ou en colonne.

Contrôler précisément l’ordre des articles joints

DD écrit : Pour l’ordre des articles, la seule solution que j’ai trouvée est d’utiliser Sélections éditoriales en adaptant un modèle de newsletter à mettre dans squelettes/newsletters / : https://pastebin . com/U3MkE7ay (à mettre dans squelettes/newsletters/)

<BOUCLE_rem(CONDITION){si #REM}>
  <!-- titre=<multi>[fr]Simple (une colonne, responsive)[en]Simple (one column, responsive)</multi> -->
  </BOUCLE_rem>
  <BOUCLE_newsletter(NEWSLETTERS){id_newsletter}{statut?}{lang_select}>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>#TITRE</title>
 
 
<!-- Open Graph Protocol -->
      [
      <meta property="og:title" content="(#TITRE|attribut_html)" />]
      <meta property="og:type" content="article" /> [
      <meta property="og:image" content="(#LOGO_NEWSLETTER_NORMAL|sinon{#LOGO_SITE_SPIP}|extraire_attribut{src}|url_absolue)" />] [
      <meta property="og:url" content="(#URL_NEWSLETTER|url_absolue)" />] [
      <meta property="og:description" content="(#INTRODUCTION|supprimer_tags|entites_html)" />] [
      <meta property="og:site_name" content="(#NOM_SITE_SPIP|attribut_html)" />]
 
 
<style type="text/css">
        #outlook a {
          padding: ;
        }
 
 
body {
          width: 100% !important;
        }
 
 
body {
          margin: ;
          padding: ;
        }
 
 
img {
          border: none;
          font-size: 16px;
          font-weight: bold;
          height: auto;
          line-height: 100%;
          outline: none;
          text-decoration: none;
          text-transform: capitalize;
          -ms-interpolation-mode: bicubic;
        }
 
 
img#headerImage {
          font-size: 28px;
        }
 
 
#backgroundTable {
          height: 100% !important;
          margin: ;
          padding: ;
          width: 100% !important;
        }
 
 
body,
        .backgroundTable {
          background-color: #fff;
        }
 
 
#templateContainer {
          border: 1px solid #DDDDDD;
        }
 
 
h1,
        .h1,
        h2,
        .h2,
        h3,
        .h3,
        h4,
        .h4 {
          color: #E15718;
          display: block;
          font-family: 'Helvetica Neue', Helvetica, Arial;
          font-size: 22px;
          font-weight: bold;
          line-height: 100%;
          margin-bottom: 10px;
          text-align: left;
        }
 
 
h1,
        .h1 {
          font-size: 24px;
        }
 
 
h2,
        .h2 {
          font-size: 22px;
        }
 
 
h3,
        .h3 {
          font-size: 16px;
        }
 
 
h4,
        .h4 {
          font-size: 14px;
        }
 
 
h5,
        .h5 {
          font-size: 18px;
        }
 
 
h6,
        .h6 {
          font-size: 12px;
        }
 
 
.chapo {
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
          padding: 2em ;
        }
 
 
#templatePreheader {
          background-color: #fff;
        }
 
 
.preheaderContent div {
          color: #303030;
          font-family: 'Helvetica Neue', Helvetica, Arial;
          font-size: 12px;
          line-height: 100%;
          text-align: left;
        }
 
 
.preheaderContent div a:link,
        .preheaderContent div a:visited {
          color: #58b2ca;
          font-weight: normal;
          text-decoration: underline;
        }
 
 
.preheaderContent div img {
          height: auto;
          max-width: 600px;
        }
 
 
#templateHeader {
          background-color: #FFFFFF;
          border-bottom: ;
        }
 
 
.headerContent {
          color: #202020;
          font-family: 'Helvetica Neue', Helvetica, Arial;
          font-size: 16px;
          font-weight: bold;
          line-height: 120%;
          padding: ;
          text-align: center;
          vertical-align: middle;
        }
 
 
.headerContent a:link,
        .headerContent a:visited {
          color: #58b2ca;
          font-weight: normal;
          text-decoration: underline;
        }
 
 
#headerImage {
          height: auto;
          max-width: 600px !important;
        }
 
 
#templateContainer,
        .bodyContent {
          background-color: #FDFDFD;
        }
 
 
.bodyContent div {
          color: #303030;
          font-family: 'lato', Helvetica, Arial;
          font-size: 16px;
          line-height: 150%;
          text-align: left;
        }
 
 
.bodyContent a,
        .bodyContent div a:link,
        .bodyContent div a:visited,
        .bodyContent div .descriptif a {
          color: #58b2ca;
          font-weight: normal;
          text-decoration: underline;
        }
 
 
.bodyContent div .spip_documents_center {
          display: table;
          clear: both;
          margin: 1em auto;
        }
 
 
.bodyContent div .spip_documents_left {
          margin-right: 15px;
          margin-bottom: 5px;
        }
 
 
.bodyContent div .spip_documents_right {
          margin-left: 15px;
          margin-bottom: 5px;
        }
 
 
.bodyContent img {
          display: inline;
          margin-bottom: 10px;
        }
 
 
#templateFooter {
          background-color: #FDFDFD;
          border-top: ;
        }
 
 
.footerContent div {
          color: #707070;
          font-family: 'Helvetica Neue', Helvetica, Arial;
          font-size: 14px;
          line-height: 125%;
          text-align: left;
        }
 
 
.footerContent div a:link,
        .footerContent div a:visited {
          color: #336699;
          font-weight: normal;
          text-decoration: underline;
        }
 
 
.footerContent img {
          display: inline;
        }
 
 
#social {
          background-color: #eee;
          border: 1px solid #F5F5F5;
        }
 
 
#social div {
          text-align: center;
        }
 
 
#utility {
          background-color: #FDFDFD;
          border-top: 1px solid #F5F5F5;
        }
 
 
#utility div {
          text-align: center;
        }
 
 
img.puce {
          margin-bottom: 0
        } 0
                } 
 
 
.spip_code,
        .spip_cadre {
          color: #606060;
          font-family: Courier, "Courier New", monospace;
        }
 
 
textarea.spip_cadre {
          width: 100%;
        }
 
 
.coloration_code ol {
          list-style: none;
        }
 
 
@media only screen and (max-width: 640px) {
          html,
          body {
            width: 100% !important;
          }
          img {
            max-width: 100% !important;
          }
          #templatePreheader {
            width: 100% !important;
          }
          .preheaderContent,
          .bodyContent,
          .footerContent {
            padding:  !important;
          }
          #templateContainer {
            width: 100% !important;
            border:  !important;
          }
          #templateHeader {
            width: 100% !important;
            border:  !important;
          }
          #templateBody {
            width: 100% !important;
          }
          #templateFooter {
            width: 100% !important;
          }
          #canspamBar {
            width: auto !important;
          }
          .archive_link {
            max-width: 50%
          }
          .padding {
            padding-left:  !important;
            padding-right:  !important;
          }
          .text {
            font-size: 16px !important;
            color: #101010 !important;
          }
          blockquote.spip p {
            border-left: 5px solid #eee;
            padding-left: 10px;
          }
        }
 
 
</style>
    </head>
 
 
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #fff;width: 100% !important;">
      <center>
        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="margin: 0;padding: 0;background-color: #fff;height: 100% !important;width: 100% !important;">
          <tr>
            <td align="center" valign="top" style="border-collapse: collapse;">
              <!-- // Begin Template Preheader \\ -->
              <table border="0" cellpadding="10" cellspacing="0" max-width="600" id="templatePreheader" style="background-color: #fff;">
                <tr>
                  <td valign="top" class="preheaderContent" style="border-collapse: collapse;">
                    <!-- // Begin Module: Standard Preheader \ -->
                    <table border="0" cellpadding="10" cellspacing="0" width="100%">
                      <tr>
                        <td valign="top" style="border-collapse: collapse;" class="archive_link">
                          <div style="color: #505050;font-family: Arial;font-size: 12px;line-height: 100%;text-align: left;">
                            <:newsletter:info_email_not_displaying:> 
                              <a href="#URL_NEWSLETTER" target="_blank" style="color: #58b2ca;font-weight: normal;text-decoration: underline;">
                                <:newsletter:info_email_voir_en_ligne:>
                              </a>.
                          </div>
                        </td>
                      </tr>
                    </table>
                    <!-- // End Module: Standard Preheader \ -->
                  </td>
                </tr>
              </table>
              <!-- // End Template Preheader \\ -->
              <table border="0" cellpadding="0" cellspacing="0" max-width="600" id="templateContainer" style="border: 1px solid #DDDDDD;background-color: #FFFFFF;">
                <tr>
                  <td align="center" valign="top" style="border-collapse: collapse;">
                    <!-- // Begin Template Header \\ -->
                    <table border="0" cellpadding="0" cellspacing="0" max-width="600" id="templateHeader" style="background-color: #FFFFFF;border-bottom: ;">
                      <tr>
                        <td class="headerContent" style="border-collapse: collapse;color: #777;font-family: Arial;font-size: 14px;font-weight: bold;line-height: 120%;padding: 0;text-align: center;vertical-align: middle;">
                          <!-- // Begin Module: Standard Header Image \\ -->
                        [(#LOGO_NEWSLETTER|sinon{#LOGO_SITE_SPIP_SURVOL}
                         |image_passe_partout{600,250}
                         |image_recadre{600,250,center,transparent} |inserer_attribut{alt,
                         [(#LOGO_NEWSLETTER_NORMAL|non)#NOM_SITE_SPIP]
                         }
                         |inserer_attribut{style,'margin: 0;padding: 0;width: 100%;border: 0;height: auto;line-height: 100%;outline: none;font-size:18px;text-decoration: none;'}
                          |inserer_attribut{id,headerImage})]
                          <!-- // End Module: Standard Header Image \\ -->
                        </td>
                      </tr>
                    </table>
                    <!-- // End Template Header \\ -->
                  </td>
                </tr>
                <tr>
                  <td align="center" valign="top" style="border-collapse: collapse;">
                    <!-- // Begin Template Body \\ -->
                    <table border="0" cellpadding="0" cellspacing="0" max-width="600" id="templateBody">
                      <table border="0" cellpadding="0" cellspacing="0" max-width="600" id="templateBody">
                        <tr>
                          <td valign="top" class="bodyContent" style="border-collapse: collapse;background-color: #FFFFFF;">
 
 
<!-- // Begin Module: Standard Content \\ -->
                            <table border="0" cellpadding="20" cellspacing="0" width="100%">
                              <tr>
                                <td valign="top" style="border-collapse: collapse;">
                                  <div style="color: #505050;font-family: Arial;font-size: 14px;line-height: 150%;text-align: left;">
                                    <h1 class="#EDIT{titre} h1" style="color: #202020;display: block;font-family: Arial;font-size: 28px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: center;">
                                      #TITRE</h1>
                                    <div class="h6" style="color:#777; text-align:center;">[(#DATE|AFFDATE)]</div>
                                  </div>
                                </td>
                              </tr>
 
 
[
                              <tr>
                                <td valign="top" style="border-collapse: collapse;">
                                  <div class="chapo" style="color: #505050;font-family: 'lato' Arial; font-size: 18px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding : 2em ;">
                                    (#CHAPO)</div>
                                </td>
                              </tr>]
                            </table>
                            <!-- // End Module: Standard Content \\ -->
                          </td>
                        </tr>
 
 
<BOUCLE_actualites(SELECTIONS){identifiant=news}>
                          <BOUCLE_selectionarticles(SELECTIONS_CONTENUS){id_selection}{par rang}>
                            <tr>
                              <td valign="top" class="bodyContent" style="border-collapse: collapse;">
                                <!-- // Begin Module: Standard Content \\ -->
                                <table border="0" cellpadding="20" cellspacing="0" width="100%">
                                  <tr style="background: [(#COMPTEUR_BOUCLE|alterner{white, #FAFAFA})];">
                                    <td valign="top" style="border-collapse: collapse; padding-bottom:2em;">
                                      <div style="color: #505050;font-family: 'lato', Arial;font-size: 16px;line-height: 150%;text-align: left;">
                                        <div style="text-align: center;">
                                          [<a href="#URL">(#LOGO_SELECTIONS_CONTENU
                               |inserer_attribut{alt,'#TITRE'}
                               |inserer_attribut{border,'0'}
                                |inserer_attribut{style,'margin: 0 auto;margin-bottom: 1em;padding: 0;max-width: 100%;border: 0;height: auto;max-height: 80%;line-height: 100%;outline: none;text-decoration: none;'}
                               |inserer_attribut{class,logo})</a>]
                                        </div>
 
 
<h2 class="h2" style="display: block;">
                                          <a href="#URL" style="color:#F86942; text-decoration:none; line-height: 120%;margin-top: 0;margin-right: 0;margin-bottom: 20px;margin-left: 0;text-align: left;font-size: 22px;">#TITRE</a></h2>
 
 
<div class="#EDIT{descriptif} descriptif">#DESCRIPTIF</div>
                                        <!-- <span class="lire_en_ligne"><a href="#URL" style="color:#58b2ca">#TITRE</a></span>-->
                                      </div>
                                    </td>
                                  </tr>
                                </table>
                                <!-- // End Module: Standard Content \\ -->
 
 
</td>
                            </tr>
                            </BOUCLE_selectionarticles>
                            </BOUCLE_actualites>
 
 
<table border="0" cellpadding="20" cellspacing="0" width="100%">
                              <tr>
                                <td valign="top" style="border-collapse: collapse;">
                                  <div style="color: #505050;font-family: 'lato', Arial;font-size: 16px;line-height: 150%;text-align: left;">
                                    [
                                    <div class="#EDIT{texte}">(#TEXTE|image_reduire{560,0})</div>]
                                  </div>
                                </td>
                              </tr>
                            </table>
                      </table>
                      <!-- // End Template Body \\ -->
                  </td>
                </tr>
                <tr>
                  <td align="center" valign="top" style="border-collapse: collapse;">
                    <!-- // Begin Template Footer \\ -->
                    <table border="0" cellpadding="10" cellspacing="0" max-width="600" id="templateFooter" style="background-color: #FFFFFF;border-top: ;">
                      <tr>
                        <td valign="top" class="footerContent" style="border-collapse: collapse;">
 
 
<!-- // Begin Module: Standard Footer \\ -->
                          <table border="0" cellpadding="10" cellspacing="0" width="100%">
                            <tr>
                              <td colspan="2" valign="middle" id="social" style="border-collapse: collapse;background-color: #eee;border: ;">
                                <div style="color: #707070;font-family: Arial;font-size: 12px;line-height: 140%;text-align: center;">
 
 
[(#REM) Liens sociaux ex :]
                                  <a href="https://twitter.com/xx" style="color: #58b2ca;font-weight: normal;text-decoration: underline;">
                            Twitter</a> |
 
 
<a href="#URL_AUTEUR{1}" style="color: #58b2ca;font-weight: normal;text-decoration: underline;">
                            Contact</a>
 
 
</div>
                              </td>
                            </tr>
                            <tr>
                              <td valign="top" width="50%" style="border-collapse: collapse;">
                                <div style="color: #707070;font-family: Arial;font-size: 14px;line-height: 125%;text-align: left;">
                                  <em><a href="#URL_SITE_SPIP">#NOM_SITE_SPIP</a> —[(#ENV{date}|affdate)]</em>
                                </div>
                              </td>
                              <td valign="top" width="50%" id="logo_site" style="border-collapse: collapse;">
                                <div style="color: #707070;font-family: Arial;font-size: 14px;line-height: 125%;text-align: right;">
                                  [(#LOGO_NEWSLETTER_NORMAL|oui) [(#LOGO_SITE_SPIP|image_reduire{190,95} |inserer_attribut{alt,''} |inserer_attribut{border,'0'} |inserer_attribut{style,'margin: 0;padding: 0;max-width: 100%;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;'} )] ]
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td colspan="2" valign="middle" id="utility" style="border-collapse: collapse;background-color: #FFFFFF;border: ;">
                                <div class="unsubscribe_link" style="color: #707070;font-family: Arial;font-size: 14px;line-height: 125%;text-align: center;">
                                  <:newsletter:info_email_reception:> @email@<br />  
                                    <a href="@url_unsubscribe@" style="color: #336699;font-weight: normal;text-decoration: underline;">
                                      <:newsletter:label_link_unsubscribe:>
                                    </a> 
                                </div>
                              </td>
                            </tr>
                          </table>
                          <!-- // End Module: Standard Footer \\ -->
 
 
</td>
                      </tr>
                    </table>
                    <!-- // End Template Footer \\ -->
                  </td>
                </tr>
                </table>
                <br>
            </td>
          </tr>
          </table>
      </center>
    </body>
 
 
</html>
    </BOUCLE_newsletter>
    {{#FILTRE{newsletters_liens_absolus}}}