Foundation for Emails. Workflow con PHP e Inky

Foundation for Emails. Workflow con PHP e Inky

Para evitar los grandes problemas que siempre ha llevado la maquetación de emails, ZURB ha desarrollado la segunda versión de Ink, llamada Foundation for Emails.

La gran ventaja de esta nueva versión es que incluye un lenguaje de programación intermedio llamado Inky que nos abstrae de todo el complejo marcado de HTML necesario con el uso de tablas.

Para seguir el flujo de trabajo de Zurb, proveen una serie de librerías que permiten automatizar las tareas de compilar Inky a HTML y aplicar los estilos en linea mediante scripts de GULP.

En este artículo vamos a proponer un flujo de procesamiento de estos archivos programado en PHP, de manera que podamos de forma fácil, generar a través de plantillas básicas generar nuestros HTMLs responsivos y fácilmente reutilizables.

Para ello, nos vamos a apoyar en dos librerías

 

La primera de ellas, nos va a permitir compilar nuestros archivos .inky a archivos .html y emogifier nos permitirá añadir nuestra hoja de estilos como atributos en línea, de forma que garanticemos compatibilidad con GMail.

El flujo de trabajo es el siguiente:

  1.   Cargamos un fichero .INKY como una cadena de texto
  2.   Cargamos nuestras hojas de estilo como cadenas de texto
  3.   Lo encapsulamos en un documento HTML
  4.   Pasamos el código INKY a HTML
  5.   Añadimos los estilos en línea

 

Vamos a detallar a continuación un poco más este proceso suponiendo que tenemos la siguiente estructura de archivos

	 css/
		 foundation.css
		 emails.css
 
	 templates/
		 remember_password.inky

 

El archivo remember_password.inky contendrá la plantilla básica en INKY de nuestro email. Puede ser algo como sigue

  <wrapper class="header">
    <container>
      <row>
        <columns>
          <img src="<?= siteURL () ?> '/logo.png" alt="My-logo" />
          <span class="corporative-title">
            <?= __(‘email_title’) ?>
          </span>
        </columns>
      </row>
    </container>
  </wrapper>

  <wrapper class="content">
    <container>
      <row>
        <columns>
          <?= __(‘email_remember_password’) ?>
        </columns>
      </row>
    </container>
  </wrapper>

  <wrapper class="footer">
    <container>
      <row>
        <columns>
          <?= __(‘email_legal_conditions’) ?>
        </columns>
      </row>
    </container>
  </wrapper>

El archivo foundations.css lo podemos encontrar descargando la versión ya compilada de CSS de la web.

El archivo emails.css contendrá nuestro diseño partícular para este email. Tal como color de fondo, tipografías, etc.

 /* Header */
.header {
    position: relative;
    background-color: black;
    color: white;
}

.header .container {
    background: transparent;
}

.header p {
    color: white;
}

.header h1 {
    margin: 0 0 32px 0;
    color: white;
    text-transform: uppercase;
    font-family: "FuturaStd", Arial, sans-serif;
    font-weight: 600;
    line-height: 1.2;
    font-size: 30px;
}


/* Content */
.content p {
    font-family: "FuturaStd", Arial, sans-serif;
    font-size: 16px;
    color: #666;
}


/* Footer */
.footer p {
    font-family: Helvetica, Arial, sans-serif;
    font-style: italic;
    font-size: 14px;
    line-height: 16px;
    color: #333;
}

Ahora vamos a convertir esta plantilla en un archivo listo para enviar por correo en PHP

// Autoload libs. (Using composer in this example)
require_once (APP_FOLDER  . '/vendor/autoload.php');


// Create Inky object
$inky = new HampeInkyInky ();


// Create Emogrifier
$emogrifier = new PelagoEmogrifier ();


// Get stylesheets as STRING
$css = 
  file_get_contents (siteURL () . 'css/foundation.css') . 
  file_get_contents (siteURL () . 'css/mail.css')
;


// Get Inky template (use any method you want to retrieve HTML)
$inky_template = file_get_contents (‘templates/remember_password.inky’);


// Create an HTML file. 
// Look how we injected the CSS using both ways, with style and link
$html = '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="' . siteURL () . 'css/foundation.css">
    <link rel="stylesheet" href="' . siteURL () . 'css/mail.css">      
    <style>' . $css . '</style>
  </head>
  <body>' .
    $inky_template . '
  </body>
</html>
';

// Convert the INKY tags to HTML
$email_html = $inky->releaseTheKraken ($html);


// Add style tags
$emogrifier->setHtml ($email_html);
$emogrifier->setCss ($css);
$styled_html = $emogrifier->emogrify ();


// Send email
// ...

Referencias

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí