La acción de generar los diferentes tamaños se realiza en el momento de subir la imagen original, por lo que si tenemos varias imágenes ya subidas y modificamos estos tamaños en los ajustes, las que ya se habían subido y generado no cambiarán su tamaño, se mantendrán como estaban antes del cambio.

Por tanto, es necesario hacer un barrido por todas las imágenes subidas anteriormente para que WordPress regenere sus versiones de acuerdo a los nuevos tamaños especificados ahora en los ajustes multimedia. Por supuesto, existe un plugin que lo hace, :)

Regenerate Thumbnails es un plugin que realiza exactamente esa acción: busca todas las imágenes subidas desde el panel de administración y regenera sus tamaños de acuerdo a los especificados en los ajustes, manteniendo siempre la imagen original con su tamaño inicial.

El plugin está disponible en el repositorio oficial de WordPress, por lo que puede instalarse desde la sección Plugins del panel de administración. Una vez instalado, veremos una nueva opción en la sección Herramientas -> Regenerate Thumbnails, que es donde podremos iniciar el proceso.

Enlace:

• WordPress Plugins: Regenerate Thumbnails

Pinche aquí para ver el vídeo

Como se ve en el video, la idea es muy similar a la de Prezi: el usuario dispone de un lienzo infinito sobre el que define los espacios que formarán cada slide, su contenido y los efectos tanto en los diferentes elementos como en las transiciones.

Impress.js utiliza las últimas tecnologías soportadas por los navegadores, de modo que las presentaciones requieren ser visualizadas en las últimas versiones de los navegadores modernos, como Google Chrome, Firefox, Opera o Safari. En caso de usar un navegador más antiguo, Impress.js le mostrará la presentación de forma funcional y bien ordenada, pero sin los efectos ni animaciones.

El sistema también crea modificaciones en las URL’s, de modo que cada diapositiva tiene una única dirección y así puedes enlazar a un paso concreto de tu presentación.

Viendo el código del ejemplo que puedes descargar desde GitHub, la verdad es que es muy limpio y está muy bien pensado para tener un canvas infinito y disponer sobre él los elementos y las transiciones entre las diapositivas. Es una forma diferente de pensar en las presentaciones y probablemente al principio costará hacerse con el sistema, pero nada que no se cure con unos pocos ensayos.

Como dice su autor, el único límite es la imaginación, :)

Yo no lo he usado todavía para ninguna presentación pero tengo bastantes tentaciones. En cuanto lo haga, publico mi experiencia.

Enlaces:

• Impress.js: página oficial y demostración en directo
• GitHub: proyecto Impress.js

Si accedes al panel de administración de tu WordPress verás el aviso de la nueva versión y el enlace para realizar la actualización automática. También está ya disponible para descargar desde la página oficial.

Enlace:

• WordPress News: WordPress 3.3.1 Security and Maintenance release

Además de esta funcionalidad responsive, me gusta mucho este plugin porque pesa solamente 1kb y porque no necesita añadir estilos CSS especiales para el pase de imágenes, él solito se encarga de todo. Lógicamente, se pueden añadir estilos para modificar el diseño del mismo, pero no los requiere para funcionar y visualizar el slideshow correctamente.

La idea del proyecto es conseguir hacer un plugin ligero, simple y muy específico. Las opciones que puedes configurar son pocas pero cubren las necesidades más habituales:

• Tiempo que debe permanecer cada imagen antes de pasar a la siguiente.
• Tiempo que debe durar el efecto de la transición fade.
• Elección entre reproducción automática o paginación, que se genera automáticamente.
• Anchura máxima del pase de imágenes.

Creo que sería genial que en siguientes versiones se añadiera algún efecto más para las transiciones (no solamente fade) y soporte para títulos/subtítulos en cada imagen.

Cómo usar el plugin

Lo primero, descargar el paquete ZIP desde la página del proyecto en GitHub. Verás que dentro del paquete hay un sencillo ejemplo que puedes utilizar para probarlo y para ver el código necesario.

