Tamaños de imagen explicados

Cuando cargue una imagen en su sitio web de WordPress, se crearán sus copias: imágenes con tamaños adicionales. ¿Por qué los necesitamos? Porque no usamos la misma imagen de tamaño en todas partes del sitio:

• en publicaciones,
• en cartera,
• en ventanas emergentes,
• como miniaturas de publicaciones en páginas de archivo,
• en widgets,
• en área de administración, etc;

Por lo tanto, por ejemplo, WordPress le permite usar imágenes de tamaño completo en páginas de publicaciones y imágenes de 150×150 (por ejemplo) en páginas de archivo.

Pero espere wait-tenga en cuenta que cuantos más tamaños de imagen registrada tenga, más archivos estarán en su sitio web y se necesitará más tiempo para procesar las imágenes durante la carga.

Tamaños de imagen predeterminados de WordPress

WordPress admite varios tamaños de imagen de forma predeterminada. Puede encontrarlos y cambiarlos en el área de administración en «Configuración > Medios».

Por lo que, por ejemplo, puede cambiar el tamaño de miniatura de WordPress en esta página.

Qué pasa si no los usas y no quieres que WordPress genere una copia para cada uno de estos tamaños. Puede insertar el siguiente gancho en su tema functions.php.

Pero siempre tenga en cuenta que si su tema de WordPress recibe actualizaciones, es mejor usar un tema infantil o un complemento personalizado.

add_filter('intermediate_image_sizes', 'misha_turn_off_default_sizes'); function misha_turn_off_default_sizes( $default_image_sizes) { unset( $default_image_sizes); // turn off thumbnail sizeunset( $default_image_sizes); // turn off medium sizeunset( $default_image_sizes); // turn off large size return $default_image_sizes; }

medium_large

El tamaño de imagen medium_large apareció en WordPress 4.4 junto con la función de imágenes receptivas. Tiene un ancho fijo 768 y una altura proporcional.

Puede desactivar medium_large tamaño tan simple como con este código:

add_filter('intermediate_image_sizes', 'misha_deactivate_medium_large'); function misha_deactivate_medium_large( $default_image_sizes ){ $default_image_sizes;return $default_image_sizes; }

¿Cómo Obtener Todos los Tamaños de Imagen?

A veces tienes que averiguar cuál es la lista de tamaños de imagen disponibles en el sitio web. Desafortunadamente, no hay una forma común de hacerlo para tamaños de imágenes predeterminados y personalizados, por lo que:

• Si necesita la lista de tamaños de imagen predeterminados, puede usar get_intermediate_image_sizes(), que devuelve una matriz con tamaños de imagen predeterminados, ejemplo:

  print_r( get_intermediate_image_sizes() );/* Array ( => thumbnail => medium => medium_large => large ) */

• Si tiene que enumerar tamaños de imagen registrados, los obtiene de $_wp_additional_image_sizes variable global, y puedo ayudarlo más, también puede obtener dimensiones de imagen desde allí, por ejemplo:

  global $_wp_additional_image_sizes;print_r( $_wp_additional_image_sizes );/*Array( => Array ( => 400 => 400 => 1 ) => Array ( => 2000 => 1200 => 1 ))*/

Funciones

Es bastante fácil usar tamaños de imagen WP en el área de administración, todo lo que tiene que hacer es seleccionar el tamaño de imagen que necesita del menú desplegable. Mejor echemos un vistazo a las funciones entonces.

the_post_thumbnail ()

Top 1 en mi lista, porque lo uso más a menudo que cualquier otra cosa.

the_post_thumbnail( $size = 'thumbnail', $attr = '' );

Tenga en cuenta que esta función imprime una etiqueta <img>, no una URL.

size tamaño Esto es lo que puede usar como valor de parámetro:

• identificador de tamaño de imagen (nombre) – medium, custom etc, de forma predeterminada thumbnail,

  // prints the featured image, size large of a current post in the loopthe_post_thumbnail( 'large' );

• tamaño personalizado array( width, height ), ejemplo:

  the_post_thumbnail( array( 100, 100 ) );

  Si lo usa, se mostrará el tamaño de imagen más apropiado.

• puede pasar el valor full a este parámetro y se mostrará una imagen original.

att attr Puede pasar cualquier atributo HTML aquí como una matriz, ¡incluso puede reescribir el atributosrc! 😁

the_post_thumbnail( 'medium', array( 'class' => 'my-image', 'data-id' => 1000 ) );

get_the_post_thumbnail()

Esta función es muy similar a the_post_thumbnail (), la diferencia es que:

• El primer get_the_post_thumbnail() es un ID de publicación, todo lo demás es el mismo,
• Devuelve una imagen, no la imprime.

Ejemplo:

echo get_the_post_thumbnail( get_the_ID(), 'medium' );

wp_get_attachment_image_src()

La función permite obtener la URL de una imagen.

wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail' );

Tenga en cuenta que un ID de archivo adjunto no es un ID de publicación. Pero puede obtenerlo fácilmente, por ejemplo, si necesita un ID de imagen destacado, puede usar la función get_post_thumbnail_id().

Ejemplo:

$image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );echo $image_array;

Sobre el parámetro $size y una matriz de tamaños se lee un poco más arriba.

Cómo Agregar sus Tamaños de imagen personalizados

Este proceso es muy simple y consta de dos pasos. Se requiere el primer paso.

add_image_size()

Para registrar un tamaño de imagen en WordPress, puede usar esta función en su tema actual functions.php o en un tema secundario functions.php o en un complemento personalizado.

add_image_size( $size_name, $width = 0, $height = 0, $crop = false );

