web-dev-qa-db-fra.com

Recadrage convivial des miniatures de publication?

Est-il possible de laisser mes utilisateurs définir la zone de recadrage d'une vignette de publication? Les vignettes sont toujours des pièces jointes existantes, je préférerais ne pas créer de pièce jointe supplémentaire par vignette.

Les miniatures des publications doivent faire 200 x 100 pixels et provenir d’une des images utilisées dans la publication. Ainsi, dans mon monde idéal, lorsque vous cliquez sur le lien "Définir l'image sélectionnée", vous obtenez une vue d'ensemble des images déjà incluses. Lorsque vous cliquez sur l'une de ces images, vous pouvez définir vous-même la zone de recadrage (en la déplaçant ou en la redimensionnant, le format d'image 2x1). Lorsque vous cliquez sur "OK", la nouvelle miniature de publication est enregistrée avec la pièce jointe d'origine (dans le champ de métadonnées _wp_attachment_metadata['sizes']['post-thumbnail'] par exemple), et non comme une nouvelle pièce jointe. L'utilisation d'une image déjà utilisée en tant que vignette d'un message pour un autre message ne devrait pas être autorisée, ou du moins donner un avertissement.

Je pense que l'éditeur d'images inclus ne répondra pas à mes besoins, car vous pouvez choisir de modifier toutes les versions de l'image, ou la miniature normale, mais pas uniquement la miniature de publication. Je trouve également un peu déroutant de savoir quelles versions je suis en train d’éditer, je pense donc que mes utilisateurs auront encore plus de problèmes avec cela.

Y at-il un plugin qui fait ce que je veux, ou que je peux facilement étendre à mes besoins?

Mise à jour: exemple d'interface utilisateur

J'aime beaucoup l'interface du sélecteur d'images du carnet d'adresses Mac OS X: vous sélectionnez une image et redimensionnez un coupe-vignettes à taux fixe via un curseur. Vous pouvez également faire glisser l'image de base autour. Vous pouvez étendre cette idée à plusieurs tailles d’image (par exemple, je possède un post-thumbnail et un post-thumbnail-1/2 qui représentent la moitié de cette taille). Laissez l'utilisateur sélectionner les tailles qu'il édite maintenant avec des cases à cocher, puis tracez les rectangles de rognage appropriés à l'écran.

The Address Book image cropper in action

32
Jan Fabry

Le code est toujours un gâchis, mais il semble fonctionner, même sur IE 8. Je prévois de le publier dans le référentiel, mais entre-temps, vous pouvez jouer avec ma version actuelle . Pour y accéder, cliquez sur "Modifier l'image" lors de l'ajout ou de la modification d'une image. Il remplace l'éditeur d'image habituel (ils sont très difficiles à combiner). Étant donné que la majeure partie de la zone d'administration utilise la vignette standard et que ma version actuelle modifie la vignette du message, il peut sembler que le code n'ait aucun effet, mais essayez-le en affichant une vignette de message et vous devriez le voir changer.

Ce plugin nécessite mon On-Demand Image Resizer , qui est également toujours un désordre, pour faire le redimensionnement réel.

Example image in the cropper

11
Jan Fabry

Votre meilleur pari est d’utiliser un recadrage d’images basé sur javascript puis php combiné avec ImageMagick ou Image Gd.

Il devrait être écrit dans vos fonctions ou sous forme de plug-in, car je ne connais aucun plug-in standard dans WordPress, ce qui est surprenant.

Il existe une culture YUI avec l'option de sauvegarde basée sur php http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

Voici un tutoriel différent sur l'utilisation d'un rogneur jquery avec php
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

Une troisième option très similaire au lien ci-dessus utilisant le même système de découpe jQuery mais un code différent. http://www.leonkessler.com/blog/?p=132

Voici un autre fichier utilisant jcrop à la place de jquery, http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

Qui est partant pour un nouveau plug-in, ce serait sûrement populaire :)

