Browse Source

Revision du modele de wrapper mail HTML : laisser les font-size naturelle du client mail, alleger la structure, correction des puces, fournir 2 classes .header et .footer

Fournir un filtre facteur_email_wrap_to_html applicable dans un squelette de mail par #FILTRE{facteur_email_wrap_to_html}
Si le mail est au format texte : la premiere ligne est le sujet, le reste le corps du mail

Le mail peut etre aussi dans un format HTML *simplifié*, detecte par le fait que le mail commence par < et finit par > et contient un </body> : dans ce cas le mail fournit un <title></title> qui fera le sujet et un <body></body> qui fera le corps HTML du texte, encapsulé dans le wrapper emails/texte.html
A titre experimental on prend aussi en charge une <intro></intro> qui sera injectee en texte de debut mais non affichee, pour servir d'introduction dans les clients mails qui affichent le debut du texte du message sous son titre dans la vue de la BAL
v2
cedric@yterium.com 10 years ago
parent
commit
b34f69664c
  1. 124
      emails/texte.html
  2. 48
      facteur_fonctions.php
  3. 2
      paquet.xml

124
emails/texte.html

@ -3,116 +3,86 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[(#ENV{sujet})]</title>
<!-- Facebook sharing information tags -->
<meta property="og:title" content="[(#ENV{sujet}|attribut_html)]">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
#outlook a {padding: 0;}
body {width: 100% !important;}
body {margin: 0;padding: 0;}
img {border: none;font-size: 16px;font-weight: bold;height: auto;line-height: 100%;outline: none;text-decoration: none;text-transform: capitalize;}
img {border: none;font-size: inherit;font-weight: bold;height: auto;line-height: 100%;outline: none;text-decoration: none;text-transform: capitalize;}
#backgroundTable {height: 100% !important;margin: 0;padding: 0;width: 100% !important;}
body, .backgroundTable {background-color: #FAFAFA;}
#templateContainer {border: 1px solid #DDDDDD;}
h1,.h1,h2,.h2,h3,.h3,h4,.h4 {color: #202020;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: 28px;} h2,.h2 {font-size: 26px;}
h3,.h3 {font-size: 22px;} h4,.h4 {font-size: 20px;}
h5,.h5 {font-size: 18px;} h6,.h6 {font-size: 16px;}
#templatePreheader {background-color: #FAFAFA;}
.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: #336699;font-weight: normal;text-decoration: underline;}
.preheaderContent div img {height: auto;max-width: 600px;}
body, .backgroundTable {background-color: #DDDDDD;}
#templateContainer {border: 1px solid #CCCCCC;max-width: 600px !important;}
h1,.h1,h2,.h2,h3,.h3,h4,.h4 {color: #202020;display: block;font-family: 'Helvetica Neue',Helvetica,Arial;margin-bottom: 0.5em;text-align: left;}
#templateHeader {background-color: #FFFFFF;border-bottom: 0;}
.headerContent {color: #202020;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 34px;font-weight: bold;line-height: 100%;padding: 0;text-align: center;vertical-align: middle;}
.headerContent a:link, .headerContent a:visited {color: #336699;font-weight: normal;text-decoration: underline;}
#headerImage {height: auto;max-width: 600px !important;}
#templateContainer, .bodyContent {background-color: #FDFDFD;}
.bodyContent div {color: #303030;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 16px;line-height: 150%;text-align: left;}
#templateContainer, .bodyContent {background-color: #FFFFFF;margin-top: 20px;}
.bodyContent {border-top:10px solid [#(#LOGO_SITE_SPIP|couleur_extraire|couleur_eclaircir_si_foncee{168}|sinon{BBB})];border-bottom:10px solid [#(#LOGO_SITE_SPIP|couleur_extraire|couleur_eclaircir_si_foncee{168}|sinon{BBB})];}
.bodyContent div {color: #222222;font-family: 'Helvetica Neue',Helvetica,Arial;line-height: 150%;text-align: left;}
.bodyContent div a:link, .bodyContent div a:visited {color: #336699;font-weight: normal;text-decoration: underline;}
.bodyContent img {display: inline;margin-bottom: 10px;}
#templateFooter {background-color: #FDFDFD;border-top: 0;}
.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: #FAFAFA;border: 1px solid #F5F5F5;}
#social div {text-align: center;}
#utility {background-color: #FDFDFD;border-top: 1px solid #F5F5F5;}
#utility div {text-align: center;}
.spip_code, .spip_cadre {color: #606060;font-family: Courier,"Courier New",monospace;}
.bodyContent img.puce {display: inline;margin-bottom: 0;}
.spip_code, .spip_cadre {color: #606060;font-family: Courier,"Courier New",monospace;font-size: 1em;}
.coloration_code ol {list-style: none;}
img.puce {margin-bottom: 0}
.spip_logos {float: right;margin-left: 10px;}
.text {word-wrap:break-word;}
.header,.footer {background: #e9e9e9;padding: 20px;margin-left: -20px;margin-right: -20px;}
.header hr,.footer hr {display: none}
@media only screen and (max-width: 640px) {
html,body {width: 100% !important;}
#templatePreheader {width: 100% !important;}
.preheaderContent,.bodyContent,.footerContent {padding: 0 !important;}
#templateContainer {width: 100% !important;border: 0 !important;}
body, .backgroundTable {background-color: #ffffff !important;}
.bodyContent {padding:0 0 10px !important;border-top:0;border-bottom:0;}
#templateContainer {width: 100% !important;border: 0 !important;margin-top: 0}
#templateBody {width: 100% !important;}
#templateFooter {width: 100% !important;}
#canspamBar {width: auto !important;}
.padding {padding-left:0 !important;padding-right:0 !important;}
.text {font-size: 16px !important;color: #101010 !important;}
.text {color: #101010 !important;}
.header,.footer {padding: 10px;margin-left: -10px;margin-right: -10px;}
}
@media only screen and (max-device-width: 480px) {
html,body {width: 320px !important;}
#templatePreheader {width: 320px !important;display: none;}
.preheaderContent,.bodyContent,.footerContent {padding: 0 !important;}
#templateContainer {width: 320px !important;border: 0 !important;}
body, .backgroundTable {background-color: #ffffff !important;}
.bodyContent {padding: 0 0 10px !important;border-top:0;border-bottom:0;}
#templateContainer {width: 320px !important;border: 0 !important;margin-top: 0;}
#templateBody {width: 320px !important;}
#templateFooter {width: 320px !important;}
#canspamBar {width: auto !important;}
.padding {padding-left:0 !important;padding-right:0 !important;}
.text {font-size: 16px !important;color: #101010 !important;}
.text {color: #101010 !important;}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"
style="margin: 0;padding: 0;width: 100% !important;">
<center>
[<div style="display: none;">(#ENV{intro,''})</div>]
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable"
style="margin: 0;padding: 0;height: 100% !important;width: 100% !important;">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templatePreheader"
style="background-color: #FAFAFA;">
<tr>
<td valign="top" class="preheaderContent" style="padding:10px;">
<!-- // Begin Module: Standard Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div style="color: #303030;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 12px;line-height: 100%;text-align: left;">
<br>
</div>
</td>
<td valign="top" width="180">
</td>
</tr>
</table>
<!-- // End Module: Standard Preheader \\ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer"
style="border: 1px solid #DDDDDD;background-color: #FDFDFD;">
style="border: 1px solid #CCCCCC;background-color: #FFFFFF;max-width: 600px !important;">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td valign="top" class="bodyContent" style="background-color: #FDFDFD;padding:10px;">
<td valign="top" class="bodyContent" style="background-color: #FFFFFF;padding:10px;">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div class='text' style="color:#303030;font-family:'Helvetica Neue',Helvetica,Arial;font-size:16px;line-height:150%;text-align:left;word-wrap:break-word;">
<div class='text' style="color:#222222;font-family: 'Helvetica Neue',Helvetica,Arial;font-size:100%;line-height:150%;text-align:left;word-wrap:break-word;">
[(#ENV*{html,#ENV*{texte}|replace{'<','&lt;'}|facteur_nl2br_si_pas_autobr|propre|replace{'<br />\s*<br />(\s*<br />)+?','<br /> <br />'}|concat{'<br /> <br />'}})]
</div>
</td>
</tr>
<tr>
<td align="left" valign="top"
style="color:#A39F9A !important;font-family: 'Helvetica Neue',Helvetica,Arial !important;font-size:90% !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:top !important;text-align:left !important;">
<br/>
<br/>
&mdash; Envoyé par <a href="#URL_SITE_SPIP/">#NOM_SITE_SPIP</a>
<br/>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
@ -127,27 +97,5 @@
</tr>
</table>
</center>
<center>
<br/>
<br/>
<br/>
<table border="0" cellpadding="0" cellspacing="0" width="100%"
style="background:#EEEEEE !important; border-top:1px solid #DDDDDD; clear:both;" id="canspamBarWrapper">
<tr>
<td align="center" valign="top" style="padding:20px;padding-bottom: 0;" class="padding">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="canspamBar">
<tr>
<td align="left" valign="top"
style="color:#303030 !important;font-family:Verdana,Arial,Sans !important;font-size:13px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:top !important;text-align:left !important;">
<a href="#URL_SITE_SPIP/">#NOM_SITE_SPIP</a>
<br/>
<br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>

48
facteur_fonctions.php

@ -8,6 +8,54 @@
if (!defined("_ECRIRE_INC_VERSION")) return;
/**
* Transformer un mail texte ou HTML simplifie en mail HTML complet avec le wrapper emails/texte.html
* Si le mail est un mail texte :
* la premiere ligne est le sujet
* le reste est le corps du mail
*
* Si le mail est un mail HTML simplifie :
* le sujet est entre <title></title>
* le corps est entre <body></body>
* une eventuelle intro peut etre fournie entre <intro></intro>
*
* @param string $texte_ou_html
* @return string
*/
function facteur_email_wrap_to_html($texte_ou_html){
$texte_ou_html = trim($texte_ou_html);
$contexte = array("sujet"=>"","texte"=>"","intro"=>"");
// tester si le mail est en html (simplifie)
if (substr($texte_ou_html,0,1)=="<"
AND substr($texte_ou_html,-1,1)==">"
AND stripos($texte_ou_html,"</body>")!==false){
// dans ce cas on ruse un peu : extraire le sujet du title
$sujet = "";
if (preg_match(",<title>(.*)</title>,Uims",$texte_ou_html,$m)){
$contexte['sujet'] = $m[1];
$texte_ou_html = preg_replace(",<title>(.*)</title>,Uims","",$texte_ou_html,1);
$texte_ou_html = trim($texte_ou_html);
}
if (preg_match(",<intro>(.*)</intro>,Uims",$texte_ou_html,$m)){
$contexte['intro'] = $m[1];
$texte_ou_html = preg_replace(",<intro>(.*)</intro>,Uims","",$texte_ou_html,1);
$texte_ou_html = trim($texte_ou_html);
}
$contexte['html'] = preg_replace(",</?body>,ims","",$texte_ou_html);
}
else {
// la premiere ligne est toujours le sujet
$texte_ou_html = explode("\n",$texte_ou_html);
$contexte['sujet'] = trim(array_shift($texte_ou_html));
$contexte['texte'] = trim(implode("\n",$texte_ou_html));
}
return recuperer_fond("emails/texte",$contexte);
}
/*
Written by Eric Dols - edols@auditavenue.com

2
paquet.xml

@ -1,7 +1,7 @@
<paquet
prefix="facteur"
categorie="communication"
version="2.3.1"
version="2.4.0"
etat="stable"
compatibilite="[3.0.0;3.0.*]"
logo="prive/themes/spip/images/facteur-32.png"

Loading…
Cancel
Save