$No se pueden usar nombres de tamaño de imagen reservados, aquí están:thumb,thumbnail,post-thumbnail,medium,medium_large,large

,full. Width ancho Ancho en píxeles, establecer 0-ancho ilimitado. height altura Altura en píxeles, establecer 0-altura ilimitada, ejemplo:

add_image_size( 'fixedwidth500', 500, 0 ); // or just skip the third parameter

$recortar anteriormente este parámetro podía aceptar solo podía aceptarfalseotrue, pero ahora está mucho más extendido, por lo que aquí están los valores posibles:

Vamos a hacer un vistazo al ejemplo:

add_image_size( 'my-image-size-name', 200, 200, array( 'left', 'top' ) );

Para mantener las cosas simples, decidí utilizar un tamaño cuadrado en este ejemplo. Por lo tanto, es fácil decir que si la imagen original es horizontal, la parte izquierda de la imagen permanecerá, pero la parte derecha se recortará, y lo mismo puedo decir de las imágenes verticales: la parte inferior de la imagen se recortará.

También es posible realizar el recorte manual utilizando el complemento «Recorte Manual de imágenes».

Pero no cree muchos tamaños de imagen también:

• cuantos más tamaños de imagen cree, más archivos habrá en su carpeta de carga,
• y más tiempo necesitará para cargar una imagen en su sitio.

Cómo Agregar su Tamaño de imagen personalizado a Media Uploader y Gutenberg

Cuando inserta imágenes en widgets y publicaciones, WordPress (3.5+) le permite elegir qué tamaño de imagen usar:

Como puede ver, es posible agregarle un tamaño personalizado allí:

add_filter('image_size_names_choose', 'misha_new_image_sizes'); function misha_new_image_sizes($sizes) {$addsizes = array("my-image-size-name" => 'Misha size' // "image size name" => "Label (anything)");$newsizes = array_merge( $sizes, $addsizes );return $newsizes;}

Lo bueno es que este gancho también funciona para el bloque de imágenes de Gutenberg.

Cómo Regenerar imágenes después de cambiar sus Tamaños o Cambiar un Tema

Tal vez conozca la situación cuando después de cambiar los parámetros add_image_size() o después de cambiar el tema de su sitio web, WordPress no genera tamaños de imagen automáticamente y las imágenes con resoluciones antiguas aún se muestran en el sitio.

¿Qué debe hacer en esta situación? Si solo hay 2-3 imágenes en su carpeta de carga, simplemente puede volver a cargarlas. Pero, ¿qué hacer si hay 2-3 miles de imágenes?

Hay dos formas de resolver esta situación: con complementos y con código:

Regenerar miniaturas con complementos

Ok, puedo recomendarte dos complementos simples:

• Reconstrucción de miniaturas Ajax
• Forzar regeneración de miniaturas

Cada una de ellas tiene sus propias ventajas y desventajas, por lo que tal vez para diferentes situaciones pueda elegir qué complemento se adapta más a usted.

Regenerar miniaturas mediante programación

Aquí solo quiero mostrarte el código que permite regenerar imágenes, cómo lo usarás, es tu elección.

$attachment_id = 5; // pass your attachment ID here $path = get_attached_file( $attachment_id );$meta = wp_generate_attachment_metadata( $attachment_id, $path );wp_update_attachment_metadata( $attachment_id, $meta );

Cómo Crear ciertas miniaturas de Tamaño de imagen para Tipos de Correos Personalizados Solo

Por lo tanto, imaginemos que su sitio web tiene 10 tipos de correos personalizados registrados, y cada uno de ellos usa 2-3 tamaños de imagen en las páginas del sitio web. Es fácil entender que cuando subimos cualquier imagen en el sitio web, WordPress crea 20-30 copias de ella.

No hay forma de usar add_image_size () para un tipo de publicación personalizado, pero aquí hay un pequeño fragmento de código que resuelve este problema. Este código le indica a WordPress cuándo tiene que crear una copia de la imagen con cierta resolución y cuándo no.

Los ganchos intermediate_image_sizes y intermediate_image_sizes_advanced están bien para esta tarea. Un ejemplo súper simple a continuación, después de insertar el código en las miniaturas de archivo functions.php my-image-size-name no se crearán para las imágenes, cargadas desde el tipo de publicación personalizado page.

add_filter( 'intermediate_image_sizes_advanced', function( $sizes ){ if( isset( $_REQUEST ) && 'page' == get_post_type($_REQUEST ) ) {unset( $sizes );} return $sizes; } );

Un poco más complicado, pero también es correcto:

/* * this hook will be fired while you uploading a picture */add_filter( 'intermediate_image_sizes', 'misha_reduce_image_sizes' ); function misha_reduce_image_sizes( $sizes ){/* * $sizes - all image sizes array Array ( => thumbnail => medium => large => post-thumbnail ) * get_post_type() to get post type */$type = get_post_type($_REQUEST); // $_REQUEST post id the image uploads to foreach( $sizes as $key => $value ){ /* * use switch if there are a lot of post types */if( $type == 'page' ) {if( $value == 'regionfeatured' ){ // turn off 'regionfeatured' for pages unset( $sizes ); }} else if ( $type == 'region' ) {if( !in_array( $value, array('regionfeatured','misha335') ) ){ // for regions turn off everyting except 'regionfeatured' and 'misha335' unset( $sizes ); }} else {if( $value != 'thumbnail' ){ // turn off everything except thumbnail unset( $sizes ); }}}return $sizes;}

Misha Rudrastyh

me encanta WordPress, WooCommerce y Gutenberg tanto. 12 años de experiencia.

¿Necesita ayuda para desarrolladores personalizados? Ponerse en contacto