search

uSked / mosaico-php-backend

A PHP backend for Mosaico
GNU General Public License v3.0
32 stars 34 forks source link

Download content weird #6

Open kbalajijan1 opened 8 years ago

kbalajijan1 commented 8 years ago

Hi,

Does download work properly to you. It doesn't work at my end.

Please find below the screen shot of mosaico and my localhost.

download

Could you give me some solutions?

Thanks

kbalajijan1 commented 8 years ago

Hi,

Below is the HTML code which is got from Mosaico's viewModel.exportHTML().

Just for cross-check, I applied this code directly in http://premailer.dialect.ca/ but the output is similar to above the screenshot of Premailer.

I applied the same code in http://templates.mailchimp.com/resources/inline-css/ and it works fine as expected.

May I know are you using Premailer and it works fine to you or you use something else?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" http-equiv="Content-Type">
            <meta name="viewport" content="initial-scale=1.0">
                <meta name="format-detection" content="telephone=no">
                    <title>TITLE</title>

                    <style type="text/css" data-inline="true">
                        body{ Margin: 0; padding: 0; }
                        img{ border: 0px; display: block; }

                        .socialLinks{ font-size: 6px; }
                        .socialLinks a{
                          display: inline-block;
                        }
                        .socialIcon{
                          display: inline-block;
                          vertical-align: top;
                          padding-bottom: 0px;
                          border-radius: 100%;
                        }
                        .oldwebkit{ max-width: 570px; }
                        td.vb-outer{ padding-left: 9px; padding-right: 9px; }
                        table.vb-container, table.vb-row, table.vb-content{
                          border-collapse: separate;
                        }
                        table.vb-row{
                          border-spacing: 9px;
                        }
                        table.vb-row.halfpad{
                          border-spacing: 0;
                          padding-left: 9px;
                          padding-right: 9px;
                        }
                        table.vb-row.fullwidth{
                          border-spacing: 0;
                          padding: 0;
                        }
                        table.vb-container{
                          padding-left: 18px;
                          padding-right: 18px;
                        }
                        table.vb-container.fullpad{
                          border-spacing: 18px;
                          padding-left: 0;
                          padding-right: 0;
                        }
                        table.vb-container.halfpad{
                          border-spacing: 9px;
                          padding-left: 9px;
                          padding-right: 9px;
                        }
                        table.vb-container.fullwidth{
                          padding-left: 0;
                          padding-right: 0;
                        }
                    </style>
                    <style type="text/css">
                        /* yahoo, hotmail */
                        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{ line-height: 100%; }
                        .yshortcuts a{ border-bottom: none !important; }
                        .vb-outer{ min-width: 0 !important; }
                        .RMsgBdy, .ExternalClass{
                          width: 100%;
                          background-color: #3f3f3f;
                          background-color: #3f3f3f}

                        /* outlook */
                        table{ mso-table-rspace: 0pt; mso-table-lspace: 0pt; }
                        #outlook a{ padding: 0; }
                        img{ outline: none; text-decoration: none; border: none; -ms-interpolation-mode: bicubic; }
                        a img{ border: none; }

                        @media screen and (max-device-width: 600px), screen and (max-width: 600px) {
                          table.vb-container, table.vb-row{
                            width: 95% !important;
                          }

                          .mobile-hide{ display: none !important; }
                          .mobile-textcenter{ text-align: center !important; }

                          .mobile-full{
                            float: none !important;
                            width: 100% !important;
                            max-width: none !important;
                            padding-right: 0 !important;
                            padding-left: 0 !important;
                          }
                          img.mobile-full{
                            width: 100% !important;
                            max-width: none !important;
                            height: auto !important;
                          }   
                        }
                    </style>
                    <style type="text/css" data-inline="true">

                        #ko_sideArticleBlock_3 .links-color a, #ko_sideArticleBlock_3 .links-color a:link, #ko_sideArticleBlock_3 .links-color a:visited, #ko_sideArticleBlock_3 .links-color a:hover{
                          color: #3f3f3f;
                          color: #3f3f3f;
                          text-decoration: underline
                        }
                        #ko_sideArticleBlock_3 .long-text p{ Margin: 1em 0px }  #ko_sideArticleBlock_3 .long-text p:last-child{ Margin-bottom: 0px }  #ko_sideArticleBlock_3 .long-text p:first-child{ Margin-top: 0px } 
                        #ko_footerBlock_2 .links-color a, #ko_footerBlock_2 .links-color a:link, #ko_footerBlock_2 .links-color a:visited, #ko_footerBlock_2 .links-color a:hover{
                          color: #cccccc;
                          color: #cccccc;
                          text-decoration: underline
                        }
                        #ko_footerBlock_2 .long-text p{ Margin: 1em 0px }  #ko_footerBlock_2 .long-text p:last-child{ Margin-bottom: 0px }  #ko_footerBlock_2 .long-text p:first-child{ Margin-top: 0px } </style>
                    </head>
                    <body bgcolor="#3f3f3f" text="#919191" alink="#cccccc" vlink="#cccccc" style="background-color: #3f3f3f; color: #919191;">

                        <center>

                            <!-- preheaderBlock -->

                            <table class="vb-outer" width="100%" cellpadding="0" border="0" cellspacing="0" bgcolor="#3f3f3f" style="background-color: #3f3f3f;" id="ko_preheaderBlock_1">
                                <tbody><tr>
                                        <td class="vb-outer" align="center" valign="top" bgcolor="#3f3f3f" style="background-color: #3f3f3f;">
                                            <div style="display: none; font-size: 1px; color: #333333; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"></div>

                                            <!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
                                            <div class="oldwebkit">
                                                <table width="570" border="0" cellpadding="0" cellspacing="0" class="vb-row halfpad" bgcolor="#3f3f3f" style="width: 100%; max-width: 570px; background-color: #3f3f3f;">
                                                    <tbody><tr>
                                                            <td align="center" valign="top" bgcolor="#3f3f3f" style="font-size: 0; background-color: #3f3f3f;">

                                                                <!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="552"><tr><![endif]-->
                                                                <!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="276"><![endif]--> 
                                                                <div style="display: inline-block; max-width: 276px; vertical-align: top; width: 100%;" class="mobile-full"> 
                                                                    <table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="276" style="width: 100%;" align="left">
                                                                        <tbody><tr>
                                                                                <td width="100%" valign="top" align="left" style="font-weight: normal; text-align: left; font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: #ffffff;">
                                                                                    <a style="text-decoration: underline; color: #ffffff;" target="_new" href="[unsubscribe_link]">Unsubscribe</a> 

                                                                                </td>
                                                                            </tr>
                                                                        </tbody></table>
                                                                </div><!--[if (gte mso 9)|(lte ie 8)]>
                                                                </td><td align="left" valign="top" width="276">
                                                                <![endif]--><div style="display: inline-block; max-width: 276px; vertical-align: top; width: 100%;" class="mobile-full mobile-hide"> 

                                                                    <table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="276" style="width: 100%; text-align: right;" align="left">
                                                                        <tbody><tr>
                                                                                <td width="100%" valign="top" style="font-weight: normal; font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: #ffffff;">
                                                                                    <span style="color: #ffffff; text-decoration: underline;">
                                                                                        <a href="[show_link]" style="text-decoration: underline; color: #ffffff;" target="_new">View in your browser</a>
                                                                                    </span>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody></table>

                                                                </div><!--[if (gte mso 9)|(lte ie 8)]>
                                                                </td></tr></table><![endif]-->

                                                            </td>
                                                        </tr>
                                                    </tbody></table>
                                            </div>
                                            <!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
                                        </td>
                                    </tr>
                                </tbody></table>

                            <!-- /preheaderBlock -->

                            <table class="vb-outer" width="100%" cellpadding="0" border="0" cellspacing="0" bgcolor="#bfbfbf" style="background-color: #bfbfbf;" id="ko_sideArticleBlock_3">
                                <tbody><tr>
                                        <td class="vb-outer" align="center" valign="top" bgcolor="#bfbfbf" style="background-color: #bfbfbf;">

                                            <!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
                                            <div class="oldwebkit">
                                                <table width="570" border="0" cellpadding="0" cellspacing="9" class="vb-row fullpad" bgcolor="#ffffff" style="width: 100%; max-width: 570px; background-color: #ffffff;">
                                                    <tbody><tr>
                                                            <td align="center" class="mobile-row" valign="top" style="font-size: 0;">

                                                                <!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="552"><tr><![endif]-->

                                                                <!--[if (gte mso 9)|(lte ie 8)]><td align="left" valign="top" width="184"><![endif]--> 
                                                                <div class="mobile-full" style="display: inline-block; max-width: 184px; vertical-align: top; width: 100%;"> 

                                                                    <table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="184" align="left" style="width: 100%;">
                                                                        <tbody><tr>
                                                                                <td width="100%" valign="top" align="left" class="links-color">

                                                                                    <img border="0" hspace="0" vspace="0" width="166" class="mobile-full" alt="" style="vertical-align: top; width: 100%; height: auto; max-width: 166px;" src="http://mosaico.io/srv/f-yshscdw/img?method=placeholder&params=166%2C130">

                                                                                </td>
                                                                            </tr>
                                                                        </tbody></table>

                                                                </div><!--[if (gte mso 9)|(lte ie 8)]></td>
                                                                <![endif]--><!--[if (gte mso 9)|(lte ie 8)]>
                                                                <td align="left" valign="top" width="368">
                                                                <![endif]--><div class="mobile-full" style="display: inline-block; max-width: 368px; vertical-align: top; width: 100%;"> 

                                                                    <table class="vb-content" border="0" cellspacing="9" cellpadding="0" width="368" align="left" style="width: 100%;">
                                                                        <tbody><tr>
                                                                                <td style="font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #3f3f3f; text-align: left;">
                                                                                    <span style="color: #3f3f3f;">
                                                                                        Title
                                                                                    </span>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td align="left" class="long-text links-color" style="text-align: left; font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: #3f3f3f;">
                                                                                    <p>Far far away, behind the word mountains, far from the countries <a href="">Vokalia and Consonantia</a>, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td valign="top">
                                                                                    <table cellpadding="0" border="0" align="left" cellspacing="0" class="mobile-full" style="padding-top: 4px;">
                                                                                        <tbody><tr>
                                                                                                <td width="auto" valign="middle" bgcolor="#bfbfbf" align="center" height="26" style="font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align: center; color: #3f3f3f; font-weight: normal; padding-left: 18px; padding-right: 18px; background-color: #bfbfbf; border-radius: 4px;">
                                                                                                    <a style="text-decoration: none; color: #3f3f3f; font-weight: normal;" target="_new" href="">BUTTON</a>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody></table>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody></table>
                                                                </div><!--[if (gte mso 9)|(lte ie 8)]></td>
                                                                <![endif]-->
                                                                <!--[if (gte mso 9)|(lte ie 8)]></tr></table><![endif]-->

                                                            </td>
                                                        </tr>
                                                    </tbody></table>
                                            </div>
                                            <!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
                                        </td>
                                    </tr>
                                </tbody></table>

                            <!-- footerBlock -->
                            <table width="100%" cellpadding="0" border="0" cellspacing="0" bgcolor="#3f3f3f" style="background-color: #3f3f3f;" id="ko_footerBlock_2">
                                <tbody><tr>
                                        <td align="center" valign="top" bgcolor="#3f3f3f" style="background-color: #3f3f3f;">

                                            <!--[if (gte mso 9)|(lte ie 8)]><table align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]-->
                                            <div class="oldwebkit">
                                                <table width="570" style="width: 100%; max-width: 570px;" border="0" cellpadding="0" cellspacing="9" class="vb-container halfpad" align="center">
                                                    <tbody><tr>
                                                            <td class="long-text links-color" style="text-align: center; font-size: 13px; color: #919191; font-weight: normal; text-align: center; font-family: Arial, Helvetica, sans-serif;"><p>Email sent to <a href="mailto:[mail]">[mail]</a></p></td>
                                                        </tr>
                                                        <tr>
                                                            <td style="text-align: center;">
                                                                <a href="[unsubscribe_link]" style="text-decoration: underline; color: #ffffff; text-align: center; font-size: 13px; font-weight: normal; font-family: Arial, Helvetica, sans-serif;" target="_new"><span>Unsubscribe</span></a>
                                                            </td>
                                                        </tr>
                                                        <tr style="text-align: center;">
                                                            <td align="center">
                                                                <a style=";" target="_new" href=""><img border="0" hspace="0" vspace="0" src="http://localhost/drupal7/sites/all/modules/test/mosaico_master/templates/versafix-1/img/sponsor.gif" alt="sponsor" style="Margin: auto; display: inline !important;"></a>
                                                            </td>
                                                        </tr>
                                                    </tbody></table>
                                            </div>
                                            <!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
                                        </td>
                                    </tr>
                                </tbody></table>
                            <!-- /footerBlock -->

                        </center>

                    </body></html>