4
Wyck

Vous voudrez peut-être utiliser CSS pour avoir une grande flexibilité, réparer les vignettes dans votre thème (si vous le souhaitez) et éviter l'encombrement des fichiers:

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

N'oubliez pas que toute l'image sera chargée, aussi n'utilisez pas vos originaux de 3 Mo pour cela.

Mise à jour à la demande de Jan: Si vous souhaitez un découpage dynamique, tenez compte des points suivants:

  • Pour utilisateur = administrateur, créez CSS via PHP; vous pouvez simplement vous connecter au php qui lit les paramètres appropriés et ajuster les paramètres de découpage en conséquence.
  • Pour utilisateur = visiteur, utilisez JavaScript pour modifier les paramètres de découpage dans l'attribut style de l'image.
  • En tant que solution moins invasive, envisagez de créer un shortcode (via l'excellent plugin Shortcode Exec PHP) comme [thumb w = ?? h = ??] url [/ thumb] que vous pouvez traduire en balise HTML appropriée avec CSS en ligne.
1
Raphael

Je crois que vous recherchez ceci: http://wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

Je n'ai pas essayé cela, mais il devrait vous offrir la fonctionnalité que vous recherchez.

La page du plugin d'origine ici. http://wordpress.org/extend/plugins/scissors/

J'ai besoin de ça pour un projet sur lequel je travaille aussi.

1
tomcat23

J'ai décidé de rogner les vignettes en utilisant le "wp_get_attachment_image" natif ... voici un exemple de galerie d'images, avec des vignettes rognées

http://wpworks.wordpress.com/2010/12/27/image-gallery-with-image-crop/

Meilleures salutations

1
Alvaro Neto

Il y a un ancien plugin appelé WP Post Thumbnail que nous utilisons parfois. Ce n'est pas parfait et il y a quelques bugs mineurs avec la dernière version de WP (elle n'a pas été mise à jour depuis 2008, donc ce n'est pas nécessairement fiable). http://wordpress.org/extend/plugins/wp-post-thumbnail/

1
gabrielk

En supposant que vous ayez déjà ajouté le support pour les post-vignettes, car vous parlez de l'option "Image en vedette".

Si tel est le cas, vous avez la possibilité d’ajouter une nouvelle taille d’image au tableau de téléchargement. Donc, par défaut, vous avez miniature, moyenne, grande. Dans le code suivant, cela ajoute une quatrième image à cet assortiment, en fonction de la taille souhaitée. Ce morceau de code serait ajouté à votre fichier functions.php.

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

"new-thumb" = le nom de la nouvelle image personnalisée
"200" = largeur
"100" = hauteur
"true" = option de rognage difficile. Cela forcera une image à être recadrée à la largeur/hauteur définie. Sans cela, les échelles ne sont que proportionnelles.

Maintenant, pour afficher la nouvelle vignette sur une page ou un tableau, vous devez insérer ce qui suit dans votre code HTML

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

Je pense que la solution ultime à ce problème serait de modifier le plugin de http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/

et personnalisez-le de sorte que toutes les tailles d'image personnalisées définies dans votre fichier functions.php (à l'aide de add_image_size( 'new_thumb', 200, 100, true );) soient automatiquement utilisées, puis obtenez le code pour remplacer (ou étendre) le lien "modifier" lorsque vous souhaitez modifier une image.

En utilisant cette approche, wordpress peut continuer à créer ses tailles d'image applicables comme il le fait normalement, mais si vous souhaitez modifier spécifiquement la zone recadrée d'une image spécifique, vous avez la possibilité de le faire, ce qui remplacerait à son tour l'image générée automatiquement pour cette taille. Hmmm ... même si cela semble déroutant de le lire, c’est exactement ce qui me manque.

Actuellement, je pense que le plug-in enregistre ces tailles d'image personnalisées dans un champ personnalisé au sein d'un message au lieu d'un message pour une image applicable.

1
NetConstructor.com