Share
TimThumb ha sido un script de cambio de tamaño de imagen favorito desde hace mucho tiempo para los autores de temas de WordPress. Pero, con los nuevos requisitos de presentación de temas de WordPress en ThemeForest, debemos despedirnos de TimThumb.
Este artículo le enseñará cómo hacer una transición de sus temas fuera de TimThumb y hacia un nuevo script de cambio de tamaño de imagen llamado BFIThumb.
BFIThumb es un proyecto de código abierto y está disponible en GitHub.
Antes de que WordPress tuviera la capacidad de realizar un cambio de tamaño de imagen flexible, la única opción era usar bibliotecas de terceros como TimThumb. Lo bueno de TimThumb era que estaba repleto de características y era muy fácil de usar.
No necesitaba hacer mucho para que funcionara, solo tendría que usar el script TimThumb como su src atribuye en tu img Etiqueta y pásale la imagen:
Con solo ese simple cambio, podrías:
Estas funciones nos permitieron crear imágenes de aspecto impresionante que no se limitaron a miniaturas cuadradas pequeñas.
Una buena razón es la principal falla de seguridad en TimThumb que fue descubierta y expuesta en la versión 1.10. En pocas palabras, había un agujero de bucle que permitía la ejecución de código malicioso en los servidores que alojaban un script TimThumb.
Muchos sitios fueron pirateados debido a esto, incluidos algunos de los míos, y también algunos de los usuarios de mis temas. Aunque esto se solucionó en versiones posteriores de TimThumb, mucha gente ni siquiera estaba al tanto de la falla de seguridad hasta que fue demasiado tarde. Depende de los autores de los temas y de los propietarios del sitio actualizar sus temas o los scripts TimThumb para incluir la corrección.
En mi opinión, el problema con esta debacle no fue por el propio agujero de seguridad, sino más bien por la forma en que este tipo de problema no podía solucionarse fácilmente a escala global. Dado que TimThumb era un script de terceros, era difícil para las personas obtener la actualización de seguridad rápidamente, o incluso simplemente para recibir una notificación de que existía una falla de seguridad.
Sin embargo, si se encontrara una falla de seguridad de este nivel en el núcleo de WordPress, lo más probable es que se solucione de inmediato con una rápida actualización de seguridad de WordPress y la mayoría de la gente ni siquiera estaría al tanto del problema.
Dicho esto, podría ser mejor usar una función de WordPress para realizar el cambio de tamaño de nuestra imagen.
Por lo tanto, tenemos que eliminar a TimThumb de nuestros temas de WordPress. Como autores de temas en ThemeForest, quizás la razón más obvia es que TimThumb ya no está permitido con la implementación de los nuevos requisitos de envío de temas de WordPress de Envato.
Por suerte para nosotros, cuando se lanzó WordPress 3.5, introdujo la clase WP Image Editor. Esta clase tiene algunas funciones básicas para rotar, recortar y redimensionar imágenes. Ahora hemos incorporado el cambio de tamaño de imagen dentro de WordPress!
Probablemente una de las mejores características de la clase WP Image Editor es que soporta tanto las bibliotecas GD como ImageMagick (a diferencia de TimThumb que solo soporta GD). Esto significa que nuestros temas pueden soportar más instalaciones de WordPress..
Así es como usarías el WP_Image_Editor clase:
Accentsconagua
// Devuelve una implementación que extienda WP_Image_Editor $ image = wp_get_image_editor ('cool_image.jpg'); if (! is_wp_error ($ image)) $ image-> resize (400, 300, true); $ image-> save ('new_image.jpg'); El editor de imágenes de WP es simple, pero falta un poco para nuestras intenciones. Claramente, deberá crear su propia función de envoltura para no tener que usar un montón de código cada vez que desee mostrar una imagen redimensionada..
Otra cosa a tener en cuenta es que la wp_get_image_editor La función solo acepta una ruta de archivo de imagen, también deberá agregar a su función de envoltura un método para convertirla en la URL de su imagen..
Aparte de la necesidad de crear una función de envoltorio, hay algunos inconvenientes para reemplazar directamente TimThumb con el WP_Image_Editor clase:
Sería bueno si tuviéramos algo que incorporara características tanto de la clase WP Image Editor como de TimThumb. Esta es la razón por la que creé el script BFIThumb.
Me gustaría presentarles un nuevo tamaño de imagen llamado BFIThumb. BFIThumb se hizo con estos puntos en mente:
WP_Image_Editor realizar manipulación de imagen - El uso de esta clase de WordPress permite menos errores, ya que la mayor parte del proceso no se realiza por nuestro propio código. Esto significa que también podemos proporcionar cambio de tamaño para las bibliotecas GD e ImageMagick.src atributo de tu img etiquetas La ruta de la imagen redimensionada sería devuelta por la función. Esto permite un código más legible y un tiempo de transición más simple.WP_Image_Editor y agrega mas funcionalidad.BFIThumb fue hecho para ser similar al uso de TimThumb. La función principal a la que deberás llamar es bfi_thumb. Similar a TimThumb, usarás esta función en el src atributo de tu img etiquetas Esta función toma una URL de imagen junto con una serie de parámetros, luego devuelve la URL de la imagen procesada.
Aquí está el uso básico de la función, desglosado para explicar lo que sucede:
// Incluir la biblioteca require_once ('BFI_Thumb.php'); // Nuestros parámetros, hacer un cambio de tamaño $ params = array ('width' => 400, 'height' => 300); // Obtenga la URL de nuestra imagen procesada $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Imprime nuestra img tag echo "
"; Para realizar el cambio de tamaño y el recorte, solo tendrá que introducir los parámetros necesarios:
"; // Tamaño solo por ancho, la altura se ajustará a la proporción correcta $ params = array ('width' => 400); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Cambiar tamaño solo por altura, el ancho se ajustará a la proporción correcta $ params = array ('altura' => 300); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Cambiar el tamaño por ancho y alto y recortar $ params = array ('width' => 400, 'height' => 300, 'crop' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params); Los filtros de imagen son muy útiles y, si se usan correctamente, pueden habilitar efectos geniales en sus temas. Por ejemplo, el escala de grises El filtro de imagen se puede usar para crear imágenes en blanco y negro que se vuelven de color cuando se coloca el mouse sobre.
También tuve un uso para el opacidad filtro cuando necesito hacer la imagen de fondo opaca para mostrar un poco del color de fondo.
// Escala de grises $ params = array ('grayscale' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Colorize $ params = array ('color' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Negate $ params = array ('negate' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Cambia la opacidad (convierte tu imagen en PNG) $ params = array ('opacity' => 80); // 80% opaco $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Parámetros múltiples $ params = array ('width' => 400, 'height' => 300, 'grayscale' => true, 'colorize' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ params); En este artículo, aprendimos cómo eliminar nuestra dependencia de TimThumb y avanzar hacia un enfoque más orientado a WordPress para realizar el cambio de tamaño de la imagen utilizando BFIThumb. Con este enfoque, podemos realizar un cambio de tamaño de imagen flexible y también usar algunos de los filtros de imagen que amamos en TimThumb.
Esperemos que este pequeño script pueda ayudarte con tu transición fuera de TimThumb. Si tiene alguna sugerencia sobre nuevas funciones para mejorar el tamaño del script de esta imagen, por favor, deje un comentario a continuación..
Aprecio altamente cualquier comentario, comentarios y sugerencias.
¿Con qué estás reemplazando a TimThumb? ¿Estaría usando BFIThumb en su próximo tema de WordPress? Déjame saber lo que piensas!
