Add option to add logos to header in HTML mails

This commit is contained in:
Joshua Ramon Enslin 2020-10-22 18:21:58 +02:00 committed by Stefan Rohde-Enslin
parent c1778ac3a0
commit 5b34e63dd5
Signed by: jrenslin
GPG Key ID: 46016F84501B70AE
2 changed files with 413 additions and 3 deletions

401
assets/img/mdlogo-code.svg Normal file
View File

@ -0,0 +1,401 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1020"
height="1020"
id="svg2985"
version="1.1"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="mdlogo-code.svg"
inkscape:export-filename="mdlogo-code-512px.png"
inkscape:export-xdpi="48.189999"
inkscape:export-ydpi="48.189999">
<defs
id="defs2987" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#ffffff"
borderopacity="0.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="0"
inkscape:zoom="0.98994949"
inkscape:cx="373.81018"
inkscape:cy="657.9954"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="3680"
inkscape:window-height="1930"
inkscape:window-x="80"
inkscape:window-y="150"
inkscape:window-maximized="1"
fit-margin-top="5"
fit-margin-left="5"
fit-margin-right="5"
fit-margin-bottom="5"
showguides="false" />
<metadata
id="metadata2990">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(8,-40.362183)">
<rect
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:8.82220364;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect845"
width="1011.1779"
height="1011.1778"
x="-3.5888982"
y="44.773335"
ry="0" />
<flowRoot
xml:space="preserve"
id="flowRoot3763"
style="font-style:normal;font-weight:normal;line-height:0.01%;font-family:sans-serif;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
transform="matrix(1.0379746,0,0,1.0379746,-169.56958,-12.773255)"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997"><flowRegion
id="flowRegion3765"
style="font-family:sans-serif;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"><rect
id="rect3767"
width="1008.1323"
height="1000.051"
x="-6.0609155"
y="50.290859"
style="font-family:sans-serif;text-align:end;text-anchor:end;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-opacity:1" /></flowRegion><flowPara
id="flowPara3769"
style="font-size:40px;line-height:1.25;font-family:sans-serif;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"> </flowPara></flowRoot> <text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-stretch:normal;font-size:12.45569611px;line-height:0%;font-family:'Bookman Old Style';-inkscape-font-specification:'Bookman Old Style Semi-Light';text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1.03797472;stroke-opacity:1"
x="348.29947"
y="659.89093"
id="text3771"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997"><tspan
sodipodi:role="line"
id="tspan3773"
x="348.29947"
y="663.27887"
style="font-size:381.58416748px;line-height:10;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1.03797472;stroke-opacity:1" /></text>
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833"
width="79.41317"
height="79.41317"
x="98.490639"
y="742.45844"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-3"
width="79.413177"
height="79.41317"
x="98.490639"
y="626.96552"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6"
width="79.41317"
height="79.41317"
x="98.490639"
y="511.47241"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:10.21611977;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-3-7"
width="82.178253"
height="47.530357"
x="97.108063"
y="429.24481"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-5"
width="79.413162"
height="79.41317"
x="271.73004"
y="742.45844"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-3-3"
width="79.41317"
height="79.41317"
x="271.73004"
y="626.96552"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5"
width="79.413162"
height="79.41317"
x="271.73004"
y="511.47241"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-5-6"
width="79.413162"
height="79.41317"
x="444.96948"
y="742.45844"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-3-3-2"
width="79.41317"
height="79.41317"
x="444.96948"
y="626.96545"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9"
width="79.413162"
height="79.41317"
x="444.96948"
y="511.47235"
rx="0"
ry="39.706581"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:10.21612072;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-1"
width="47.530357"
height="82.178246"
x="201.05171"
y="510.08987"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:10.21612072;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-1-2"
width="47.530357"
height="82.178246"
x="374.29114"
y="510.08987"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7"
width="79.413162"
height="79.41317"
x="595.11035"
y="742.45844"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-0"
width="79.413162"
height="79.41317"
x="710.60327"
y="742.45844"
rx="0"
ry="0"
inkscape:transform-center-x="-9.9165682"
inkscape:transform-center-y="47.832846"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-9"
width="79.413162"
height="79.41317"
x="826.09625"
y="742.45844"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-3"
width="79.413162"
height="79.41317"
x="595.11035"
y="626.96552"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-3-6"
width="79.413162"
height="79.41317"
x="595.11035"
y="511.47241"
rx="0"
ry="39.706581"
inkscape:transform-center-x="-29.166407"
inkscape:transform-center-y="139.41528"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-3-6-0"
width="79.413162"
height="79.41317"
x="710.60327"
y="511.47241"
rx="0"
ry="0"
inkscape:transform-center-x="-29.166375"
inkscape:transform-center-y="139.41528"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-6"
width="79.413162"
height="79.41317"
x="826.09625"
y="626.96552"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-3-2"
width="79.413162"
height="79.41317"
x="826.09625"
y="511.47241"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-3-6-6"
width="79.413162"
height="79.41317"
x="826.09625"
y="395.97949"
rx="0"
ry="0"
inkscape:transform-center-x="-29.166404"
inkscape:transform-center-y="139.4153"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:12.98119068;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-3-6-6-1"
width="79.413162"
height="79.41317"
x="826.09625"
y="280.48651"
rx="0"
ry="0"
inkscape:transform-center-x="-29.166404"
inkscape:transform-center-y="139.41528"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:9.61340618;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-3"
width="41.781116"
height="82.780952"
x="443.28558"
y="509.78845"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:9.61340523;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-75"
width="82.780945"
height="41.78112"
x="443.28558"
y="550.78833"
rx="0"
ry="0"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:9.61340523;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-3-6-3"
width="82.780945"
height="41.78112"
x="593.42645"
y="550.78839"
rx="0"
ry="0"
inkscape:transform-center-x="-30.4033"
inkscape:transform-center-y="73.349637"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:9.61340523;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect833-6-5-9-7-3-6-5"
width="41.781116"
height="82.780952"
x="634.42627"
y="509.78851"
rx="0"
ry="0"
inkscape:transform-center-x="-15.345135"
inkscape:transform-center-y="145.32765"
inkscape:export-xdpi="96.379997"
inkscape:export-ydpi="96.379997" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -24,17 +24,22 @@ final class MDMailFormat {
const CSS_A_FOOTER_HOVER = "color: " . self::ACCENT_COLOR_SEC . " !important;";
const CSS_A_BUTTONLIKE = 'display: inline-block; width: auto;
margin: .5em 0; padding: .6em .8em;
font-size: inherit;
font-weight: bold;
text-decoration: none;
font-size: inherit; font-weight: bold;
border-radius: .2em; transition: border .2s;
background: ' . self::ACCENT_COLOR_MAIN . ' !important; color: #FFF !important;
transition: background .4s;';
const CSS_A_BUTTONLIKE_HOVER = 'background: ' . self::ACCENT_COLOR_SEC . ' !important;';
const CSS_LOGO = "height: 1.5em; margin-right: .4em; vertical-align: middle;";
const CSS_H1_SPAN = "vertical-align: middle;";
/** @var string */
private string $_msg_html = "";
/** @var string */
private string $_msg_plain = "";
/** @var boolean */
public bool $use_logo = false;
/**
* Function for adding a headline.
@ -47,7 +52,9 @@ final class MDMailFormat {
$input = trim($input);
$this->_msg_html .= "<h1 style='" . self::CSS_H1 . "'>" . nl2br($input) . "</h1>";
$this->_msg_html .= "<h1 style='" . self::CSS_H1 . "'>";
if ($this->use_logo === true) $this->_msg_html .= "<img style='" . self::CSS_LOGO . "' src=\"cid:mdlogo\" alt='' />";
$this->_msg_html .= "<span style='" . self::CSS_H1_SPAN . "'>" . nl2br($input) . "</span></h1>";
$this->_msg_plain .= "{$input}
===================
";
@ -272,6 +279,8 @@ final class MDMailFormat {
#footer { ' . self::CSS_FOOTER . ' }
#footer a { ' . self::CSS_A_FOOTER . ' }
#footer a:hover { ' . self::CSS_A_FOOTER_HOVER . ' }
h1 img { ' . self::CSS_LOGO . ' }
h1 span { ' . self::CSS_H1_SPAN . ' }
</style>
</head>
<body>