Consejo rápido uso del pulgar BFI para imágenes destacadas de tamaño personalizado

Como desarrolladores de temas de WordPress, podríamos crear un tema (o temas) que requiera que las imágenes tengan un determinado tamaño específico (dimensiones). Al mismo tiempo, no podemos asignar la responsabilidad de crear tales imágenes de dimensiones específicas a los usuarios finales de nuestros temas..

¿Entonces, cuál es la solución? La mejor manera de lidiar con este problema es incorporar dentro de nuestros temas la funcionalidad para generar imágenes de tamaño personalizado sobre la marcha.

En este tutorial, te mostraré cómo usar la biblioteca BFI Thumb PHP para lograr eso.

Imágenes destacadas

¿Qué son las imágenes destacadas?

Según el códice de WordPress:

Una imagen destacada es una imagen que se elige como imagen representativa para publicaciones, páginas o tipos de publicaciones personalizadas. La visualización de esta imagen es hasta el tema. Esto es especialmente útil para los temas "estilo revista" donde cada publicación tiene una imagen..

Las imágenes destacadas se llamaban miniaturas antes de cambiar el nombre. Así que encontrarás estos dos términos siendo usados ​​indistintamente.

Habilitación del soporte para imágenes destacadas

Los temas deben declarar su compatibilidad con las miniaturas de las publicaciones antes de que la interfaz para asignar estas imágenes aparezca en las pantallas Agregar publicación / Editar publicación.

Para habilitar el soporte de miniaturas de publicaciones en su tema, agregue la siguiente línea a su funciones.php expediente:

 

Visualización de miniaturas de mensajes en su tema

Para mostrar miniaturas de publicaciones en su tema, pegue el siguiente código en un lugar apropiado en su archivo de plantilla específica:

 

El código anterior verifica si la publicación tiene una miniatura antes de llamar a la función para mostrarla.

La función add_image_size ()

los add_image_size () La función le permite registrar nuevos tamaños de imagen para las miniaturas de publicaciones..

De forma predeterminada, WordPress crea los siguientes tamaños de imagen cuando un usuario agrega una imagen a la Biblioteca de medios:

  • miniatura - (150px x 150px max)  
  • medio - (300px x 300px)
  • grande - (640px x 640px)
  • completo - tamaño original subido 

Registro de nuevo tamaño de imagen

Para registrar nuevos tamaños de imagen, utilizamos el add_image_size () funciona así:


 

Parámetros:

  • $ nombre - (cuerda) (necesario) El nuevo nombre del tamaño de la imagen. Defecto: Ninguna
  • $ ancho - (int) (opcional) El ancho de la miniatura de la publicación en píxeles. Predeterminado: 0 
  • $ altura - (int) (opcional) La altura de la miniatura de la publicación en píxeles. Predeterminado: 0 
  • $ cosecha - (boolean / array) (opcional)

Ejemplo de uso

 

Para mostrar los tamaños de imagen recién registrados en su tema, simplemente pase el nombre de su tamaño de imagen personalizado posterior a la the_post_thumbnail () función, como esta:


 

Introduciendo BFI Thumb

BFI Thumb es una clase o biblioteca de PHP que actúa como redimensionador de imágenes sobre la marcha / cropper / grayscaler / colorizer / opacitor para WordPress desarrollado por Benjamin Intal

Instalación e Integración

1. Descargue BFI thumb de GitHub y guárdelo en el directorio raíz de su tema.

2. Incluya en su tema agregando la siguiente línea a su funciones.php expediente:

 

3. Use la siguiente función donde quiera que desee mostrar su imagen de tamaño personalizado:

 400, 'altura' => 300); bfi_thumb ("URL-to-image.jpg", $ params); ?> 

Si nos fijamos en la función anterior ( bfi_thumb () ), notará que toma la URL de la imagen para cambiar su tamaño como primer parámetro, seguido de los otros parámetros (dimensiones de la imagen). Por lo tanto, debe preguntarse cómo determinamos la URL de nuestra publicación en miniatura.?

Para determinar la URL de una miniatura de publicación, usamos una función llamada wp_get_attachment_image_src () que toma el ID del archivo adjunto, el tamaño y un icono opcional como parámetros.

Así pasamos get_post_thumbnail_id () Funciona como el primer parámetro. Toma el ID del mensaje como parámetro y devuelve el CARNÉ DE IDENTIDAD De la imagen destacada adjunta al post..

El segundo parámetro es tamaño que puede ser una palabra clave de cadena (miniatura, mediana, grande o completa), cualquier tamaño de imagen personalizado que haya agregado usando la add_image_size () Función o una matriz de dos elementos que representa el ancho y la altura en píxeles. Pero para garantizar que nuestra imagen de tamaño personalizado tenga la más alta calidad, utilizaremos el tamaño original. - completo.

 A estas alturas nuestro código debería verse así:

 400, 'altura' => 300); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); bfi_thumb ($ imgsrc [0], $ params);? 

wp_get_attachment_image_src () devuelve una matriz ordenada con valores correspondientes a la (0) url, (1) ancho, (2) altura y (3) escala de un archivo adjunto de imagen (o un icono que representa cualquier archivo adjunto).

Pero solo nos interesa el primer parámetro devuelto - el URL. Lo pasamos a la bfi_thumb () función, junto con nuestros otros parámetros (ancho y alto) para obtener nuestra imagen de tamaño personalizado.

Envolviéndolo en una función

Debido a que es probable que utilicemos este código una y otra vez en nuestro tema, o temas, vamos a envolverlo en una función..


 $ image_width, 'altura' => $ image_height); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); $ custom_img_src = bfi_thumb ($ imgsrc [0], $ params); return $ custom_img_src;??

Guarda este archivo en tu funciones.php expediente.

Uso

Para imágenes:

O para imágenes de fondo:

...

Ventajas de imágenes de tamaño personalizado sobre miniaturas

Las imágenes de tamaño personalizado creadas sobre la marcha usando una biblioteca como BFI Thumb tienen las siguientes ventajas sobre las miniaturas personalizadas creadas / agregadas usando add_image_size () función:

  •  the_post_thumbail () funciones hace eco de una etiqueta de imagen. A veces lo que quieres es la url de la imagen. Un ejemplo sería donde quieres usar la imagen como fondo..
  • Tamaños de imagen personalizados registrados usando add_image_size () no se aplicará a las imágenes más antiguas que se cargaron antes de registrar el tamaño de la imagen
  • BFI Thumb tiene la capacidad de cambiar el tamaño de las imágenes hacia arriba y hacia abajo
  • BFI Thumb también tiene funciones adicionales como: escala de grises, color (colorear), opacidad, negar

Conclusión

En este consejo rápido, observamos las imágenes destacadas: qué son y cómo podemos usarlas en nuestros temas. También miramos el add_image_size () función para ver cómo podemos usarla para agregar tamaños de imagen personalizados cuando una imagen se carga en la Biblioteca de medios.

Presentamos la biblioteca PHP Bumb THumb e ilustramos cómo podemos usarla para crear una imagen de tamaño personalizado desde una miniatura de publicación o imagen destacada.

Luego miramos las limitaciones de uso add_image_size () para crear tamaños de imagen personalizados y las ventajas que BFI Thumb tiene sobre ella.

Agrega esta función a tu funciones.php Archivo y úselo siempre que necesite crear una imagen de tamaño personalizado desde una miniatura.