Recapitulemos lo que hemos visto en las últimas entradas, aquí en Blogpocket.com, acerca del tratamiento de las imágenes adjuntas a un post (los objetos denominados attachments que, en realidad, pueden ser también vídeos, etc.).

• Si subes una imagen, mediante el botón “Media” del editor de posts o mediante la opción “Media” del escritorio), se almacena en el directorio local (que suele ser wp-content/uploads). Las imágenes asociadas (WordPress crea varias versiones, en distintos tamaños -thumbnail, medium y full- del archivo subido) se denominan “Attachments” del posts.
• Con el plugin W3 Total Cache puedes hacer que dichas imágenes, automáticamente, se transmitan a un CDN. En Configurando W3 Total Cache para el CDN de Amazon vimos cómo hacerlo
• Además, para cada post puedes elegir una imagen como destacada (featured). Puede ser cualquiera de las existentes en la galería y no tiene porqué coincidir con las attachments. Puedes asignar una imagen featured automáticamente, y de una pasada, a partir de una de las imágenes attachment de cada post, en toda la base de datos de tu blog, con el plugin Auto Featured Image. Sin embargo, llegado el caso, puede ser necesario eliminar todas las imágenes featured, cuestión que explicábamos en Cómo eliminar la imagen en miniatura de todos los posts.
• Otro problema puede darse en algunos themes que utilizan funciones (como vt_resize) para redimensionar la imagen featured y utilizando un CDN. El problema y la solución los describiamos en Cómo redimensionar la imagen featured si utilizas CDN.
• Si a partir de un determinado momento empiezas a utilizar un CDN y las imágenes de tus posts están enlazadas a Flickr, puedes traértelas al directorio local (y, en consecuencia, al CDN con W3 Total Cache) con el plugin Add Linked Images To Gallery.

Hoy añadiremos a todo esto la forma de conseguir extraer de un post la primera imagen attachment. ¿Y para qué puede servir eso?. Puede ser muy útil para mostrar siempre una imagen asociada al post, como destacada, aunque no tenga asignada una featured. Y también en el caso de instalaciones multisite con varios editores, en las que puede ser interesante no obligar a éstos a subir fotos al directorio local ni a asignar imágenes featured, pudiendo seguir enlazando a URLs externas. El plugin Add Linked Images To Gallery y el código que veremos a continuación harán el trabajo por ellos.

Extrayendo la primera imagen de un post

La función de WordPress get_posts sirve para crear múltiples bucles y recupera una lista de los últimos posts bajo unos determinados criterios. Para utilizarla con el objetivo de extraer las imágenes adjuntas a un post, solo es necesario saber que las imágenes attachments se guardan en la base de datos con el indicativo “attachment” en el campo post_type y, además, con el valor ‘inherit’ en el campo post_estatus. Otros dos argumentos para esta función son el número de posts que se recuperarán (numberposts a -1 significa todos los posts) y post_parent que es el número ID del post.

Con ello se obtiene una lista de todos los posts que se puede recorrer para seleccionar lo que se quiera. En nuestro caso, con la función wp_get_attachment_image_src accederemos al array que contiene la URL y los valores del ancho y alto del archivo attachment.

<?php
$args = array( ‘post_type’ => ‘attachment’, ‘numberposts’ => 1, ‘post_status’ =>’inherit’, ‘post_parent’ => $post->ID );
$attachments = get_posts($args);
if ($attachments) {
foreach ( $attachments as $attachment ) {

$image = wp_get_attachment_image_src($attachment->ID, ‘full’);
}
}
?>

Una vez obtenido el array con los atributos de la imagen attachment, podemos mostrar ésta redimensionada, de la siguiente forma:

<?php if ( $attachments ) { ?>
<img src=”<php echo $image[0]; ?>” width=”280″ height=”257″ alt=”image”/>
<?php }
?>

Ver también la función get_children con la que también se puede generar un bucle para mostrar la primera imagen de un post.

Si eres aficionado a la fotografía seguramente uses el servicio de Flickr, donde puedes cargar fácilmente tus fotos y que otras personas las visualicen en modo de presentación o por tamaño de imagen. También, es posible, que uses WordPress para mostrar tus mejores fotos en un blog o portfolio personal, que siempre posiciona mejor en los buscadores.

Si este es tu caso seguramente echarás en falta algunas funcionalidades de Flickr en WordPress, y una de las más obvias es poder mostrar al visitante todos los tamaños disponibles de la imagen.