Thanks

mherbold commented 8 years ago

Hello - we do use Premailer ourselves. It does have issues and generates output that is a little different than Mosaico's output. Unless Mosaico open-sources their custom css inlining function, we have no choice but to use other people's which may output less than ideal results.

mherbold commented 8 years ago

BTW The block you are using in your photo with the 166x130 image - that works fine in Outlook with the image shown to the left of the paragraph. But it does shows the mobile device version (image above the paragraph) in Gmail.

bago commented 8 years ago

The main reason we don't opensource our inliner is because it would require a lot of work to make it standalone and the license of the dependencies would not met our mosaico license, too.

So the plan is to implement the inliner in the client in javascript: unfortunately we're currently busy on other projects and the time we dedicate to mosaico is not enough to deal with this in the short-term.

In our php backend we use a "selective" inliner and we inline only the styles marked with a data-inline="true" attribute: this let the template author have more control on what is inlined and what is not. In the opensource js inliner we bundle in this project, instead, we simply use "Stylizer" inliner "as is" and we never tested a lot its results.

Unfortunately, as I wrote elsewhere, the "inlining" is not an "hard science": you can't simply inline using a "specification" so every author decided to solve "unsolvable issues" its own way. When you do inlining you alter the result and you probably break something: the right mix is very "subjective".

