Imágenes personalizadas: Optimizando en tamaños

Clase 13 de 46 • Curso Profesional de WordPress 2015

Contenido del curso

Introducción a WordPress

Imágenes en contenido, footers y headers en WordPress

Navegación, Sidebars y Migración de Wordpress

Despliegue, Seguridad y Jetpack en WordPress

Optimización de WordPress

Diseñando para WordPress, WordPress API

Tomar examen

Comentarios

Edgardo Raúl Galletto

student•

Estos son los códigos que suelo hacer. Obviamente que siempre le cambio los números por ser tamaños diferenciados. Como ven, estás están listas para que puedan ser para retina display. El tamaño figura al doble del tamaño que figura en el nombre, como para que sirva de referencia. También va al último una función que reduce la calidad al 50% del .jpg. Y por último te toca a ti en el css, reducirlas a la mitad del tamaño en el cual figurarán.

// Tamaños de imágnes Con recorte  
add_image_size('custom-thumb-1024-500', 2048, 1000, true);  
add_image_size('custom-thumb-350-200', 700, 400, true);  
add_image_size('custom-thumb-70-70', 140, 140, true);  
  
// Tamaños de imágenes Sin recorte  
add_image_size('custom-thumb-1024-x', 2048, false);  
add_image_size('custom-thumb-800-x', 1600, false);  
add_image_size('custom-thumb-300-x', 600, false);  
  
// Habilitar la compresión de imágenes al 50% de su calidad  
add_filter('jpeg_quality', create_function('','return 50;'));

Daniel Castillo

student•

gracias por el aporte!

Gassan Quintar

student•

Para el caso del crop de las imagenes, con el parametro en TRUE hace el recorte de la imagen por defecto al centro de la imagen.

add_image_size( 'custom-size', 220, 180, true );

Pero se puede forzar a que recorte hacia la parte superior izquierda

add_image_size( 'custom-size', 220, 180, array( 'left', 'top' ) );

Gassan Quintar

student•

Aquí otras resoluciones para the_post_thumbnail()

// Thumbnail (default 150px x 150px max)  
the_post_thumbnail( 'thumbnail' );  
// Medium resolution (default 300px x 300px  max)          
the_post_thumbnail( 'medium' );  
// Large resolution (default 640px x 640px max)           
the_post_thumbnail( 'large' );         
// Full resolution (original size uploaded)      
the_post_thumbnail( 'full' );              
// Other resolutions    
the_post_thumbnail( array(100, 100) );

Gabriel Martínez Portilla

student•

Buen día! Estoy usando WP 4.7.2 y he notado que no hace las imágenes en los tres tamaños, aunque la función:

the_post_thumbnail('thumbnail')

medium y _large _ si se comportan como lo esperado, físicamente en el directorio solo guarda una imagen a qué se puede deber ?

// Tamaños de imágnes Con recorte  
add_image_size('custom-thumb-1024-500', 2048, 1000, true);  
add_image_size('custom-thumb-350-200', 700, 400, true);  
add_image_size('custom-thumb-70-70', 140, 140, true);  
  
// Tamaños de imágenes Sin recorte  
add_image_size('custom-thumb-1024-x', 2048, false);  
add_image_size('custom-thumb-800-x', 1600, false);  
add_image_size('custom-thumb-300-x', 600, false);  
  
// Habilitar la compresión de imágenes al 50% de su calidad  
add_filter('jpeg_quality', create_function('','return 50;'));

// Thumbnail (default 150px x 150px max)  
the_post_thumbnail( 'thumbnail' );  
// Medium resolution (default 300px x 300px  max)          
the_post_thumbnail( 'medium' );  
// Large resolution (default 640px x 640px max)           
the_post_thumbnail( 'large' );         
// Full resolution (original size uploaded)      
the_post_thumbnail( 'full' );              
// Other resolutions    
the_post_thumbnail( array(100, 100) );

Imágenes personalizadas: Optimizando en tamaños

Introducción a WordPress

¿Qué es WordPress?

Importancia de WordPress como CMS

Páginas creadas con Wordpress

Instalación de WordPress

Funcionalidad básica de WordPress

Creación e Info de un Theme

Función Bloginfo

The Loop: Cómo mostrar tus posts en WordPress

Preguntas y respuestas

5 razones de peso para elegir WordPress como tu CMS

Cómo crear un ambiente de desarrollo para WordPress en 3 segundos

Imágenes en contenido, footers y headers en WordPress

Post Thumbnails y Functions.php