¿Recorte fácil de usar de miniaturas de publicaciones?

32

¿Hay alguna manera de permitir que mis usuarios definan el área de recorte de una miniatura de publicación? Las miniaturas siempre son archivos adjuntos de publicaciones existentes, prefiero no crear un archivo adjunto adicional por miniatura.

Las miniaturas de las publicaciones deben ser de 200x100 píxeles y deben provenir de una de las imágenes utilizadas en la publicación. Entonces, en mi mundo ideal, cuando hace clic en el enlace "Establecer imagen destacada", obtiene una visión general de las imágenes ya incluidas, y cuando hace clic en una de estas, puede definir el área de recorte usted mismo (moviéndola o redimensionándola, pero manteniendo la relación de aspecto 2x1). Cuando hace clic en "Aceptar", la nueva miniatura de la publicación se guarda con el archivo adjunto original (en el _wp_attachment_metadata['sizes']['post-thumbnail']campo de metadatos, por ejemplo), no como un archivo adjunto nuevo. No se debe permitir el uso de una imagen que ya se utiliza como una miniatura de publicación para otra publicación, o al menos dar una advertencia.

Creo que el editor de imágenes incluido no satisfará mis necesidades, ya que puede optar por editar todas las versiones de la imagen, o la miniatura normal, pero no solo la miniatura de la publicación. También me resulta un poco confuso saber qué versiones estoy editando, por lo que creo que mis usuarios tendrán aún más problemas.

¿Existe un complemento que haga lo que quiero o que pueda extender fácilmente a mis necesidades?

Actualización: ejemplo de interfaz de usuario

Realmente me gusta la interfaz del selector de imágenes de la libreta de direcciones de Mac OS X: selecciona una imagen y cambia el tamaño de un recorte de miniatura de relación fija a través de un control deslizante. También puede arrastrar la imagen base. Puede ampliar esta idea a varios tamaños de imagen (tengo una post-thumbnaily post-thumbnail-1/2esa es la mitad de ese tamaño, por ejemplo). Deje que el usuario seleccione los tamaños que está editando ahora con casillas de verificación y dibuje los rectángulos de recorte apropiados en la pantalla.

El cortador de imágenes de la libreta de direcciones en acción

plugin-recommendation images post-thumbnails Jan Fabry
fuente
1
@ Jan Fabry : mi primer proyecto de pago de WordPress fue un complemento para recortar imágenes, antes de que apareciera el recorte en WordPress. Fue significativamente diferente de lo que pides o lo incluiría como respuesta. Pero lo que quieres no debería ser demasiado difícil de escribir si estás motivado ...
MikeSchinkel
1
@ Mike: Lo vi una vez en su sitio web y esperaba que estuviera disponible en algún lugar. Incluso si no marca todos los elementos de mi (extensa) lista de deseos, podría ser un buen comienzo.
Jan Fabry
@ Mike - También estaría muy interesado en revisar cualquier código que pueda haber creado o modificado relacionado con el recorte de imágenes. He estado buscando desesperadamente agregar jcrop a un metabox personalizado que permitiría agregar y recortar imágenes sin dejar de utilizar la galería de medios incorporada de WordPress.
NetConstructor.com
Hola, @Jan Fabry y @ NetConstructor.com : acabo de revisar el código y, dado que fue mi primer complemento para WP, me da mucha vergüenza lanzarlo, es tan malo. Me encantaría trabajar en una solución más nueva para el lanzamiento aquí, pero eso podría ser un tiempo ...
MikeSchinkel
No seas tímido Mike, el código antiguo siempre es malo a los ojos del escritor. Eso es solo progreso :). @ Jan: en su ejemplo de interfaz de usuario, me parece que el tamaño de la miniatura de la publicación está predefinido de alguna manera. ¿Puedes decir más sobre eso?
Hakre

Respuestas:

11

El código sigue siendo un desastre, pero parece funcionar, incluso en IE 8. Planeo lanzarlo en el repositorio, pero mientras tanto puedes jugar con mi versión actual . Para acceder, haga clic en "Editar imagen" al agregar o editar una imagen, reemplaza el editor de imágenes habitual (son muy difíciles de combinar). Como la mayor parte del área de administración usa la miniatura regular y mi versión actual edita la miniatura de la publicación, puede parecer que el código no tiene ningún efecto, pero pruébelo mostrando una miniatura de la publicación y verá que cambia.