Unfortunately I think there is no opensource inliner for CSS written in javascript that can run in the browser and "do the right thing" right now, so we have to write one (possibly leveraging mensch for css parsing).

kbalajijan1 commented 8 years ago

Thank you. The issue is, Premailer processes the style tags which don't have data-inline attribute also.

Is there any way like we should send html to the backend with style tags which have only data-inline="true" attribute and after processing the backend we should be able to add back the styles which don't have data-lnline="true" attribute.

Thanks

bago commented 8 years ago

I'm not sure the ONLY issue is the data-inline support. Maybe there are also issues in the way inlining is done.

I keep repeating that inlining is a very weird thing and there is no one "scientific" way to do it right, so every implementor do this its own way and produces different, often unexpected, results.

BTW, to give it a try with premailer I would do this: 1) replace any <style...> (and theri </style>) with no "data-inline" to <replaced-style tag (so that premailer won't see them) 2) send the email to premailer 3) replace back the <replaced-style> tags to <style> Sounds easier than "removing" stuff and remembering where you have to put them back.

bago commented 8 years ago

Just one example

.a { color: red; }
.b { color: rgba(255,255,0,.4); }

<div class="a b" style></div>

The inliner can put both "color: red; color: rgba(255,255,0,.4);" or just keep the "color: rgba(255,255,0,.4);" .. in the first solution you get a very large result, but the second one is more correct because browsers not supporting rgba won't fallback to red, otherwise.

There are more complex cases, but this is the first I remember made me waste a lot of time debugging one template.

kbalajijan1 commented 8 years ago

Thank you. Changing the style tag is a good idea.

I agree with you about the complexity of in-lining. I will find time to do my own in-lining.

I went again to Premailer and analyzed the problem. Actually it converts the media queries into inline styles. Hope Mosaico doesn't use media queries inside data-line style tag.

Thanks.

mherbold commented 8 years ago

Bago - replacing style with no data-inline with something else before sending to premailer is a good idea. I can look into adding this feature into the php backend.

bwl21 commented 8 years ago

After I managed to get Premailer working, I face exactly the same issue as kbalajijan1. It is hard to believe that it replacing style with no data-inline will solve the issue. So we are now somehow stuck ...

Problem occurs with template: versafix-1 but not with tedc15.

being dependent on an external web service is tough anyhow. But it seems that versafix-1 has some problems with Premailer.

Would be interesting if these issues also exist with https://github.com/crossjoin/PreMailer. At least this would be something which we could try to make compatible with mosaico.

One more option is https://github.com/christiaan/InlineStyle

bwl21 commented 8 years ago

I tried with https://github.com/christiaan/InlineStyle. I works with versafix-1 template. But it yields another error:

Warning: DOMDocument::loadHTML(): Attribute http-equiv redefined in Entity, line: 3 in /home/www/mosaico/vendor/inlinestyle/inlinestyle/InlineStyle/InlineStyle.php on line 83

I don't know if this is an issue of mosaico. The post header looks like this, so it seems that mosaico is making the error.

action:download
filename:email.html
html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>TITLE</title>

Nevertheless, if you wish, I could prepare a pull-request with this integration.

mherbold commented 8 years ago

I will be looking into adding support for alternate premailers / style inliners next.

bwl21 commented 8 years ago

Will you please bring back the integration done by https://github.com/ainterpreting/mosaico-php-backend/issues/11 today? I don't want continue with my fork.

NJseo commented 8 years ago

Still looking for a CssInliner that want cause me troubles, any suggested solutions?

bwl21 commented 8 years ago

Hi, you could look in my fork https://github.com/bwl21/mosaico-php-backend the css inliner integration there works properly.

i don't know why Marvin does not handle pull requests.