DIV-based mailing lists: this is possible!
The topic of mailing lists on Habré was literally raised recently, but one important point was not covered there: how to ensure the editable content of this newsletter after a beautiful and neat layout.
After all, if it is made up on tables, with empty gifs for indentation, the result is “monolithic”, but God forbid, edit the content manager. Immediately everything will go, and the Vizivigs cannot work normally with such horror.
So is it possible to prepare a normal, marvelous layout, which is easily maintained, conveniently collected in mailings from parts, can be edited from the viewport, and at the same time it will look good in the mail?
')
I will not repeat, in brief, the requirements for the HTML file sent to the client:
There are a few more “subtle” moments - for example, some “too smart” web-mails can be replaced (let's not point fingers) replaced by min-height, which can produce interesting effects. Such moments are solved trivially - by adding a pair of height + max-height.
So, the task: there is an input to HTML with the correct wondrous layout, there is a CSS for it (spelled out in it, or set separately - not the point). It is necessary to generate HTML, which can be sent to the user. We don’t even consider the option of manual processing - everything that can be automated should be automated.
To solve the problem №1 Emogrifier gobbled up . What is he doing? Receives the HTML content of the <body> tag and a common CSS file as input, replaces all the class / id attributes with the style = "" attribute containing the required styles. Profit!
The solution to problem number 2 is a slightly more complicated, marvelous layout, and layout, initially without the need for moving elements over each other.
The solution to problem number 3 is simple - all composite parameters are divided into independent ones. That is, instead of margin, add margin-top, margin-bottom, margin-left, margin-right. Likewise with padding, background, font. The duet is a soldering iron and such and such a mother easily scraped the patch to the emogrifer releasing this tweak.
The solution to problem number 4 is more complicated. So, here we have
But it almost never works! Why? Spaces in values, picture through background-url. Decision? It is necessary to repack in something like:
To implement this solution, a file was taken thicker and such and such a mother was older, with the help of which the emogrifer was further processed, as a result of which a new tablify property appeared in the styles. Possible values: wrap, replace, embed.
Play with them for your layout. I think it’s not a lot to sharpen the layout.
I will describe the solution of Problem 5 in the next article. There I will talk about the techniques used to implement the text substrate under the picture containing the text, available in case of unavailability of images.
The result of these sufferings and disappointments is presented in the microscopic archiver emogrifier-dcb-1.0.tar.bz2 (6k) .
How to feel? Unpack. Create inside daddy html and html / styles /. Put index.html there, and in styles - screen.css. (Well, either correct the paths in sender.php. Then, in mailer.conf.php, write down the parameters of your SMTP to send letters, and in sender.php, correct $ remote to indicate the actual external address through which files are available, in the $ headers array - write the correct ones From and To (you can specify several commas.) Run sender.php and run to check-admire the boxes.
In the PM or in the comments you can ask questions on the adaptation of the existing layout to the mailing lists, but the main material will go to the next post, if someone turns out to be necessary.
ps: this post-processor is used completely by itself in production on Astro7 . Those who want to admire the result can subscribe to their horoscope from different boxes :)
After all, if it is made up on tables, with empty gifs for indentation, the result is “monolithic”, but God forbid, edit the content manager. Immediately everything will go, and the Vizivigs cannot work normally with such horror.
So is it possible to prepare a normal, marvelous layout, which is easily maintained, conveniently collected in mailings from parts, can be edited from the viewport, and at the same time it will look good in the mail?
')
I will not repeat, in brief, the requirements for the HTML file sent to the client:
- No external styles, no <style> tags. All that is required must be in the style attribute. Oh, and no javascript.
- No negative values. At all. Negative margins, negative paddings - they are just thrown away. How wrong.
- No gaps in values. At all. Yes Yes. Goodbye background-position.
- Problems with background images. The <table> attribute background = "" works, background-image usually does not work. Yes, yes, background position goodbye a second time.
- 100% text view. Graphic elements are not the fact that they seem at all, and not the fact that the user will click to “load” them.
There are a few more “subtle” moments - for example, some “too smart” web-mails can be replaced (let's not point fingers) replaced by min-height, which can produce interesting effects. Such moments are solved trivially - by adding a pair of height + max-height.
So, the task: there is an input to HTML with the correct wondrous layout, there is a CSS for it (spelled out in it, or set separately - not the point). It is necessary to generate HTML, which can be sent to the user. We don’t even consider the option of manual processing - everything that can be automated should be automated.
To solve the problem №1 Emogrifier gobbled up . What is he doing? Receives the HTML content of the <body> tag and a common CSS file as input, replaces all the class / id attributes with the style = "" attribute containing the required styles. Profit!
The solution to problem number 2 is a slightly more complicated, marvelous layout, and layout, initially without the need for moving elements over each other.
The solution to problem number 3 is simple - all composite parameters are divided into independent ones. That is, instead of margin, add margin-top, margin-bottom, margin-left, margin-right. Likewise with padding, background, font. The duet is a soldering iron and such and such a mother easily scraped the patch to the emogrifer releasing this tweak.
The solution to problem number 4 is more complicated. So, here we have
<h2> </h2> which we want to display on a pink iridescent background (or with rounded corners on the right). Layout looks trite: #content h2{ background: url(../images/h2-bg.png) no-repeat left top #ef5580; width: 627px; height: 25px; margin: 24px 0 13px 0px; padding: 6px 31px 0 31px; font-size: 17px; font-family: Georgia, Tahoma, Verdana, Arial, FreeSans, sans-serif; color: white; font-weight: normal; } But it almost never works! Why? Spaces in values, picture through background-url. Decision? It is necessary to repack in something like:
<table background="images/h2-bg.png" bgcolor="#ef5580" border=0 style="border-collapse:collapse;margin:24px 0 13px"><tr><td><h2 style="padding:6px 31px 0;font:...;color:white;"> </h2></td></tr></table> To implement this solution, a file was taken thicker and such and such a mother was older, with the help of which the emogrifer was further processed, as a result of which a new tablify property appeared in the styles. Possible values: wrap, replace, embed.
- tablify: wrap means that this element should be wrapped in a table, transferring the background and margins to the table.
- tablify: replace means that the element must be replaced by a table. And if initially the element is empty, only <table> will remain. If not empty, the original content will be placed in a single cell of the new table.
- tablify: embed means that the entire contents of the current element must be wrapped in a table.
Play with them for your layout. I think it’s not a lot to sharpen the layout.
I will describe the solution of Problem 5 in the next article. There I will talk about the techniques used to implement the text substrate under the picture containing the text, available in case of unavailability of images.
The result of these sufferings and disappointments is presented in the microscopic archiver emogrifier-dcb-1.0.tar.bz2 (6k) .
How to feel? Unpack. Create inside daddy html and html / styles /. Put index.html there, and in styles - screen.css. (Well, either correct the paths in sender.php. Then, in mailer.conf.php, write down the parameters of your SMTP to send letters, and in sender.php, correct $ remote to indicate the actual external address through which files are available, in the $ headers array - write the correct ones From and To (you can specify several commas.) Run sender.php and run to check-admire the boxes.
In the PM or in the comments you can ask questions on the adaptation of the existing layout to the mailing lists, but the main material will go to the next post, if someone turns out to be necessary.
ps: this post-processor is used completely by itself in production on Astro7 . Those who want to admire the result can subscribe to their horoscope from different boxes :)
Source: https://habr.com/ru/post/123757/
All Articles