El marcado del HTML para hacerlo funcionar es lo más simple posible: un elemento contenedor sobre el que se aplica el plugin y automáticamente todas las imágenes que haya dentro formarán cada una un slide del pase de imágenes:

<div id="slides">
  <img src="1.jpg" alt="" />
  <img src="2.jpg" alt="" />
  <img src="3.jpg" alt="" />
</div>

//Código HTML/Javascript para activar el plugin sobre el contenedor #slides
<script type="text/javascript">
  $(function () {
    $("#slides").responsiveSlides();
  });
</script>

Su autor asegura que funciona en todos los navegadores modernos y también en muchos de los anticuados, como Firefox 2 o Internet Explorer 6 y 7. Yo lo he en varios sin ningún problema.

Enlace:

• ResponsiveSlides

En esta entrada vamos a echar un vistazo a cinco ejemplos básicos pero muy útiles para trabajar con las imágenes adjuntas a un post, con varias formas para conocer la flexibilidad de WordPress para cubrir esta necesidad.

La idea principal para realizar consultas de los archivos adjuntos a un post es que todos los adjuntos tienen guardado como post_parent el ID del post en cuestión. Este identificador, si estamos dentro del bucle de WordPress lo tendremos preparado en la variable $post->ID.

Consultar y mostrar todas las imágenes adjuntas a un post

Sabiendo que los adjuntos son hijos del post, podemos usar este código para generar un bucle en el que se consulten todos los archivos adjuntos a un post que sean imágenes. Utilizamos la función get_posts() para realizar la consulta con esas opciones y después, para cada uno de los resultados, obtenemos los datos de la imagen mediante la función wp_get_attachment_image_src(), que nos da la URL del propio archivo de imagen, su altura y su anchura. Así podemos crear nuestra propia etiqueta HTML para mostrar la imagen como queramos.

Esta función permite también especificar el tamaño de la imagen de la que queremos obtener la información. Puede ser “full”, “large”, “medium” o “thumbnail” y son los tamaños que pueden modificarse desde el propio panel de administración en la sección de Ajustes -> Multimedia.

<?php
$args = array(
	'post_type' => 'attachment',
	'numberposts' => null,
	'post_parent' => $post->ID,
	'post_mime_type' => 'image',
);
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		//Tamaños: "thumbnail", "medium", "large", "full"
		$image_atts = wp_get_attachment_image_src( $attachment->ID, 'medium' ); ?>
		<img src="<?php echo $image_atts[0]; ?>" alt="" width="<?php echo $image_atts[1]; ?>" height="<?php echo $image_atts[2]; ?>" />
	<?php
	}
}
?>

Consultar y mostrar sólo la última imagen adjuntada

En el segundo ejemplo cambiamos de función para generar la consulta y usaremos get_children(), que directamente consulta los hijos de un determinado post. Además, la vamos a mostrar en tamaño mediano e incluímos un enlace a la imagen en tamaño completo capturando la URL del archivo mediante la función wp_get_attachment_url().

<?php
$args = array(
	'post_type' => 'attachment',
	'numberposts' => 1,
	'order' => 'ASC',
	'post_parent' => $post->ID,
	'post_mime_type' => 'image'
);
$attachments = get_children($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		//Tamaños: "thumbnail", "medium", "large", "full"
		$image_atts = wp_get_attachment_image_src( $attachment->ID, 'large' );
		$attachment_full_url = wp_get_attachment_url($attachment->ID); ?>
		<a href="<?php echo $attachment_full_url; ?>">
		<img src="<?php echo $image_atts[0]; ?>" alt="" width="<?php echo $image_atts[1]; ?>" height="<?php echo $image_atts[2]; ?>" />
		</a>
	<?php
	}
}
?>

Mostrar sólo las imágenes subidas en un formato determinado

A la función get_posts() también se le puede pasar como argumento una lista de MIME types concretos para que sólo obtenga las imágenes de un tipo determinado.

El bloque de código es muy parecido, pero en esta ocasión añadimos una nueva opción a la variable $args. En el ejemplo, consultamos todos los archivos adjuntos que sean imágenes de tipo JPG o PNG y las mostramos en tamaño miniatura. Para obtener la URL de la miniatura, en vez de usar la función anterior utilizaremos wp_get_attachment_thumb_url(), que nos devuelve directamente la dirección del thumbnail.