Este complemento requiere mi redimensionador de imágenes a pedido , que también sigue siendo un desastre, para realizar el cambio de tamaño real.

Imagen de ejemplo en la cosechadora

Jan Fabry
fuente
código listo para su lanzamiento todavía? tal vez github? Me muero por integrar funcionalidades como esta en mi caldera
Mild Fuzz
¡También estoy muy interesado en qué / cómo hiciste esto! Por favor comparta el código. ¿Funciona su código utilizando la biblioteca de medios predeterminada de wordpress y le permite crear un metabox simple en la pantalla de edición de publicaciones donde puede llamar una imagen específica Y copiarla solo para un tamaño específico que creó como "new_thumb" como se define a través de algo como add_image_size ('new_thumb', 200, 100, true) ;? La situación ideal sería tener algo como el creador de la imagen del encabezado con la capacidad de cambiar cada tamaño de imagen definido en función de metaboxes individuales para cada tamaño definido.
NetConstructor.com
@ JanFabry ¿Ya ha lanzado este código como un complemento? ¡Me encantaría recomendarlo a alguien que necesita esta funcionalidad!
Chip Bennett
@ jan-fabry ¿Cómo fue esta función? ¿Algún éxito?
Steven
4

Su mejor opción es usar un recorte de imagen basado en JavaScript y luego php combinado con ImageMagick o Image GD.

Tendría que estar escrito en sus funciones o como un complemento, ya que no conozco ninguno de los complementos estándar de WordPress, lo cual es sorprendente.

Hay un recorte de imagen YUI con la opción de guardar basada en php http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

Aquí hay un tutorial diferente sobre cómo usar un jquery cropper con php
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

Una tercera opción muy similar al enlace anterior que usa el mismo jquery cropper pero diferente código. http://www.leonkessler.com/blog/?p=132

Aquí hay otro usando jcrop's jcrop en su lugar, http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

Quién está listo para un nuevo complemento, esto seguramente sería popular :)

Wyck
fuente
Ya hay un código de recorte de imagen (HTML, JS y PHP) en el núcleo de WordPress. Creo que un buen complemento lo reutilizaría. No es obligatorio, solo decirlo. Tienes razón sobre el hecho de que la interfaz de usuario de ejemplo dibujada por Jan necesita algo así.
Hakre
@hakre, el último al que Wyck se conectó es jcrop, que se integró en el núcleo de wp en 2.8 . Recuerdo haber leído sobre eso en ese entonces, pero no puedo encontrar ninguna información sobre el hecho de que se esté utilizando más que un complemento en el repositorio que, según todas las cuentas, no funciona.
mate
@matt: si se integró en el núcleo (no sé todos los detalles sobre la interfaz de usuario de recorte en el núcleo ahora que está allí) Supongo que se usa para la función de interfaz de usuario de la imagen del núcleo. Esa característica no está disponible todo el tiempo, pero solo si ciertas bibliotecas de imágenes del sistema o PHP están disponibles. Perdón por ser tan inespecífico, pero es que hasta ahora no participé en la implementación principal. Pero sé que hay uno;)
hakre
1

Suponiendo que ya haya agregado soporte para las miniaturas posteriores, ya que está hablando de la opción "Imagen destacada".

Si es así, una opción es agregar un nuevo tamaño de imagen a la matriz de carga. Entonces, por defecto, tienes miniatura, mediano, grande. En el siguiente fragmento de código, esto agrega una cuarta imagen a ese surtido, según el tamaño que desee. Este bit de código se agregaría a su archivo functions.php.

add_image_size( 'new_thumb', 200, 100, true );

"new-thumb" = el nombre de la nueva imagen personalizada
"200" = ancho
"100" = altura
"verdadero" = opción de recorte duro. Esto obligará a recortar una imagen al ancho / alto definido. Sin, simplemente escala a la proporción.

Ahora, para mostrar la nueva miniatura en una página o matriz de publicaciones, debe insertar lo siguiente en su HTML

<?php the_post_thumbnail('new_thumb'); ?>

