Personalizamos los resúmenes que enviamos por RSS (con y sin plugin)

Cómo añadir miniaturas de imágenes en el feed RSS de WordPress

Por mucho que se repita que los feeds RSS ya no se utilizan, que están en peligro o que es algo obsoleto que ha sido sustituido por Twitter, envíos por email (newsletter), Zite, Flipboard o cualquier otro servicio, la verdad es que es una tecnología que sigue tan viva y tan útil como siempre.

WordPress incluye esta función por defecto. No hay que hacer nada para enviar nuestros contenidos por RSS, pero en algunos casos puede ser necesario hacer algunos retoques para asegurarnos de que el contenido que estamos enviando se adapta a nuestras necesidades.

Desde los ajustes de WordPress podemos elegir si queremos incluir en el feed RSS el contenido completo o sólo un resumen. Tal como viene configurado por defecto, el contenido por RSS se envía completo. Para cambiarlo a “Resumen” tenemos que ir a:

Ajustes > Lectura > Mostrar para cada entrada en el feed

Ajustes del feed en WordPress

Si lo cambiamos de “Texto completo” a “Resumen”, WordPress sólo incluirá:

  • El título de la entrada
  • Resumen automático: las primeras 55 palabras (the_excerpt)
  • Datos de la entrada: autor y fecha

Es decir, si decidimos enviar por RSS sólo un resumen, perderemos las imágenes adjuntas, incluso si se ha añadido una imagen destacada a la entrada.

La manera más lógica y fácil de conseguir que salgan imágenes en el feed es dejarlo en “Texto completo”, pero si necesitamos mostrar el resumen y, al mismo tiempo, una imágen de muestra, tendremos que añadir alguna función adicional a mano (o a través de un plugin, si lo preferimos), a través de the_excerpt_rss.

Así podremos personalizar nuestro contenido y añadir cualquier función, ampliando así sus posibilidades: incluir imágenes de muestra, texto, avisos, opciones para compartir el contenido en redes sociales, publicidad, etc.

Como siempre, hay varias soluciones. La manera más popular, que es la que encontramos en montones de blogs y tutoriales, es esta:

// Función para añadir la imagen destacada al resumen RSS
function mytheme_excerpt_post_thumbnail($content) {
	global $post;
	if ( has_post_thumbnail($post->ID) ) {
		$content = '<div>' . get_the_post_thumbnail($post->ID, 'thumbnail') . '</div>' . $content;
	}
	return $content;
}
add_filter('the_excerpt_rss', 'mytheme_excerpt_post_thumbnail');

Pero esta solución sólo tiene en cuenta la imagen destacada y por tanto, si la plantilla que utilizamos no tiene activada la función “post_thumbnails”, nuestro feed simplemente dejará de funcionar.

Otro problema con el código anterior es que nos obliga a definir una “imagen destacada” (post thumbnail) para cada entrada, pero en realidad, cuando añadimos una imagen ya la estamos asociando a esa entrada en particular, por lo que no hace ninguna falta hacerlo dos veces.

Por tanto, la solución ideal sería la que:

  1. Si la entrada tiene una imagen destacada, la muestra
  2. En caso contrario, muestra la primera (o última) imagen adjunta
  3. Si sigue sin encontrar ninguna imagen, no muestra nada (o muestra una imagen predefinida)

Recuperamos la primera imagen de la entrada

Otras soluciones lo que hacen es utilizar expresiones regulares para identificar las imágenes y adjuntar en el resumen RSS la primera que se encuentra:

// Recuperamos la primera imagen de la entrada para el resumen RSS
function mytheme_excerpt_rss_images($content) {
	global $post;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	if ( empty($first_img) ) {
		$first_img = "";
	}
	return '<p><img src="'.$first_img.'" /></p>' . $content;
}
add_filter('the_excerpt_rss', 'mytheme_excerpt_rss_images');

Esta solución tiene el inconveniente de que el tamaño de la imagen añadida será el que hayamos incluído en la entrada (probablemente mucho más grande de lo necesario). Además, utiliza expresiones regulares (preg_match_all), que puede ser un poco caro en cuanto a recursos.

Además, no es una solución ideal porque no nos permite definir una imagen destacada que tenga preferencia sobre el resto de fotos incluídas en la entrada.

Recuperamos una miniatura de la imagen destacada o de una adjunta

Lo que más sentido tiene en el resumen que enviamos por RSS es mostrar una miniatura (sea de la imagen destacada o de una adjunta) ya que, al fin y al cabo, se trata de una muestra del contenido.

