El procesamiento de imágenes de caminar causa más problemas de lo que se resuelve

Actualización 2017-03-07: Ahora ofrecemos una mejor solución para el procesamiento de las imágenes. Las imágenes son el pan y la mantequilla de la red. Sin imágenes y otros entornos, la Web sería bastante diferente y no enriquecedora; Soy como una alfombra que realmente conecta la habitación. Sin embargo, hay una tendencia preocupante en la comunidad de WordPress para usar bibliotecas de caminar (OTF). Los problemas de compatibilidad evitables ocurren cuando los temas y los complementos renuncian a la funcionalidad de la imagen de WordPress construida en favor de las bibliotecas de procesamiento OTF.
En este artículo, superaré las implicaciones del procesamiento de OTF en WordPress, los beneficios de cumplir con los estándares de imagen y cómo entenderme con imágenes (y más tarde con otros desarrolladores) en un entorno de WordPress. ¿Cuál es el procesamiento de la imagen en vuelo antes de profundizar demasiado? Debo explicar brevemente cuál es el procesamiento de la imagen OTF, cómo descubrirla y dónde generalmente puede encontrarla en proyectos de WordPress. El procesamiento de imágenes OTF, también conocidas como Walking on the GO, permite a los desarrolladores remodelar, cortar y filtrar las imágenes utilizando los parámetros de URL (vieja escuela) o clases de manipulación (enfoque más común). El uso del procesamiento OTF permite al desarrollador definir dimensiones únicas y personalizadas y manipular las imágenes como lo necesitan.
Muchos desarrolladores usan el procesamiento OTF debido a la facilidad de uso e implementación. A menudo, es simple que agregar un complemento de WordPress, o simplemente un archivo incluya, para comenzar a usar el procesamiento OTF en cualquier CMS basado en PHP. Además, los desarrolladores front-end pueden usar muchas bibliotecas OTF debido a su sintaxis simple y concisa. Debido a esta flexibilidad, los desarrolladores pueden mantener sus proyectos orientados de un proyecto a otro y pueden tener más superposición entre el diseño (front-end) y el desarrollo (Backynd). ¿Suena bien? No en la práctica. Dos áreas comunes donde puede encontrar el procesamiento OTF en WordPress se encuentran en complementos/temas y soluciones personalizadas. Es común que los desarrolladores de temas y arados confíen en una clase de manejo como Aqua, VT, TimThumb o Smart Image Reize (si no está seguro de si un complemento o un tema utiliza el procesamiento de la OTF, busque el código fuente del código fuente. llamado Aqua_Resizer, VT, Timthumb, Smart_Resize_image, etc.). También descubrí que las soluciones de corte personalizadas son comunes en las agencias de diseño/publicidad que trabajan duro en el cliente. Los desarrolladores generalmente están presionados por el tiempo y están buscando atajos para encontrarlos, sé que he sido culpable de esto antes. Tal vez esa sea solo tu opinión, hombre hasta ahora, imagino que muchos de ustedes probablemente preguntan … “¿Qué es un gran problema? Puedo hacer que mis imágenes salgan según lo previsto usando el procesamiento OTF, no tengo que usar dimensiones de imágenes pesadas. WordPress y es muy rápido. ¿Por qué me importaría? ¡Quizás las imágenes estandarizadas de WordPress sean solo su opinión, hombre!
La respuesta es tan simple de llevarse bien con los demás. Si todos los complementos y temas siguen las mismas reglas/modelos, los problemas de compatibilidad son mínimos. Sin embargo, si un complemento se desvía, puede causar muchos problemas cuando interactúa con otros complementos/temas y el núcleo de WordPress. Un ejemplo que viene a la mente es cuando la descarga de WP S3 se asocia con bibliotecas de procesamiento OTF ordinarias (que se encuentran en complementos o temas). WP Descargue S3 le permite colocar toda la biblioteca de medios (y todas las imágenes aplicables) en S3 y transmitirla a través de un CDN. Para garantizar resultados predecibles, confiamos mucho en convenciones estandarizadas de WordPress para manejar imágenes y biblioteca de medios. Queremos códigos estandarizados como este, porque adaptar soluciones personalizadas es una batalla perdida. Con la descarga de WP S3, las imágenes de corte OTF a menudo no se cargan, porque no tenemos forma de determinar los detalles de las imágenes, porque no hay registro de imágenes en el base de datos. (En forma de datos post o postmeta). Si una biblioteca de procesamiento OTF guarda esta información en la base de datos, generalmente se guarda como una postmeta, pero utiliza los personalizados en lugar de los metadatos estándar de archivo adjunto. El resultado final de este escenario “sin metadatos” puede ser imágenes o imágenes faltantes que no se pueden descargar en S3 y pueden conducir a imágenes de no carga para usuarios finales.