fuente
@cnix: Gracias por esta respuesta, pero no es lo que estoy buscando. Quiero una manera para que el usuario final defina el área que debe recortarse, no yo como diseñador del sitio. Entonces, el área puede variar de una imagen a otra.
Jan Fabry
1

Es posible que desee utilizar CSS para tener una gran flexibilidad, corregir las miniaturas en su tema (si lo desea) y evitar el desorden de archivos:

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Recuerde que se cargará toda la imagen, así que no use sus originales de 3 MB para esto.

Actualización según la solicitud de enero: si desea recorte dinámico, considere:

  • Para usuario = administrador, cree CSS a través de PHP; solo puede vincular al php que lee la configuración adecuada y ajustar los parámetros de recorte en consecuencia.
  • Para usuario = visitante, use JavaScript para cambiar los parámetros de recorte en el atributo de estilo de la imagen.
  • Como una solución menos invasiva, considere crear un código corto (a través del excelente complemento Shortcode Exec PHP) como [thumb w = ?? h = ??] url [/ thumb] que puede traducir a la etiqueta HTML apropiada con CSS en línea.
Rafael
fuente
De hecho, puede hacer el recorte a través de CSS para evitar tener varios tamaños, pero ¿cómo permitiría al usuario (autor de la publicación) definir el área de recorte que se debe mostrar?
Jan Fabry el
Por favor, vea las ediciones anteriores.
Raphael el
Gracias por tu aclaración. ¿Esto supone que el usuario conoce las ubicaciones de los píxeles del área de recorte deseada? De hecho, estoy buscando una forma más gráfica (como el editor de imágenes actual, pero destinado a publicar miniaturas y no miniaturas regulares).
Jan Fabry
Espero que tengas la intención de que esto sea un complemento, no un truco. Puede proporcionar algunas opciones predeterminadas que deberían ser suficientes en la mayoría de los casos: esquinas, centro, centrado en los bordes, etc. (todo se calcula fácilmente). Me abstendría de ofrecer información gratuita, ya que las personas pueden estropear el flujo del sitio si entran en juego. Supongo que ofrecer un definidor gráfico de clips (ver Zenphoto para la implementación) está bien, pero los principios de cómo usar los valores, sin embargo obtenidos, permanecen igual; solo tienes que construir la GUI. No puedo ayudarte con esto.
Raphael el
1

Hay un complemento antiguo llamado WP Post Thumbnail que a veces usamos. No es perfecto, y hay algunos errores menores con la última versión de WP (no se ha actualizado desde 2008, por lo que no es necesariamente confiable). http://wordpress.org/extend/plugins/wp-post-thumbnail/

gabrielk
fuente
1

Creo que estás buscando esto: http://wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

No he probado esto, pero debería ofrecerte la funcionalidad que estás buscando.

La página del complemento original aquí. http://wordpress.org/extend/plugins/scissors/

Necesito esto para un proyecto en el que estoy trabajando también.

tomcat23
fuente
Gracias por la sugerencia. He mirado las tijeras (y sabía que alguien lo había actualizado a 3.0), pero creo que es demasiado flexible para lo que quiero: debe un cortador que recorte a un tamaño predefinido. Las tijeras pueden hacer mucho más y, por lo tanto, podrían confundir a mis usuarios finales.
Jan Fabry el
1

Creo que la solución definitiva a este problema sería modificar el complemento de http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/

y personalizarlo para que cualquier tamaño de imagen personalizado definido dentro de su archivo functions.php (usando add_image_size( 'new_thumb', 200, 100, true ); ) se automáticamente y luego obtenga el código para reemplazar (o extender) el enlace "editar" cuando desee modificar una imagen.

Al utilizar este enfoque, WordPress puede continuar creando los tamaños de imagen aplicables como lo hace normalmente, pero si desea modificar específicamente el área recortada de cualquier imagen específica, tiene la capacidad de hacerlo, lo que a su vez reemplazaría la imagen generada automáticamente para ese tamaño. Hmmm ... aunque eso suena confuso al leerlo nuevamente, es exactamente lo que siento que falta.

Actualmente creo que el complemento guarda estos tamaños de imagen personalizados en un campo personalizado dentro de una publicación en lugar de una publicación para una imagen aplicable.

NetConstructor.com
fuente