$args = array(
	'post_type' => 'attachment',
	'numberposts' => null,
	'post_parent' => $post->ID,
	'post_mime_type' => array('image/jpeg', 'image/png')
);
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		<img src="<?php wp_get_attachment_thumb_url($attachment->ID); ?>" alt="" />
	<?php
	}
}
?>

Mostrar sólo la imagen establecida como destacada

Para mostrar sólo la imagen destacada de la entrada o página podríamos hacer un bucle, como en el ejemplo anterior. Pero también podemos utilizar la función get_post_thumbnail_id(), que nos devuelve el ID de la imagen destacada, por lo que ya no necesitamos crear un bucle y podemos usar la función wp_get_attachment_image_src() para consultar y traer el adjunto que especifiquemos mediante su identificador.

Primero averiguamos el ID de la imagen adjunta, después obtenemos la URL de dicha imagen en el tamaño que queramos, su altura y su anchura. Y construímos la etiqueta HTML para mostrar la imagen.

<?php
$featured_id = get_post_thumbnail_id($post->ID);
$featured_size = 'large';
$featured_image = wp_get_attachment_image_src( $featured_id, $featured_size);
if($featured_image){ ?>
	<img src="<?php echo $featured_image[0]; ?>" alt="" width="<?php echo $featured_image[1]; ?>" height="<?php echo $featured_image[2]; ?>" />
<?php } ?>

Mostrar todas las imágenes excepto la establecida como destacada

En muchas ocasiones queremos mostrar una galería con todas las imágenes que se han adjuntado a una entrada o página, pero la imagen destacada la tenemos reservada para mostrarla en otros espacios y no queremos que aparezca en esta galería.

En ese caso, podemos añadir a la variable $args la opción exclude para excluir de la consulta los adjuntos que tengan ese ID. Sólo necesitamos conocer el ID de la imagen que está establecida como destacada, pero como acabamos de ver en el ejemplo anterior esta información nos la dice la función get_post_thumbnail_id(), a la que solamente tenemos que especificarle el ID del post y nos devuelve el ID de su imagen destacada.

<?php
$args = array(
	'post_type' => 'attachment',
	'numberposts' => null,
	'post_parent' => $post->ID,
	'post_mime_type' => 'image',
	'exclude' => get_post_thumbnail_id($post->ID)
);
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		//Tamaños: "thumbnail", "medium", "large", "full"
		$image_atts = wp_get_attachment_image_src( $attachment->ID, 'medium' ); ?>
		<img src="<?php echo $image_atts[0]; ?>" alt="" width="<?php echo $image_atts[1]; ?>" height="<?php echo $image_atts[2]; ?>" />
	<?php
	}
}
?>

Como ves, WordPress nos permite trabajar con las imágenes adjuntas de una forma muy flexible. A partir de aquí, ya sólo queda la imaginación de cada uno, :)

Más información:

• WordPress Codex: get_posts(), get_children(), wp_get_attachment_image_src()

Este desfile de ejemplos de interfaces de usuario está organizado por temática para poder navegar por las diferentes ideas fácilmente:

• Botones
• Formularios
• Kits completos de UI
• Iconos
• Sistemas de paginación
• Tooltips
• …

Por supuesto, también dispone de un canal de Twitter y un feed RSS que puedes añadir a tu lector para estar siempre atento a las nuevas publicaciones.

Si te animas, puedes usar la sección de contacto para enviar tus propias ideas y que el equipo de UI Parade las valore para incluirlas en la web, :)

Enlace:

• UI Parade

El equipo de Mozilla ha estado muy atareado con el desarrollo y las mejoras de su producto estrella, incluso han publicado una infografía en la que se detalla la evolución de Firefox en los últimos 12 meses:

• Se publicó Firefox 4 con la herramienta de sincronización de datos del usuario.
• Se publicó la versión de Firefox para dispositivos Android.
• Se han mejorado enormemente las capacidades del usuario para decidir su privacidad en la navegación.
• Se ha mejorado la velocidad (x7) y reducido a la mitad el consumo de memoria.
• Se ha presentado y respetado el nuevo ciclo de actualizaciones de la aplicación.
• …

Infografía completa:

Enlace:

• Firefox: 2011 | The Mozilla Blog

Si eres diseñador, maquetador o programador web, esta herramienta es fundamental cuando se necesita jugar con tipografías no estándar de la web. El único requisito es disponer de los tipos de letra que se van a usar con su correspondiente licencia de uso. A partir de ahí, el procedimiento es muy sencillo:

• Accedes a la página web de la herramienta y subes todos los archivos de tipos de letra, en el formato que los tengas. Te permite subir varios a la vez.
• Eliges si quieres realizar una configuración básica, óptima o de experto. La diferencia es la optimización de las conversiones para mejorar la velocidad de la carga y la cantidad de opciones que te permite modificar y definir para generar el paquete.
• Descargas el paquete.

¿Cuál es el resultado?

El paquete que te descargas de la herramienta es un ZIP que, al descomprimirlo, contiene una carpeta en la que se encuentran nuestros tipos de letra en el formato original y además convertidos al resto de formatos para garantizar la compatibilidad con todos los navegadores web y sistemas: EOT, SVG, WOFF y TTF.

No se queda ahí, sino que también te descargas un fichero HTML de demostración para cada uno de los tipos de letra que has subido y un fichero CSS con el código @font-face para poder copiarlo y pegarlo en tu web. Por ejemplo:

@font-face {
    font-family: 'BelleroseLight';
    src: url('bellerose-webfont.eot');
    src: url('bellerose-webfont.eot?#iefix') format('embedded-opentype'),
         url('bellerose-webfont.woff') format('woff'),
         url('bellerose-webfont.ttf') format('truetype'),
         url('bellerose-webfont.svg#BelleroseLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Una maravilla.

Enlace:

• Font Squirrel: @Font-Face Generator

A continuación el video oficial con el repaso a las novedades más importantes de la nueva versión:

Aunque próximamente veremos las novedades más en profundidad en Mundo Idibay, los cambios más interesantes desde el punto de vista del usuario son:

• El nuevo cargador de archivos, que permite arrastrar y soltar archivos desde el escritorio del ordenador.
• Rediseño de la barra superior de herramientas, haciéndola mucho más útil que antes.
• Nuevo sistema de menús flotantes, mejorando la velocidad y comodidad al navegar por el panel de administración.
• Las mejoras de diseño del panel de administración, haciéndolo más adaptable a dispositivos móviles y tablets.
• ….

Aunque el sistema de actualizaciones automáticas de WordPress está muy maduro, se recomienda hacer una copia de seguridad antes de hacer cualquier actualización de versión.

Enlace:

• WordPress 3.3 “Sonny”
• Descarga WordPress 3.3

En esa página podemos tener un texto de agradecimiento por haber realizado un comentario en la web. O quizá un formulario para registrarse en la web y no tener que volver a rellenar los campos para comentar. O cualquier otra cosa, :)

En el formulario del comentario, que se encuentra en el fichero comments.php del tema activo, vamos a añadir un nuevo campo oculto en el que el atributo value es la URL a la que se redirigirá al usuario después de enviar el formulario:

<input name="redirect_to" type="hidden" value="<?php echo get_permalink(34); ?>" />

Con este cambio, todos los usuarios serán redirigidos a esa página después de publicar un nuevo comentario. En el caso de querer llevarlos a una página de registro, sería necesario comprobar primero si el usuario ya está registrado y ha iniciado sesión.

El código sería el siguiente:

<?php if(!is_user_logged_in()){ ?>
	// Usuario no logueado, redireccionar a página de registro
	<input name="redirect_to" type="hidden" value="<?php echo get_permalink(34); ?>" />
<?php } ?>

De esta forma, los usuarios que han iniciado sesión no serán redirigidos al publicar un comentario, pero a los anónimos se les llevará a la página 34 con el formulario de registro.