Por ejemplo, con el siguiente fragmento de código podemos recuperar las imágenes adjuntas a cada entrada y ordenarlas según el criterio que más nos interese, pero solo se activará en caso de que no haya una imagen destacada definida.

De esta manera estamos utilizando la miniatura que WordPress ya ha creado. No es necesario crear otra ni cambiar el tamaño a una más grande, sinó que aprovechamos el trabajo que el gestor de contenidos ya ha hecho por nosotros:

// Incluimos una imagen de muestra (tamaño miniatura) en el resumen RSS
function mytheme_excerpt_rss_thumbs($content) {

	global $post;
	$args = array(
		'post_type' 	 => 'attachment', // Seleccionamos adjuntos
		'post_mime_type' => 'image', // Del tipo "imagen"
		'order' 		 => 'ASC', // Los ordenamos ascendentemente
		'orderby' 		 => 'menu_order', // Que respete el orden asignado
		'post_parent' 	 => $post->ID // De la entrada actual
	);
	$images = get_posts($args);
	$style = 'float:right;margin:0 0 20px 20px;'; // Estilos CSS

	// La entrada tiene una imagen destacada.
	if ( has_post_thumbnail($post->ID) ) {
		$content = '<div style="' . $style . '">' . get_the_post_thumbnail($post->ID, 'thumbnail') . '</div>' . $content;

	// No se ha asignado una imagen destacada, asi que adjuntamos
	// la primera que encontramos asociada a la entrada actual.
	} elseif ( $images ) {
		$post_link = get_permalink();
		$content = '<a href="' . $post_link . '" style="' . $style . '">' . wp_get_attachment_image($images[0]->ID, 'thumbnail') . '</a>' . $content;
	}

	return $content;
}

add_filter('the_excerpt_rss', 'mytheme_excerpt_rss_thumbs');

En este caso, damos preferencia a la imagen destacada, pero si no hay ninguna definida, seleccionará una imagen adjunta alternativa.

Además, hemos añadido un poco de estilo para que los lectores RSS muestren la foto a la derecha con el texto flotando alrededor y con algo de margen a los lados.

Si lo preferimos, podemos incluir el código en formato de plugin, para poder activarlo fácilmente y no tener que editar los archivos: Descargar plugin

Este es el código incluido en el plugin:

Cómo incluir miniaturas de todas las imágenes adjuntas en el resumen RSS

Si la web que estamos personalizando incluye entradas con muchas imágenes grandes o galerías (habitual por ejemplo en webs de fotógrafos o de noticias), en vez de enviar el contenido tal como lo hemos publicado, podemos incluir junto al resumen únicamente las miniaturas, enlazadas a la imagen a tamaño completo o a la misma entrada.

En este caso, en vez de utilizar get_posts para recuperar las imágenes como en el ejemplo anterior, vamos a utilizar get_attached_media, una función introducida en WordPress 3.6 que simplifica este tipo de tareas, permitiéndonos hacer consultas en una solo linea:

// Incluimos en el feed RSS miniaturas
// de todas las imagenes adjuntas.
function mytheme_post_gallery_thumbs_feed($content) {
	if ( is_feed() ) {
		global $post;
		$media = get_attached_media( 'image', $post->ID ); // Recuperamos todas las imagenes adjuntas
		$feedthumbs = '';
		if ( $media ) {
		    foreach ( $media as $attachment ) {
		        $feedthumbs .= wp_get_attachment_image( $attachment->ID, 'thumbnail' );
		    }
		}
		$content .= '<div>' . $feedthumbs . '</div>';
	}
	return $content;
}
add_filter('the_excerpt_rss', 'mytheme_post_gallery_thumbs_feed');

Conclusión

Aunque por defecto WordPress sólo incluye la opción de mostrar el contenido completo o un resumen en los feeds RSS, gracias a the_excerpt_rss podemos incluir cualquier función para personalizar el contenido. De la misma manera, si quisiéramos modificar la versión completa del feed, la función que nos interesa es the_content_feed.

