Announcement

 

Pages: 1

#1 2010-03-30 02:14:03

P@t
Piwigo Team
Nice
2007-06-13
4098

NBM and CSS

A big problem with NBM (and HTML format) is that lot of mail client doesn't support css rules in html head (like gmail).
But they generaly accept syle="..." tag in the body. It's not a good way to do that (especially for themes).
But we can parse mail content, and transfer css code from head to body.

I wrote this simple code who do that, witch must be included in pwg_mail function, before sending mail.

Code:

// We search all css rules in style tags
preg_match('#<style>(.*?)</style>#s', $content, $matches);

if (!empty($matches[1]))
{
  preg_match_all('#\n(.*?) \{(.*?)\}#s', $matches[1], $matches);

  $ids = array();
  $class = array();
  $child = array();

  foreach ($matches[1] as $key => $property)
  {
    if (strpos($property, '#') === 0)
    {
      // Id selector
      $ids[substr($property, 1)][] = trim(str_replace("\n", ' ', $matches[2][$key]), ' ;');
    }
    elseif (strpos($property, '.') === 0)
    {
      // Class selector
      $class[$property][] = trim(str_replace("\n", ' ', $matches[2][$key]), ' ;');
    }
    else
    {
      // Child selector
      $child[$property][] = trim(str_replace("\n", ' ', $matches[2][$key]), ' ;');
    }
  }

  // Now we move rules to body
  foreach ($ids as $property => $values)
  {
    // Id
    $content = preg_replace('|id="'.$property.'"|', 'id="'.$property.'" style="'.implode('; ', $values).';"', $content);
  }
  foreach ($class as $property => $values)
  {
    // Class
    $content = preg_replace('|class="'.$property.'"|', 'class="'.$property.'" style="'.implode('; ', $values).';"', $content);
  }
  foreach ($child as $property => $values)
  {
    // Child
    $content = preg_replace('#<'.$property.'( |>)#', '<'.$property.' style="'.implode('; ', $values).';"$1', $content);
  }

  // Now we remove style tags in page head
  $content = preg_replace('#<style>.*?</style>#s', '', $content);
}

Only simple rules are converted, like:

#copyright { font-size:10px; margin:0px; padding:48px 0px 32px 62px;}
.PWG { font-family:verdana, sans-serif !important; font-size:0.9em; font-weight:normal; letter-spacing:0px;}
h2 { padding:7px 15px; width:617px; font-weight:bold;}

Css rules ca be written on multiple lines like:

body {
font-family: Univers, Helvetica, Optima;
font-size:12px;
margin:0px;
padding:0px;
}

Restrictions:
- Selectors must start a line (no space or other before)
- This code can't convert complex rules (like a.thumblnk, img:hover, etc...)

P@t

Offline

 

#2 2010-03-30 02:21:24

P@t
Piwigo Team
Nice
2007-06-13
4098

Re: NBM and CSS

With this code, this mail:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr" dir="ltr">
<head>
<title>Piwigo Mail</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style><!-- /* Mini style for mails */
/* Global mail css */

