¿Cambiar el tamaño de las imágenes al tamaño real utilizado en el editor?


20

¿Hay alguna manera de cambiar el tamaño de las imágenes al tamaño real que se mostrarán en la publicación? Tengo usuarios que importan una imagen grande y luego la cambian de tamaño en el editor visual. Esto es fácil, ya que pueden arrastrar la imagen hasta que tenga el tamaño que desean, sin abrir primero un editor de imágenes, cambiar el tamaño de la imagen, guardarla y cargarla como un archivo adjunto separado. Por supuesto, esto a veces da como resultado una imagen que tiene 100px de ancho en la publicación, pero 1500px en realidad.

¿Hay un complemento que hace esto cuando se guarda una nueva publicación? Me gustaría mantener la imagen de tamaño completo existente (para vincular o redimensionar más tarde), pero solo agregue un tamaño adicional (y guárdelo en el _wp_attachment_metadataobjeto), para que esta publicación tenga la imagen en el tamaño correcto y una referencia a El archivo adjunto de tamaño completo.

Por supuesto, todas las publicaciones existentes también deben manejarse una vez. <img>etiquetas no pueden tener sólo una width, sólo una height, o ninguno de ellos, esto debe ser limpiado todo, por lo que todos ellos tienen la correcta width, heighty una imagen de ese tamaño.


¿Está de acuerdo con una solución del lado del servidor que redimensione las imágenes sobre la marcha en función de obtener los parámetros pasados ​​a una URL de imagen existente? Apache / Mod_Rewrite?
Hakre

@hakre: ¿Te refieres a un filtro post-guardado que pasa por la publicación y reescribe cada imagen como image.png?w=300&h=400, o image-300x400.png, que luego recogería a través de Mod_Rewrite y redimensionaría (y caché) a pedido? ¿Es eso una ventaja sobre crear las imágenes redimensionadas una vez (en esa acción posterior al guardado) y servirlas como archivos estáticos?
Jan Fabry

@ Jan Fabry Sí, eso era lo que tenía en mente. La ventaja es que solo crea la imagen a pedido, por lo que siempre que el autor edite la publicación, esto no crearía archivos per-se. Además de no bloquear la edición, está más desconectada de wp, por lo que incluso puede crear algún servicio de servidor, extravagancia de almacenamiento en caché de CDN o lo que sea. :) --- wp.com hace algo similar si lo veo bien.
Hakre

Combinado con el almacenamiento en caché, este enfoque realmente brilla. Supongo que hay un complemento para esto. También puede ejecutar una instalación de Zenphoto junto con un complemento como Zenphoto Gallery (el mío: lmazy.verrech.net/zenphoto-gallery )
Rafael

@Raphael: De hecho, hoy investigué los posibles complementos, y algunos toman este enfoque. Si tiene algo que agregar a mi lista , hágalo, es editable por todos.
Jan Fabry

Respuestas:


11

Creé dos complementos que juntos deberían resolver mis necesidades. Actualmente se encuentran en una etapa alfa temprana, y todos los comentarios son bienvenidos.

El complemento base es un redimensionador bajo demanda . Este complemento supervisa las solicitudes de archivos no existentes en el directorio de carga y crea imágenes del tamaño solicitado si es necesario. Por ejemplo, image-200x100.jpgcreará y devolverá image.jpg, pero cambiará su tamaño a 200 por 100 píxeles. La imagen se guarda con ese nombre en el directorio, por lo que el servidor maneja las solicitudes directamente.

El segundo complemento, Redimensionar etiquetas img , modifica las <img>etiquetas para que sus srcatributos incluyan datos de ancho y / o alto. Esto permite que el primer complemento sirva las imágenes correctas. Juntos hacen lo que quiero, y solo necesito crear una función de ejecución única para convertir todas las publicaciones existentes, pero eso debería ser fácil (no quiero conectarme a the_contentalgo que debería ejecutarse solo una vez).