Comentarios

  1. ulises

    Es decir que solo tengo que agregar este codigo al archivo funtions.php via FTP y listo, es asi?
    Pero tengo duda, en que parte del funtions.php debo agregarlo :/

  2. Daniel

    Exacto, puedes añadirlo en “functions.php” o, si quieres que sea independiente del tema, activarlo como plugin.

    En el primer caso, no es necesario incluirlo en una parte concreta: puede estar al final, por ejemplo, o entre otras funciones.

  3. Desconocia que se pudiesen añadir miniaturas al rss. Vamos a probarlo.

  4. Camila

    Hola, intento bajarme el plugin pero me baja un archivo php. Tenés otro link? Gracias!

  5. Daniel

    Para instalar el plugin puedes subir directamente el archivo ZIP desde WordPress, o bien copiar el archivo PHP en la carpeta “plugins”, dentro de “wp-content”.

  6. Gracias por tu post, voy a probar a ver si funciona! No tengo imágenes en el RSS u otros y no es lo mismo, espero que esto ayude a tener mas seguidores :)

  7. Estimado Daniel:
    Muy bueno lo que indicas en este post.
    Yo estoy tratando de hacerlo pero no funciona.
    Depende de como se hizo el RSS?
    Mi ejemplo es http://www.diariorss.com
    Me podrias ayudar?
    He probado varios plugins, pero no siempre toman las imagenes. Depende mucho de la fuente de imformacion (en este caso diarios argentinos) pero por ejemplo con La Nacion, no siempre funciona por mas que haya imagenes en la noticia.
    Agradezco que me puedas orientar.
    Veo que lo tienes actualizado a los comentarios de este link…

    La aplicacion de esta indicaciones es para el RSS propio?

    Muchas gracias.
    Leonardo Grabow

  8. Daniel

    Hola Leonardo. No, claro, esto sólo se refiere a las fuentes RSS propias, las que genera tu propia web. Si son canales externos no tienes control sobre ellos, o al menos, no a través de funciones internas en tu instalación.

  9. Lin

    Hola,
    Cómo puedo hacer que tome la imagen más grande para el thumbnail?

  10. Daniel

    Hola Lin.
    Puedes elegir el tamaño que quieres mostrar cambiando la palabra “thumbnail” en la linea 30 del plugin. Hay cuatro opciones:

    – full: imagen original
    – large: tamaño grande
    – medium: tamaño mediano
    – thumbnail: miniatura

  11. Ale

    Gracias, me ha sido de gran utilidad.

  12. DAVID

    Saludos,

    Entiendo que esto es para programar el rss de nuestra página, pero si lo que queremos es incluir en nuestra página el rss de otra y que aparezcan imagenes, deberá ser el dueño de la otra página que configure esta opción, es así??

    gracias

  13. Daniel

    Hola David.
    Correcto, lo que se explica aquí es para configurar la salida del feed de nuestra própia página. Si lo que quieres es mostrar el contenido de un feed RSS externo (por ejemplo, las noticias de otra web), puedes utilizar la función fetch_feed de WordPress (en el link encontrarás ejemplos de uso). No necesitas permiso del propietario de la otra web para hacer esto.

  14. Ángel

    Hola Daniel, muchas gracias por tu ayuda, es una excelente función!! Yo la había estado usando en mi blog de wordpress desde hace mucho, agregue el código en el archivo functions.php, sin embargo el día de ayer actualicé mi tema y quise añadir nuevamente este codigo, pero al hacerlo, me aparece “fatal error” y todo se cae. Probé subirlo como plugin y funciona perfecto, pero quisiera saber a qué se debe que no pueda usarlo en el archivo de funciones. Lo que sucede es que no me gusta ver mi panel de plugins con tanta cosa jeje, Alguna idea? Tal vez se deba crear otro archivo de funciones o algo así? Gracias!

  15. Norge

    Hola Daniel!!! excelente el post, genial en mi caso, uso los feed para las redes sociales creo que le faltaba este detalle… Solo una cosa dices que si queremos un tamaño mas amplio que cambiemos en la line 30 trhumbail por medium en mi caso, solo que no pasa nada… hace falta cambiar en algun otro lugar?… no es tan nescesario pero me gustaria saber porque no me funciona… saludos

  16. Norge

    Solucionado: Volví a revisar el codigo y pude ver donde estaba la OMISION jejeje… gracias Daniel, muy buena esta… sldos

  17. Mauri Hernández

    Hola Daniel está genial tu post, ando buscando algo parcecido pero creo que el código que citas no me sirve. Lo que quiero es mostrar la imagen en miniatura en la pagina del blog cuando aparecen los resumenes de las entradas, estoy utilizando canvas framework y cuando coloco imagen destacada no tiene esta opción de mostrar la imagen en el resumen en miniatura. ¿Qué instrucción le falta a mi theme? Muchas gracias por anticipado :)

  18. Daniel

    Hola Mauri.
    Los ejemplos de esta entrada son para mostrar imágenes en el feed RSS, no te servirán para lo que quieres hacer.

    Para incluir miniaturas en los resúmenes de la web, tendrías que editar las plantillas e incluir alguna función que te permita obtener la imagen, por ejemplo: the_post_thumbnail().

    Aquí tienes algunos ejemplos con funciones para recuperar datos de las miniaturas:

    Funciones de WordPress para obtener la ruta de la imagen destacada y otros atributos

  19. Joaquin Personal

    Porque no me deja woocommerce añadir miniaturas a las categoría de los productos???
    Por favor, si alguien sabe la solución, gracias de antemano… Estaré muy agradecido si me la pasan… Mi correo elec. d_linea73@hotmail.con.

  20. Luis

    La base es buena pero en mi configuración no funciona para el feed principal.

    Tengo un multisite con dominio1.com y dominio2.com y aunque funciona para el dominio2.com no funciona para el dominio1.com y hace que no se localice el feed de dominio1.com por ningún lector de feeds.

    ¡Lástima!

    Saludos

  21. David Lopez

    Hola muy buenas a todos, y en especial a Daniel por este fantástico y útil Blog. Queria comentaros mi problema a ver si podríais arrojar algo de luz:

    Los posts de mi web (basada en WP, pero hosteado en One.com) se muestran bien en la web (Trabajo con el Visual composer),
    pero NO se muestran bien tanto las imagenes como el resumen en la sección del Reader/Lector de nuevos posts en wordpress, que es donde la gente que allí tenemos (unos 140 seguidores) miran las novedades y pueden hacer expandirnos a otras personas. Este problema lo he intentado solucionar y no ha havido éxito mirando por la web código para el functions.php (http://www.wpfunction.me/) y ni con diferentes plugins como Auto Post Thumbnail, Custom Feed Thumbnails, …

    Espero me pudierais ayudar con este tema,,, muchas gracias de antemano…

  22. David Lopez

    Por cierto, me podeis encontrar en mi mail de empresa:
    david@designisentrum.com

  23. Antonio

    ¿Cómo sé si el rss de mi blog admite la función de poder mostrar las imágenes destacadas?
    He probado todo lo que habéis mencionado y sigue sin salir la imagen…
    Un saludo

  24. Carolina

    Cuando lo activo me da un error fatal… :S

    Fatal error: Cannot redeclare dn_excerpt_rss_thumbs() (previously declared in /var/www/mejoralasalud/www/wp-content/plugins/custom-feed-thumbnails-plugin-1/custom-feed-thumbnails-plugin.php:15) in /var/www/mejoralasalud/www/wp-content/plugins/custom-feed-thumbnails-plugin/custom-feed-thumbnails-plugin.php on line 40

    ¿Como lo arreglo?

  25. Daniel

    Parece que el problema es que tienes un plugin repetido (custom-feed-thumbnails-plugin), por eso sale el error de que la función “dn_excerpt_rss_thumbs()” ya existe.

  26. Jonathan

    Urgente, necesito ayuda, me estoy volviendo loco.
    Resulta que implementé esto de ponerle la imagen a los artículos del feed manualmente ya que mi tema no lo hace por si solo.

    Al principio todo bien pero ahora que se actualizó el tema demora como 2 minutos en cargarse el feed de mi página.

    Ayuda, alguien me puede sugerir alguna solución o decirme que puede estar pasando?

    Muchas gracias de antemano.

  27. Adrian

    Hola, ante todo muchas gracias por el código, va perfectamente. Ahora me gustaría alinear la imagen con el resumen, me queda así:
    [IMG]http://i68.tinypic.com/2sba54p.png[/IMG] y me gustaría que quede alineadas la imagen con el texto

    saludos

  28. Daniel

    Hola Adrian.
    Los lectores RSS no tienen acceso a los estilos CSS de la web, por lo que si quieres cambiar el diseño de algún elemento, hay que hacerlo directamente en el contenido. Por ejemplo: <img src="/ruta/de/la/imagen/" alt="" style="float:right" />

  29. Rafa

    Gracias amigo. El plugin que creastes me ha funcionado perfecto. Justo lo que buscaba :D

  30. ¡Muchas gracias! La imagen destacada y el resumen de las entradas se adaptan perfectamente a mi newsletter RSS.

  31. Excelente aporte, me sirvio para mi web de http://abrirnegocio.com/feed y ahora está funcionando sin problemas. La utilidad de tener la imagen en el feed es sobre todo para lograr hacer campañas de promoción a nivel de varios sitios similares. Y para ello es que requieren que la página web tenga imágenes en el feed.

  32. Guadalupe

    Gracias por el post, pero tengo un problema. Tengo 2 webs hechas en wordpress y metí dicho código en las dos mediante el plugin y en donde quiero meter las RSS con las imágenes no me aparecen. ¿Me podrías ayudar?

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)