Como ya sabrás, y sino lo recordamos, cuando subes una imagen a WordPress este almacena varias versiones de la misma. El objeto de este es ofrecerte varios tamaños a insertar en tus entradas, y que no tengas que redimensionar por HTML, reduciendo así la carga de página. Por supuesto, siempre puedes enlazar un tamaño menor al tamaño completo de imagen, u otro, desde el cargador de imágenes de WordPress.

Luego, esto se muestra en la página de adjuntos, normalmente gestionada por los temas WordPress mediante un fichero habitualmente llamado attachment.php o image.php. Lo que pasa es que, generalmente, solo se mostrará la imagen enlazada, sin darte más opciones. Vamos a solucionarlo …

Lo primero que tienes que hacer es abrir el fichero functions.php y añadir lo siguiente:

Guardamos los cambios y ahora, en el fichero attachment.php o image.php del tema ponemos lo siguiente en el loop, sustituyendo el correspondiente, normalmente justo después de la llamada al título del adjunto:

Guardamos y ya está, ahora cuando alguien haga clic en un adjunto tendrá la posibilidad de visualizar todos los tamaños de la imagen.

El hotlinking es quizás una de las prácticas más utilizadas y menos comprendidas por los bloggers. O sea, todos sabemos que "compartir es bueno", que "hay que enlazar" y todas esas cosas que hacen que la web sea hipertextual, hasta ahí de acuerdo.

El problema viene con las imágenes. Cuando alguien usa una imagen tuya para ilustrar una publicación suya, si en vez de alojar la imagen en su servidor hace "hotlinking", o sea, "Añadir … desde una URL", algo que incluso tiene su pantalla al efecto en WordPress en el cargador de imágenes, está aumentando la carga de tu servidor sin saberlo (espero).

Esto es debido a que sus visitas, cuando ven tu imagen en su blog, en realidad están viendo la imagen en tu blog. Así que imagina si esto te lo hace un foro de estos superfamosos o una web con muchísimas visitas, pueden llegar a tirarte el servidor o que te lo cancele tu proveedor de servicio por "exceso de peticiones externas".

Esta práctica, además, es un mal hábito también para el propio que hace hotlinking porque - muy habitual - el sitio que aloja originalmente la imagen en cualquier momento puede decidir cambiarla por otra (con erótico resultado en la "web invitada") o incluso quitarla (con feo resultado de icono de error de carga) en la web hotlinkeadora.

Así que …

• No uses la petaña de "Añadir … desde una URL" del cargador de imágenes de WordPress, habitúate a subir a tu servidor las imágenes con las que quieras ilustrar tus entradas, o mejor, alójalas en Flickr o algún otro servicio especializado en imágenes.
• Si detectas que alguien te hace hotlink avísale para que sepa el porqué no es una práctica adecuada (eso si, espérate incluso insultos de todo tipo, que hay mucho imbécil por ahí)
• Protégete del hotlinking con los consejos para detectar y evitar robo de contenido en tu sitio
• Protégete del hotlinking mediante este maravilloso plugin que añade un fichero .htaccess especial a tu carpeta de archivos subidos y la protege de usos indebidos.

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía para Administrar WordPress

¡Se acabaron los problemas a la hora de incrustar contenido dinámico en tu blog!

Desde WordPress 2.9, gracias a oEmbed, podíamos incrustar contenido dinámico de YouTube, Flickr y algún sitio más en nuestras publicaciones simplemente pegando la URL del contenido “incrustable” en cuestión, ya fueran vídeos, presentaciones de fotos, etc, pero con Embedly entramos en la estratosfera de la incrustación de objetos al modo más sencillo, ampliando la implementación de oEmbed de WordPress.

La API de Embedly ofrece más de 100 posibles contenidos incrustables (y sumando), que van desde los habituales como YouTube, Qik, Viddler, Metacafé y demás, pero la lista es casi interminable, pudiendo incluso mostrar “tuits” de Twitter sin necesidad de más, o vídeos de WordPress TV, solo pegando la URL.

Además, no hay nada que configurar, si me apuras ni tocar. Lo instalas, lo activas y – muy importante – vas a la página de configuración y haces clic en el botón para actualizar la lista de proveedores de servicio (en principio aparece vacío) y, solo si quieres, desactivas algún servicio que sepas que nunca vayas a utilizar. Aunque la verdad es que te lo puedes ahorrar, por si acaso. A partir de ahí, cuando quieras insertar un objeto incrustado de contenido simplemente pegas la URL en el editor (el visual incluso) y se acabaron los problemas de códigos truncados al pasar de un editor a otro (HTML a visual o viceversa).
Ya no tienes que instalar un plugin para insertar vídeos, otro para scripts jQuery, otro para Twitter o Flickr, con Embedly tienes prácticamente todas las necesidades cubiertas, y del modo más sencillo posible, sin más botones en el editor, sin configuraciones, sin tener que ajustar anchos de tamaño de los objetos incrustados ¡una maravilla!

