El mes pasado se detectó una gran vulnerabilidad en un famoso script de cambio de tamaño de imagen conocido como TimThumb. Desde entonces, la comunidad ha colaborado y solucionado los problemas. Si bien TimThumb es una opción viable, creemos que los desarrolladores de temas de WordPress deberían centrarse en utilizar las funciones principales en lugar de depender de scripts de terceros. En este artículo, le mostraremos cómo agregar tamaños de imagen adicionales en WordPress.

WordPress tiene una función incorporada Publicar miniaturas, también conocidas como Imágenes destacadas. También hay una función incorporada add_image_size () que le permite especificar tamaños de imagen y le da la opción de recortar. El uso de estas funciones básicas en su tema esencialmente puede eliminar la necesidad de un script de terceros como TimThumb en la mayoría de los casos.

Registro de tamaños de imagen adicionales para su tema

Deberá comenzar agregando el soporte de miniaturas de publicaciones colocando el siguiente código en el archivo functions.php de su tema:

add_theme_support( 'post-thumbnails' );

Una vez que habilite la compatibilidad con miniaturas de publicaciones, ahora puede usar la funcionalidad de registrar tamaños de imagen adicionales con la función add_image_size (). El uso de la función add_image_size es así: add_image_size (‘nombre del tamaño’, ancho, alto, modo de recorte);

El código de ejemplo puede verse así:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Ahora, si se da cuenta, hemos especificado tres tipos diferentes de tamaños de imagen. Cada uno tiene diferentes modos, como cultivo duro, cultivo suave y altura ilimitada. Entonces, cubramos cada ejemplo y cómo puede usarlos para sus beneficios.

Modo de cultivo duro – Como puede observar, se agrega un valor «verdadero» después de la altura. Ese verdadero valor es decirle a WordPress que recorte la imagen al tamaño que hemos definido (en este caso 120 x 120px). Este es el método que usamos mucho en nuestros diseños de temas para asegurarnos de que todo sea proporcionado y nuestro diseño no se rompa. Esta función recortará automáticamente la imagen ya sea desde los lados o desde la parte superior e inferior según el tamaño. La desventaja del recorte duro es que no puede controlar qué parte de la imagen se muestra.

Corrección de Mike Little: cuando haya subido una imagen y antes de insertarla en la publicación, puede hacer clic en ‘editar imagen’ y desde allí cambiar la miniatura o la imagen completa, escalar, rotar o voltear la imagen, y para la miniatura seleccione la parte exacta de la imagen que desee.

Modo de recorte suave – De forma predeterminada, el modo de recorte suave está activado, por eso no ve ningún valor adicional agregado después de la altura. Este método cambia el tamaño de la imagen proporcionalmente sin distorsionarla. Por lo tanto, es posible que no obtenga las dimensiones que deseaba. Por lo general, coincide con la dimensión de ancho y las alturas son diferentes según la proporción de cada imagen. Una pantalla de ejemplo se vería así:

Modo de altura ilimitado – Hay ocasiones en las que tiene imágenes muy largas que desea usar en su diseño, pero desea asegurarse de que el ancho sea limitado. El uso principal que encontramos para este tipo de tamaño de imagen es en publicaciones infográficas. Las infografías tienden a ser muy largas y llenas de información. Recortar esa imagen en una sola página de publicación no es una gran idea. Pero, por naturaleza, las infografías son más amplias que el ancho del contenido. Entonces, lo que puede hacer es especificar un ancho que no rompa su diseño mientras deja que la altura sea ilimitada, por lo que toda la infografía se puede mostrar sin ninguna distorsión. Una pantalla de ejemplo se vería así:

Ejemplo de modo de altura ilimitada

Visualización de tamaños de imagen adicionales en su tema de WordPress

Ahora que ha agregado la funcionalidad para los tamaños de imagen deseados, echemos un vistazo a mostrarlos en su tema de WordPress. Abra el archivo de tema donde desea mostrar la imagen y pegue el siguiente código:

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

Nota: Este bit de código debe pegarse dentro del bucle de publicación.

Eso es todo lo que realmente tiene que hacer para mostrar los tamaños de imagen adicionales en su tema de WordPress. Probablemente deba envolverlo con el estilo que se adapte a sus necesidades.

Regeneración de tamaños de imagen adicionales

Si no está haciendo esto en un sitio nuevo, probablemente tendrá que volver a generar miniaturas. La forma en que funciona la función add_image_size () es que solo genera los tamaños desde el punto en que se agregó al tema. Por lo tanto, las imágenes de publicaciones que se agregaron antes de la inclusión de esta función no tendrán el nuevo tamaño. Entonces, lo que tenemos que hacer es regenerar el nuevo tamaño de imagen para las imágenes de publicaciones más antiguas. Esto se hace fácil por el plugin llamada Regenerar miniaturas. Una vez que instale y active este plugin, se agrega una nueva opción en el menú: Herramientas »Regeneración. Miniaturas

Regenerar la pantalla del complemento de miniaturas

Haga clic en el icono Regenerar miniatura y deje que plugin hacer su trabajo.

Otro plugin que puede hacer este trabajo es Tamaños de imagen simples.

Habilitación de tamaños de imagen adicionales para el contenido de su publicación

Aunque ha habilitado tamaños de imagen en su tema, el uso está limitado solo a su tema, lo que no tiene ningún sentido. Todos los tamaños de imagen se generan independientemente, así que ¿por qué no ponerla a disposición del autor de la publicación para que la use dentro del contenido de la publicación? Puede hacer esto usando un plugin llamada Tamaños de imagen simples.

Una vez que instale y active este plugin Se agregarán nuevas opciones en la página Configuración »Medios. Verá una lista de tamaños que definió en su tema. Todo lo que tienes que hacer es marcar la casilla que dice «Mostrar en la inserción de la publicación».

Inserción posterior para tamaños de imagen adicionales

Una vez que marques esta casilla, tu autor podrá utilizar tamaños adicionales en el contenido de la publicación.

Tamaños de imagen adicionales para publicaciones

Observe que en la imagen de arriba, tenemos todos los tamaños de imagen que definimos en nuestro tema disponibles para que nuestros autores los usen en el contenido de la publicación si así lo desean.

Tamaños de imagen simples plugin también le permite crear tamaños de imagen personalizados directamente desde el panel de WordPress.

Creemos que este método debe agregarse según las mejores prácticas para todos los desarrolladores de temas de WordPress. ¿Cuáles son tus pensamientos?

.

Fuente: wpbeginner

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *