Supongamos que está utilizando un servicio de RSS a correo electrónico. Son bastante útiles. A muchas personas les gusta suscribirse al contenido por correo electrónico. Tienes un CMS que genera RSS a partir del contenido que creas. Un servicio de RSS a correo electrónico puede buscar nuevas entradas, formatear esas nuevas entradas en un correo electrónico y enviarlas a una lista de suscriptores. MailChimp y Campaign Monitor ofrecen este servicio y estoy seguro de que no son los únicos.
Pero, ¿cómo maneja las imágenes dentro de esas entradas generadoras de correo electrónico? En realidad, puede ser un poco complicado, porque el HTML para las imágenes que funciona en el sitio web puede no ser tan bueno en el correo electrónico.
He aquí un ejemplo. Escribes una publicación de blog y el contenido de esa publicación de blog se escupe así:
<p>Blah blah blah. Blog post about ponies. Here's a cool and hip pony:</p>
<img src="https://cdn.ponies.what/pony.jpg" width="1200" height="800">
<p>Isn't that the best pony of all?</p>Observe la width y height atributos. Eso no es del todo infrecuente. WordPress los agrega automáticamente de forma predeterminada si usa la herramienta Media Uploader.
Incluso si los quita, eso pony.jpg El archivo todavía tiene un tamaño de 1200x800px y se representará de esa manera. Eso no es gran cosa, en cuanto al diseño, en la web, porque tenemos CSS allí. Podemos hacer el clásico
article img {
max-width: 100%;
height: auto;
}para asegurarse de que la imagen no rompa los límites del contenedor en el que se encuentra, o la estire más de lo apropiado. El hecho de que la imagen tenga ese tamaño es razonable. Esa sería una versión @ 2x de una imagen de contenido en una columna de 600 px de ancho, que es lo que se necesita a veces para que una imagen ráster se vea bien y nítida.
Incluso podríamos emplear una técnica de imágenes receptivas, utilizando tanto JavaScript como CSS. También es una cosa inteligente y razonable que quizás quieras hacer.
Pero no tenemos CSS ni JavaScript disponibles en los correos electrónicos. De modo que la imagen de 1200x800px se renderizará a 1200x800px en un diseño de correo electrónico. Eso es malo. Incluso en el escritorio, es desagradablemente amplio y perjudica la capacidad de leer cómodamente el correo electrónico, ya que puede provocar un desplazamiento horizontal.
Solía usar FeedBurner para proporcionar suscripciones por correo electrónico en este sitio, y este es el tipo de cosas que obtendría la gente.
Correos electrónicos de desplazamiento horizontal. Mi favorito.
No es un problema aislado de FeedBurner. Me cambié a MailChimp para este servicio más recientemente. No es su “culpa”, pero las imágenes enormes también rompen el diseño de sus correos electrónicos. Aquí hay un ejemplo clásico en el que hace clic en “Mostrar imágenes a continuación” en Gmail para revelar imágenes y, al hacerlo, rompe un poco el diseño:
Así que vamos a necesitar arreglar esto a nivel HTML.
Alterando el HTML
Vamos a necesitar:
- Si el
<img>tiene atributos de ancho / alto, elimínelos - Agregue un nuevo atributo de ancho con un valor amigable
Entonces estos:
<img src="https://css-tricks.com/dealing-content-images-email/image.jpg" width="1200" height="800">
<img src="image.png" alt="image">Convertirse en:
<img src="https://css-tricks.com/dealing-content-images-email/image.jpg" width="320">
<img src="image.png" width="320" alt="image">Un plan bastante simple, pero ¿cómo lo haces realmente?
Una forma es poner Atributos compatibles con correo electrónico en el <img> en el contenido para empezar, y permita que la imagen sea más grande con CSS en su sitio si es necesario.
Otra forma es crear un feed especial que analice el contenido y altere los atributos en el <img>s según sea necesario. Soy un fanático de esta forma, porque entonces te da un lugar para hacer otras alteraciones especiales destinadas solo al correo electrónico.
Resolviendo en WordPress
Russell Heimlich me ayudó con esto en este hilo del foro. ¡Gracias Russell!
Necesitará crear una nueva fuente RSS en WordPress solo para esto. Afortunadamente, WordPress lo hace fácil con add_feed (). Para su archivo functions.php o un complemento personalizado:
function css_tricks_custom_feeds() {
add_feed('email', 'get_me_the_email_feed_template');
}
add_action('init', 'css_tricks_custom_feeds');El email string crea una nueva fuente con el correo electrónico slug, por lo que ahora hay una nueva URL de fuente en:
https://css-tricks.com/feed/email/El get_me_the_email_feed_template cadena hace referencia a una función de devolución de llamada:
function get_me_the_email_feed_template() {
add_filter('the_content_feed', 'css_tricks_super_awesome_feed_image_magic');
include(ABSPATH . '/wp-includes/feed-rss2.php' );
}Que hace referencia a una función de filtro. Esta función de filtro hace la magia de alterar el HTML en una publicación.
function css_tricks_super_awesome_feed_image_magic($content) {
// Weirdness we need to add to strip the doctype with later.
$content="<div>" . $content . '</div>';
$doc = new DOMDocument();
$doc->LoadHTML($content);
$images = $doc->getElementsByTagName('img');
foreach ($images as $image) {
$image->removeAttribute('height');
$image->setAttribute('width', '320');
}
// Strip weird DOCTYPE that DOMDocument() adds in
$content = substr($doc->saveXML($doc->getElementsByTagName('div')->item(0)), 5, -6);
return $content;
}Esto realmente me pareció mágico. No tenía idea de que PHP tuviera la capacidad nativa de consultar un fragmento de HTML como si fuera el DOM y ajustar atributos y esas cosas, como lo hace JavaScript. Pero lo hace. Muestra lo que sé.
Tenga en cuenta que si la imagen que está insertando en la entrada RSS es a través de algo como the_post_thumbnail (la “imagen destacada”) en WordPress, ya está haciendo algo especial para incluirlo en el feed, por lo que debería usar the_post_thumbnail('medium'); en vez de the_post_thumbnail('large'); o lo que sea.
Utilice el nuevo feed
Ahora que existe esta nueva fuente, puede apuntar el servicio de RSS a correo electrónico. Para CSS-Tricks, estoy usando MailChimp y sorbe en ese feed:
MailChimp también hace todo lo posible, a través de consultas de medios en el correo electrónico, para hacer que la plantilla sea compatible con la pantalla pequeña:
¡Y funciona!
Debo decir que funciona en clientes de correo electrónico móviles que admiten consultas de medios. Que no es compatible con las aplicaciones de GMail en iOS o Android, lo cual es lamentable.
¿Móvil primero?
Dada la frecuencia con la que se lee el correo electrónico en dispositivos de pantalla pequeña, es tentador hacer que la plantilla de correo electrónico tenga un buen ancho para pantallas pequeñas y solo estirarla para pantallas grandes. Si opta por un ancho fijo amplio, incluso si lo ajusta con una consulta de medios, los navegadores no compatibles lo pasarán mal:
Hablé un poco con Fabio Carneiro, el maestro de los correos electrónicos de MailChimp, que tiene algunas ideas sobre los correos electrónicos con dispositivos móviles que funcionarán con aplicaciones que no admiten consultas de medios.
Actualizaré esto cuando podamos hacerlo. También me gustaría probar a configurar width="100%" en las imágenes para que se ajusten al contenedor en lugar de al width="320" cosa que estoy haciendo ahora. Tenía un poco de miedo de que el 100% todavía estirara el contenedor donde 320 seguro que no lo hará. Necesita más pruebas.
He tenido suerte con un <table> diseño basado en el que no hay un ancho fijo, sino solo máximo y mínimo …
<!-- main content-wrapping table -->
<table style="min-width: 320px; max-width: 600px;">
</table>Pero no puedo responder al 100% de eso todavía.