body { font-family: Univers, Helvetica, Optima; font-size:12px; margin:0px; padding:0px; }
#the_page { margin:0px; padding:0px; text-align:left;}
#content { margin:0px; padding:82px 0px 0px 62px; width:732px;}
hr { width:632px; margin-left:0;}
#copyright { font-size:10px; margin:0px; padding:48px 0px 32px 62px;}
.PWG { font-family:verdana, sans-serif !important; font-size:0.9em; font-weight:normal; letter-spacing:0px;}
h2 { padding:7px 15px; width:617px; font-weight:bold;}
img { margin:16px; border:16px solid #aaa; -moz-border-radius: 4px; border-radius: 4px 4px; }
img:hover { padding: 15px; border: 1px solid yellow; -moz-border-radius: 4px; border-radius: 4px 4px; }/* Theme clear mail css */

body { background-color:#fff; color:#696969;}
#the_page { background: #fff url(http://localhost/PWG/trunk_work/themes/default/images/mail/mailbody-bg.png) repeat-y scroll left top;}
#content { background: transparent url(http://localhost/PWG/trunk_work/themes/default/images/mail/header-bg.png) no-repeat scroll left top;}
#copyright { background: transparent url(http://localhost/PWG/trunk_work/themes/default/images/mail/footer-bg.png) no-repeat scroll left bottom; color: #333;}
h2 { background-color: #ddd;}
img { margin: 16px; border: 16px solid #aaa; -moz-border-radius: 4px; border-radius: 4px 4px; }
img:hover { padding: 15px; border: 1px solid yellow;background-color:#faebd7; -moz-border-radius: 4px; border-radius: 4px 4px; }
a { color: #369; background: transparent; }
a:hover { color: #ddd; }--></style>
</head>
<body>
<div id="the_page">
<div id="content" class="content"><div id="nbm_message">
<h2>Notification</h2>
<p>Bonjour admin3,</p>

<p>Vous venez d'être inscrit par le webmestre du site pour recevoir des notifications par mail.</p>



<p>Rendez-vous sur <a href="http://piwigo.org/demo">Piwigo demonstration site</a>.</p>
<p>A bientôt,</p>
<p style="text-align:center">Piwigo demonstration site</p>
<p>
<br><hr>
Pour vous désinscrire, cliquez sur <a href="http://localhost/PWG/trunk_work/nbm.php?unsubscribe=tt63zaF42X3yRd70">http://localhost/PWG/trunk_work/nbm.php?unsubscribe=tt63zaF42X3yRd70</a><br>

Pour vous inscrire, cliquez sur <a href="http://localhost/PWG/trunk_work/nbm.php?subscribe=tt63zaF42X3yRd70">http://localhost/PWG/trunk_work/nbm.php?subscribe=tt63zaF42X3yRd70</a><br>
En cas de problèmes ou de questions, envoyer un mail à <a href="mailto:patdenice@free.fr?subject=[NBM] Problèmes ou questions">patdenice@free.fr</a><br>
<hr><br>
</p>
</div></div> <!-- content -->
<div id="copyright">
<hr>
  Envoyé par
  <a href="http://piwigo.org/demo">Piwigo demonstration site</a>

   - Propulsé par
  <a href="http://piwigo.org" class="Piwigo">
  <span class="Piwigo">Piwigo</span></a>
  2.0.0

  - Contacter
  <a href="mailto:patdenice@free.fr?subject=Un+commentaire+sur+le+site">Webmestre</a>

</div> <!-- copyright -->
</div> <!-- the_page -->

</body>

</html>

become...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr" dir="ltr">
<head>
<title>Piwigo Mail</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body style="font-family: Univers, Helvetica, Optima; font-size:12px; margin:0px; padding:0px; background-color:#fff; color:#696969;">
<div id="the_page" style="margin:0px; padding:0px; text-align:left; background: #fff url(http://localhost/PWG/trunk_work/themes/default/images/mail/mailbody-bg.png) repeat-y scroll left top;">
<div id="content" style="margin:0px; padding:82px 0px 0px 62px; width:732px; background: transparent url(http://localhost/PWG/trunk_work/themes/default/images/mail/header-bg.png) no-repeat scroll left top;" class="content"><div id="nbm_message">
<h2 style="padding:7px 15px; width:617px; font-weight:bold; background-color: #ddd;">Notification</h2>
<p>Bonjour admin3,</p>

<p>Vous venez d'être inscrit par le webmestre du site pour recevoir des notifications par mail.</p>



<p>Rendez-vous sur <a style="color: #369; background: transparent;" href="http://piwigo.org/demo">Piwigo demonstration site</a>.</p>
<p>A bientôt,</p>
<p style="text-align:center">Piwigo demonstration site</p>
<p>
<br><hr style="width:632px; margin-left:0;">
Pour vous désinscrire, cliquez sur <a style="color: #369; background: transparent;" href="http://localhost/PWG/trunk_work/nbm.php?unsubscribe=tt63zaF42X3yRd70">http://localhost/PWG/trunk_work/nbm.php?unsubscribe=tt63zaF42X3yRd70</a><br>

Pour vous inscrire, cliquez sur <a style="color: #369; background: transparent;" href="http://localhost/PWG/trunk_work/nbm.php?subscribe=tt63zaF42X3yRd70">http://localhost/PWG/trunk_work/nbm.php?subscribe=tt63zaF42X3yRd70</a><br>
En cas de problèmes ou de questions, envoyer un mail à <a style="color: #369; background: transparent;" href="mailto:patdenice@free.fr?subject=[NBM] Problèmes ou questions">patdenice@free.fr</a><br>
<hr style="width:632px; margin-left:0;"><br>
</p>
</div></div> <!-- content -->
<div id="copyright" style="font-size:10px; margin:0px; padding:48px 0px 32px 62px; background: transparent url(http://localhost/PWG/trunk_work/themes/default/images/mail/footer-bg.png) no-repeat scroll left bottom; color: #333;">
<hr style="width:632px; margin-left:0;">
  Envoyé par
  <a style="color: #369; background: transparent;" href="http://piwigo.org/demo">Piwigo demonstration site</a>

   - Propulsé par
  <a style="color: #369; background: transparent;" href="http://piwigo.org" class="Piwigo">
  <span class="Piwigo">Piwigo</span></a>
  2.0.0

  - Contacter
  <a style="color: #369; background: transparent;" href="mailto:patdenice@free.fr?subject=Un+commentaire+sur+le+site">Webmestre</a>

</div> <!-- copyright -->
</div> <!-- the_page -->

</body>

</html>

Now the mail looks good in gmail...

P@t

Offline

 

#3 2010-03-31 01:01:20

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13791

Re: NBM and CSS

Before we investigate in a deeper redesign of the "Notification By Mail" feature (P@t encountered many issues on NBM while converting themes to the new architecture for Piwigo 2.1, nicolas and me also encountered many issues on NBM while converting language keys for Piwigo 2.1), having a "quick fix" for Piwigo 2.1 would be nice :-)

I had seen that CSS was not working on Gmail, but I admit I'm not very fan of HTML emails anyway (text emails suit me perfectly most of the time). If NBM can work with GMail with no major rewrite, let's do it.

Offline

 

#4 2010-03-31 08:19:10

VDigital
Former Piwigo Team
Paris (FR)
2005-05-04
17680

Re: NBM and CSS

IMO don't waste time on that mailers will improve their support.

http://www.email-standards.org/

Piwigo.com: Start and run your own photo gallery. Signup and get 30 days to try for free, no commitment.
8-)

Offline

 

#5 2010-03-31 10:03:37

nicolas
Former Piwigo Team
2004-12-30
1232

Re: NBM and CSS

I think you must stop using old custom code to send email and use well known library like swiftmailer. Piwigo is not a swiss army knife. It's a web photo gallery. With theses kind of tools we can easily send  email with both html and text parts without to take care of problems of some special webmail or client mail. We can also take much attention to our core code.

Offline

 

#6 2010-03-31 10:42:58

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13791

Re: NBM and CSS

nicolas wrote:

I think you must stop using old custom code to send email and use well known library like swiftmailer. Piwigo is not a swiss army knife. It's a web photo gallery. With theses kind of tools we can easily send  email with both html and text parts without to take care of problems of some special webmail or client mail. We can also take much attention to our core code.

Yes, that's perfectly right. We use Smarty for template engine. We use feedcreator to generate RSS. We use pclzip to extract zip files. And so on...

NBM needs a deeper redesign. But it's too late for 2.1.

Offline

 

#7 2010-03-31 11:02:08

nicolas
Former Piwigo Team
2004-12-30
1232

Re: NBM and CSS

plg wrote:

NBM needs a deeper redesign. But it's too late for 2.1.

I totally agree.

Offline

 

#8 2010-03-31 11:59:25

P@t
Piwigo Team
Nice
2007-06-13
4098

Re: NBM and CSS

nicolas wrote:

I think you must stop using old custom code to send email and use well known library like swiftmailer. Piwigo is not a swiss army knife. It's a web photo gallery. With theses kind of tools we can easily send  email with both html and text parts without to take care of problems of some special webmail or client mail. We can also take much attention to our core code.

Of course we'll try that for 2.2... I just want a rapid fix for 2.1.

P@t

Offline

 

#9 2010-03-31 15:46:33

P@t
Piwigo Team
Nice
2007-06-13
4098

Re: NBM and CSS

Here is final code:

Code:

add_event_handler('send_mail_content', 'move_ccs_rules_to_body');

function move_ccs_rules_to_body($content)
{
  // We search all css rules in style tags
  preg_match('#<style>(.*?)</style>#s', $content, $matches);

  if (!empty($matches[1]))
  {
    preg_match_all('#([^\n]*?)\{(.*?)\}#s', $matches[1], $matches);

    $selectors = array();
    $unknow_selectors = '';

    foreach ($matches[1] as $key => $value)
    {
      $selects = explode(',', $value);
      $style = trim($matches[2][$key], ' ;');

      foreach($selects as $select)
      {
        $select = trim($select);
        $selectors[$select][] = $style;
      }
    }
    foreach ($selectors as $selector => $style)
    {
      if (!preg_match('/^(#|\.|)([A-Za-z0-9_-]*)$/', $selector, $matches))
      {
        $unknow_selectors .= $selector.' {'.implode('; ', $style).";}\n";
      }
      else switch ($matches[1])
      {
        case '#':
          $content = preg_replace('|id="'.$matches[2].'"|', 'id="'.$matches[2].'" style="'.implode('; ', $style).';"', $content);
          break;
        case '.':
          $content = preg_replace('|class="'.$matches[2].'"|', 'class="'.$matches[2].'" style="'.implode('; ', $style).';"', $content);
          break;
        default:
          $content = preg_replace('#<'.$matches[2].'( |>)#', '<'.$matches[2].' style="'.implode('; ', $style).';"$1', $content);
          break;
      }
    }

    // Keep unknow tags in page head
    if (!empty($unknow_selectors))
    {
      $content = preg_replace('#<style>.*?</style>#s', "<style type=\"text/css\">\n$unknow_selectors</style>", $content);
    }
    else
    {
      $content = preg_replace('#<style>.*?</style>#s', '', $content);
    }
  }
  return $content;
}

This code move  every simple css rules from head to body.
Complex rules are kept in mail header.

Examples of simples rules which are moved to body:

Code:

body { font-family: Univers, Helvetica, Optima; font-size:12px; margin:0px; padding:0px; }

#content { margin:0px; padding:30px 0px 0px 30px; width:732px;}

.PWG { font-family:verdana, sans-serif !important; font-size:0.9em; font-weight:normal; letter-spacing:0px;}

h2, h1, h3 { padding:7px 15px; width:617px; font-weight:bold;}

img {
  margin:16px;
  border:16px solid #aaa;
  -moz-border-radius: 4px;
  border-radius: 4px 4px;
}

Examples of complex rules which stay in header:

Code:

img:hover { padding: 15px; border: 1px solid yellow; -moz-border-radius: 4px; border-radius: 4px 4px; }
a.Piwigo { font-family: verdana, arial, helvetica, sans-serif; color : #F33; text-decoration: none; border: 0; }
P@t

Offline

 

#10 2010-03-31 16:03:35

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13791

Re: NBM and CSS

Well, that's a solution to fix the immediate issue :-). I hope we can find a cleaner solution for the future (I mean without "on the fly" template manipulation)

Offline

 

#11 2010-04-05 01:01:30

rub
Former Piwigo Team
Lille
2005-08-26
5019

Re: NBM and CSS

plg wrote:

Before we investigate in a deeper redesign of the "Notification By Mail" feature (P@t encountered many issues on NBM while converting themes to the new architecture for Piwigo 2.1, nicolas and me also encountered many issues on NBM while converting language keys for Piwigo 2.1), having a "quick fix" for Piwigo 2.1 would be nice :-)

What's issues for themes and language?

nicolas wrote:

I think you must stop using old custom code to send email and use well known library like swiftmailer. Piwigo is not a swiss army knife. It's a web photo gallery. With theses kind of tools we can easily send  email with both html and text parts without to take care of problems of some special webmail or client mail. We can also take much attention to our core code.

Yes, it's a good idea to try a specific library.
A few years ago, I had not found a good library.

nicolas wrote:

plg wrote:

NBM needs a deeper redesign. But it's too late for 2.1.

I totally agree.

Please, tell me more!
The big difficulty is to manage n themes and n languages witch are not those of webmaster witch do the action.
What's your propositions?

P@t wrote:

Here is final code:

Great P@t!
Instead of use a function, we can too change directly code on tpl file?

Help us to build this site!

Démo de la Butterfly
Plus de galeries / More galleries <= Rajoutez votre site...

Offline

 

Pages: 1

 

Board footer

Powered by FluxBB

github twitter newsletter Donate Piwigo.org © 2002-2024 · Contact