Algunas otras implicaciones importantes del procesamiento de OTF …
Rendimiento: cada vez que se corta una imagen, se carga la biblioteca de procesamiento OTF. En una página con imágenes de 100 años, esto puede causar algunos aumentos serios en los recursos del servidor. Ahora imagine a 1000 usuarios que visitan esa página simultáneamente. Las próximas imágenes de Friend-WordPress están mejorando con cada lanzamiento posterior. Por ejemplo, en V4.7, las mejoras en PDF llegan a la biblioteca de medios, incluidas mejores vistas previas; ¡Qué fuerte es esto! Sin mencionar muchas otras características agregadas en esta versión única. Las bibliotecas de procesamiento de imágenes OTF no tienen casi los mismos recursos para los desarrolladores disponibles.
Seguridad: muchas de estas bibliotecas se ven afectadas por problemas de seguridad. Los exploits de inclusión de archivos son un lugar regular para muchas bibliotecas de procesamiento OTF y es un juego infantil. Timthumb, por ejemplo, a menudo se ha visto afectado a lo largo de los años por hazañas de seguridad que han llevado a millones de sitios.
Imágenes receptivas: las bibliotecas OTF pierden rápidamente su atractivo para el atractivo cuando se trabaja con imágenes receptivas debido a la longitud del código necesario para cada situación donde las bibliotecas OTF producen una dimensión diferente. La funcionalidad básica de WordPress (en el cuadro) incluye un soporte robusto para imágenes receptivas.
Aprendamos del pasado y construamos con la funcionalidad básica. Afortunadamente, las imágenes hechas correctamente, hay mejores formas de administrar imágenes en WordPress para asegurarse de que todos los complementos puedan entenderse juntos. Si está utilizando las bibliotecas de procesamiento OTF hoy y se preocupe por restaurar las pesadillas en este momento, trate de no preocuparse, ya que WordPress facilita la gestión correcta de las imágenes. Agregar dimensiones de imagen que comienzan con V2.9, WordPress tiene soporte para imágenes personalizadas. Con el tiempo, la característica del tamaño de la imagen ha madurado y debe aceptar la mayoría (si no todas) las necesidades de tamaño de imagen personalizada en un contexto temático. Es muy simple implementar una nueva dimensión de imagen en un complemento de funcionalidad o incluso en el archivo functions.php add_image_size y la acción después_setup_theme. Veamos un ejemplo corto … if (! Function_exist (‘bigleBowski_theme_image_sizes)) {function bigLebowsi_theme_image_sizes () {add_image_size (‘ alimentando-cropped-thumb ‘, 300, 150, true); // recortado, 300 x 150 add_image_size (‘Feed-Header’, 600); // 600 x Unlimited} add_action (‘after_setup_theme’, ‘bigleBowski_theme_image_sizes’); } Con esta función simple, verifiqué si hay códigos de conflicto, grabamos dos nuevas dimensiones de imagen y conectamos a la acción después de_setup_theme. Debido a que las dimensiones de las imágenes se registran en WordPress, ahora podemos usar filtros y acciones como Intermediate_Image_Sizes.
Cuando es tan simple usar la funcionalidad de WordPress construida, ¿por qué no usarla?Advertencias y herramientas a menudo, al usar el tamaño de la imagen, encontrará situaciones en las que necesita volver a montar/regenerar imágenes, ya que ha grabado una nueva dimensión de imagen o ha cambiado una existente.Aquí puedes jugar algunas herramientas a mano.Las miniaturas Regenerer es un complemento simple y fácil que le permite regenerar sus imágenes con todas las dimensiones de las imágenes activas.Esta herramienta es útil para las bibliotecas de medios, pero puede llevar el tiempo suficiente para completarse en bibliotecas más grandes.WP CLI es una interfaz de línea de comandos de WordPress actualmente mantenida por Daniel Bachhuber;
Un tipo afilado que querrás seguir. Puede realizar la regeneración de los medios a través de la línea de comando utilizando los medios WP regenerados y se regeneran a todos los tamaños de imagen aplicables. Esta herramienta es útil para bibliotecas de medios más grandes y en entornos donde tiene acceso a la línea de comandos. Vale la pena señalar que no tiene que crear una multitud de imágenes específicas, porque CSS ha madurado mucho desde principios de la década de 2000 y se enfrenta a los estándares del navegador (gracias, Sr. Zeldman). A menudo, puede usar imágenes más grandes y puede cambiarlas fácilmente en el DOM con CSS tradicional. En el futuro, el apoyo a las funciones CSS3, como el parpadeo y el recessi de clip-seis, se están volviendo cada vez más aceptados por los navegadores y podrían ser adecuados para sus necesidades, dependiendo de su levantamiento público, diría que en el 99% del tiempo , add_image_size puede satisfacer las necesidades de la mayoría de los desarrolladores. Para aquellos que necesitan herramientas de manejo de imágenes fuertes, como Imagick o GD, continuaría utilizando las funcionalidades básicas en los medios y la biblioteca de medios.
Sin embargo, si tiene que pisar el país de las bibliotecas de imágenes PHP, opte por la clase WP_IMAGE_EDITOR. Comenzando con V3.5, esta clase ha abstraído gran parte de la funcionalidad en GD y Imagick y es una herramienta para levantar el servidor más pesado cuando se manejan imágenes (como marcas de agua o filtros de color). Veamos un fragmento corto que usa la seguridad WP_IMAGE_EADER (para reflejar/girar una imagen) con un archivo adjunto de WordPress existente ya cargado y tiene una ID de archivo adjunto de 42. // Incluye si es necesario. “WP-Includes/Class-WP-Image edor.php”; // imagen base/adjunto $ adjunto_id = ’42’; $ image_patch = get_attached_file ($ adjunto_id); // Cargue el editor $ modified_image = wp_get_image_editor ($ image_patch); // Verifique cualquier error al cargar wp_image_editor if (! is_wp_error ($ modified_image)) {// voltea la imagen, aumente la calidad $ modified_image-> flip (false, true); $ modified_image-> set_quality (100); // Guardar archivo de imagen, actualizar metatata $ saved_image = $ modified_image-> save (); $ meta_data = wp_generate_attachment_metata ($ aptinment_id, $ saved_image [‘ruta’]); wp_update_attachment_metadata ($ adjunto_id, $ meta_data); } Cargamos nuestra imagen y la pasamos en nuestra clase WP_IMAGE_EDITOR para la manipulación. Luego guardé el archivo de imagen y actualicé los metadatos asociados. Este último paso, actualizar los metadatos, es bastante importante si cambia el tamaño de la imagen, el tamaño del archivo de imagen, etc.

Al actualizar los metadatos de un archivo adjunto, guarde información importante en la base de datos, permitiendo que otros (y usted) accedan y trabajen más. con el archivo adjunto. Esto incluye la eliminación correcta de las imágenes. Con los metadatos relevantes de una imagen, le permitirá asegurarse de que todas las imágenes redimensionadas se eliminen cuando se elimina una imagen de la biblioteca de medios y no se deja el tamaño de la imagen huérfana. Si carga una imagen completamente nueva (a través de WordPress o una fuente externa, como una API), puede continuar utilizando la clase WP_Image_Editor para una manipulación de imágenes más difícil. Deberá asegurarse de que se sujetó en el medio_handle_upload para la carga inicial, ya que se ocupa de una gran parte del proceso de carga (guardando el archivo, la extracción de metadatos, etc.) a una sola función. En el raro caso en el que necesita aún más poder, hay esperanza; ¡Puede expandir la clase WP_Image_Editor! Esto no es para los corazones débiles y puede deshacerse rápidamente de los rieles de los estándares. Pero, si extiende la clase básica de manera responsable y siempre usa la biblioteca de medios, debería poder agregar más opciones y métodos a WP_IMAGE_Editor. Para ver ejemplos a este respecto, eche un vistazo a las clases WP_IMAGE_EDORGICK y WP_IMAGE_EDITOR_GD. Extienden la clase de editor básico para operar especialmente para las dos bibliotecas de imágenes PHP y son muy bien comentados. Al comienzo del desarrollo, si aborda sus necesidades.