Cómo funcionan las imágenes destacadas en wordpress

WordPress viene con 3 tamaños predefinidos a la hora de guardar las imágenes, ese tamaño por defecto es configurable desde Ajustes > Medios. Son del más pequeño a más grande (thumbnail, medium y large).

imagenes-por-defecto-en-wordpress

A veces, según cómo maquetamos un theme en wordpress, necesitaremos añadir algunos tamaños. Para ello buscamos functions.php y añadimos la siguiente función según si queremos un tamaño fijo de alto y ancho o un tamaño variable en altura pero fijo en el ancho:

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'nombre1', 175, 9999 ); // fijamos el ancho - 175px - pero dejamos abierto el alto
add_image_size( 'nombre2', 220, 275, true); // le damos un tamaño fijo de 220x275px
}

Luego para llamar a cualquiera de los tamaños en el php (normalmente single.php) utilizamos la función the_post_thumbnail tal que así según queramos sacar una imagen u otra:

<?php the_post_thumbnail('thumbnail'); ?> // La imagen pequeña que fijamos en el panel
<?php the_post_thumbnail('medium'); ?> // La imagen mediana que fijamos en el panel
<?php the_post_thumbnail('large'); ?> // La imagen pequeña que fijamos en el panel
<?php the_post_thumbnail('nombre1'); ?> // La imagen que hemos definido en functions.php

Evidentemente esto funcionará para las nuevas imágenes que se suban desde el momento del cambio, si necesitáis que la modificación funcione para las imágenes ya subidas en wordpress habrá que regenerar los thumbnails con algún plugin como este:

Regenerador de imágenes

Tenéis más info sobre las variables que afectan a the_post_thumbnail en el codex de wordpress:

The_post_thumbnail en Codex

¿A qué resolución de pantalla diseño una web?

Cuando nos planteamos el diseño de una web normalmente el primer paso que tenemos que decidir es la elección de si la página será fluida o fija, y, aún así, en ambos casos muchas veces debemos marcar un tamaño máximo de lienzo como mínimo durante la fase de boceto… Hasta hace unos años, aunque dependía del sector en el que la web fuera a competir, las visitas previas o el manejo del cliente de su propia web, la elección era común: cogíamos como estándar el lienzo de 960px, divisible por los suficientes números como para plantear diseños distintos.

Sin embargo a día de hoy, si cogemos nuestras estadísticas y miramos las resoluciones de las visitas entrantes podemos deducir que cada vez más el planteamiento de hacer el tamaño mínimo a 960px se nos queda corto… Esta mañana me ha dado por comparar las 3 webs con más visitas a las que tengo acceso, de sectores distintos y no competidoras entre ellas.

Calculadora en mano, un 73% de las visitas totales (de una muestra de más de 25.000 visitas) tenían una resolución de más de 1280px de ancho, lo que significa que podríamos ampliar ese lienzo mínimo hasta otra cantidad igual de divisible que 960px sin riesgo a que aparezca scroll horizontal, como por ejemplo, 1200px.

1200-grid-system

Esta nueva resolución nos da la misma divisibilidad y, sobre todo, más espacio para mejorar la disposición de contenidos, aumentar el tamaño de la tipo o hacer contenedores más grandes sin necesidad de hacerlos fluidos. Para las resoluciones restantes siempre podremos adaptar el diseño a medidas relativas pero lo que presentemos al cliente se ajustará a la realidad de la mayoría de visitantes.

Para los que trabajéis con photoshop o illustrator os dejo ambos grids como plantillas ya preparados para trabajar:

960.GS 1200PX