Un tercer complemento "extra", Imágenes intermedias virtuales , intercepta la creación de las imágenes intermedias al cargar una nueva imagen en WordPress. Dado que aún se crean con el primer complemento si se solicita, esto le permite especificar múltiples tamaños de imagen sin ocupar espacio en disco a menos que se utilicen realmente. Esto no es necesario para que los dos primeros funcionen, pero fue una adición fácil y resalta el hecho de que todavía necesito trabajar alrededor del editor de imágenes de WordPress, pero lo haré cuando cree mi editor de miniaturas , que también usa el primer complemento.


1
¡Esto suena realmente excelente! No puedo esperar a tener tiempo para probarlos cuando los necesito para escenarios del mundo real.
MikeSchinkel

Buena cosa. ¿Está considerando agregarlos al repositorio de plugins de worpdress?
Hakre

@hakre: Sí, de hecho. Una vez que los preparé para la revisión por pares :-)
Jan Fabry

4

He buscado en el directorio de complementos "resize"o "crop"(este último para otra pregunta ), y noté mis hallazgos en una hoja de cálculo pública de Google . La búsqueda de complementos es muy confusa en sus números de resultados (la última página de la "resize"búsqueda muestra "Mostrando 145-150 de 273 complementos"), por lo que es posible que me haya perdido algunos. Notas semi relacionadas: todo el mundo parece pensar que el mundo necesita otro complemento de presentación de diapositivas. Pocos parecen darse cuenta de que content_save_prepuede ser un mejor filtro para analizar mucho the_content.

Todavía no probé ninguno de estos complementos, pero aquí hay una lista de complementos que parece hacer lo que quiero. Agregué el número de versión "Compatible hasta" entre paréntesis.

Pensamientos personales: los primeros cuatro reescriben la URL en una página dinámica (algo así como /wp-content/plugins/my-plugin/image.php?src=[original src]&w=100&h=50), con diferentes formas de almacenamiento en caché. Prefiero una imagen real que se crea según sea necesario, similar al enfoque que toma ImageScaler. Sin embargo, dividiría esto (e incluiría la sugerencia de hakre en los comentarios) y primero volvería a escribir todas las URL de /wp-content/uploads/2010/11/image.jpga /wp-content/uploads/2010/11/image-100x50.jpg, y luego dejaría que un script creara las imágenes faltantes. La primera solicitud de esta imagen crea la imagen, todas las solicitudes posteriores utilizan esta imagen creada. Esto también me permite dividir la funcionalidad en diferentes complementos. Publicaré esta solución en una respuesta separada.

Estos complementos limitan las imágenes a un cierto tamaño máximo (¿en qué se diferencia esto de especificar $content_width?):

El siguiente complemento es interesante por otros motivos:

Esta es una publicación de Wiki de la comunidad, por lo que se puede actualizar si encuentra nuevos complementos.


0

¿Qué pasa con la utilización de la variable Timthumb y Pass para cambiar automáticamente el tamaño / dimensiones de la imagen y los niveles de zoom? De esta manera, los tamaños de imagen originales aún se pueden mantener. Si necesita algunos ejemplos en esta línea, hágamelo saber.


0

Wordpress ofrece tres tamaños predeterminados (pequeño, mediano, grande) que se pueden configurar. Si usa estos, Wordpress crea copias redimensionadas. Probablemente sea un buen estilo usarlos y establecer el número para que se ajusten al estilo actual. Esto da como resultado imágenes que no tienen diferentes tamaños en toda la página y permiten ajustes globales cuando cambia el tema.


Sé que es mejor atenerse a los tamaños de imagen predefinidos, pero mis clientes no :-) Si pueden cambiar el tamaño de la imagen en el editor, es lógico que el sistema siga esa elección.
Jan Fabry

Bueno, podrías eliminar esta posibilidad y obligarlos a trabajar limpiamente;)
Rafael

Esa también es una pregunta interesante: "¿Cómo desactivo la funcionalidad de cambio de tamaño en TinyMCE?" Si conoce la respuesta a eso, cree una nueva pregunta y responda usted mismo, probablemente será útil para otros.
Jan Fabry

0

El complemento Image Pro recientemente lanzado parece hacer exactamente esto. Todavía no me había probado, la demostración se ve muy impresionante, tenga en cuenta la mala compatibilidad del navegador (solo Firefox en este momento).

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.