Sitio oficial: Embedly
Plugin WP: Embedly WordPress

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía para Administrar WordPress

1. Deshacer/papelera, de manera que si borras una entrada o un comentario puedes recuperarlo..
2. Editor de imágenes integrado con el que recortar, editar, rotar y escalar imágenes.
3. Actualización en lote y comprobación de compatibilidad de plugins, con lo que podrás actualizar varios plugins a la vez y poder ver antes de actualizar si los plugins son compatibles con tu versión de WordPress.
4. Incrustación sencilla de vídeos solo con pegar la URL, gracias a Oembed. Puedes incrustar contenido de YouTube, Daily Motion, Blip.tv, Flickr, Hulu, Viddler, Qik, Revision3, Scribd, Google Video, Photobucket, PollDaddy, y WordPress.tv (más próximamente).
5. Soporte por defecto de rel=canonical para mejorar el SEO.
6. Optimización automática de la base de datos desde el fichero wp-config.php solo con añadir define('WP_ALLOW_REPAIR', true);.
7. Los temas pueden tener "miniaturas de entrada" para tener una imagen asociada a la entrada.
8. Nueva tabla commentmeta.
9. Tipos de entrada personalizados, algo que estaba previsto para la versión 3.0.
10. Carpetas de temas personalizadas, muy util para esos plugins que llevan temas incorporados.
11. TinyMCE WYSIWYG y Simplepie actualizados.
12. Las barras laterales ahora pueden tener descripciones para que sea más fácil identificarlas.
13. Posibilidad de especificar plantillas de categoría no solo por ID, como antes, sino por URL, lo que facilitará a los desarrolladores de temas realizar personalizaciones con las categorías.
14. Los registros y perfiles son extensibles, para que recojas más información (cuentas de Twitter, etc).
15. La API XML-RPC se ha mejorado para poder cambiar la opción de registro de usuario.
16. Creación de galerías a medida, con nuevos atributos con los que incluir o excluir adjuntos de cualquier otra entrada, no solo de la actual.
17. Cuando estás editando archivos con el editor de plugins o temas este recuerda la posición y te lleva al sitio donde estabas cuando guardaste.
18. El bookmarlet Publica esto se ha mejorado y es ahora mucho más rápido, para que puedas publicar allá donde te encuentres navegando en la red.
19. Las taxonomías personalizadas se incluyen en el fichero de exportación WXR y también se importan correctamente.
20. Mejores filtros y hooks para los extractos, emoticonos, peticiones HTTP, perfiles de usuario, enlaces a autor, taxonomías, soporte SSL,  nubes de etiqueras, query_posts y WP_Query

Pues ¡hala, a actualizar!

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía para Administrar Wordpress

Para insertar un contenido incrustado de, por ejemplo, Flickr (que ya soporta oEmbed) solo tienes que poner la URL y WordPress te mostrará el contenido en vez de la dirección web.

Por ejemplo, si pones esto:

http://www.flickr.com/photos/nonopp/4043256796/

Te muestra directamente esto otro (la imagen en sí y redimensionada):

También, si lo prefieres, puedes usar el método de ‘shorcodes‘. Para ello solo tienes que encerrar la URL en los siguientes códigos:

[embed]http://www.flickr.com/photos/nonopp/4043256796/[/embed]

Además, en las opciones de Medios del Tablero tienes algunas configuraciones disponibles para los objetos incrustados.

Puedes ver la prueba en WordPress 2.x Beta Testing, o hacer una prueba tu mismo.

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía Domina tu Blog

Haz clic en la siguiente imagen para ver el set completo.

Solo tienes que descargarlo e instalarlo y desde ese momento, en el cargador de objetos verás una nueva opción de “Buscar”, y dependiendo si lanzaste el cargador de imágenes o vídeo, te busca también en Flickr o YouTube, ¡Genial!. Puedes previsualizar los archivos pero es especialmente llamativa la búsqueda de vídeos, pudiendo ver el vídeo antes de insertarlo.

Aquí tienes un par de ejemplos, usando Media Finder … 

Gracias a emip3 por avisarnos de esta maravilla

El Flickr Widget se puede descargar desde su blog, y tiene algunas opciones de configuración que permiten personalizarlo a nuestro gusto.