web-dev-qa-db-fra.com

L'image sélectionnée recadrée remplace l'image d'origine dans la galerie

Premièrement, j'ai fait mes recherches aussi minutieusement que possible. Des recherches ont été effectuées, mais je n'ai trouvé aucun conseil ou solution quant à mon problème exact.

Ok, le temps d'expliquer.

Actuellement, je travaille sur un thème de galerie pour un client (je ne suis pas le développeur d'origine de ce thème, il a été créé par un autre développeur du bureau). Le thème est assez simple, la page d'accueil affiche des vignettes 220x170 de chaque message contenant une image. Cliquez sur l'image, la page avec l'image en taille réelle apparaît. Assez simple.

Maintenant, mes problèmes commencent. Le client souhaite définir la zone de l'image à afficher dans la vignette 220x170, car WordPress ne fait actuellement que centrer l'image. Mon processus pour ce faire a été de télécharger l'image dans la galerie, de l'insérer dans un message et de l'enregistrer.

Je clique ensuite sur Définir l'image sélectionnée . Les principaux problèmes commencent ici. Il y a deux façons de régler ce problème, les deux causant des problèmes. Si je recadre l'image, sélectionnez Appliquer les modifications à: Vignette , enregistrez-la, puis sélectionnez Utiliser comme image sélectionnée , l'image sélectionnée reste l'image pleine taille, mais redimensionnée à la taille 220x170.

Au début, je pensais avoir trouvé une solution, mais je l'appellerais plutôt d'un correctif de type pansement et mon client préfèrerait éviter cela de la manière suivante. Si je recadre l'image au lieu de maintenant avec Toutes les tailles d'image , cela va maintenant définir l'image correctement recadrée comme miniature de la vignette, mais évidemment écraser toutes les tailles d'image. Donc, si je suis revenu dans mon message (disons que j'ai supprimé par inadvertance l'image de l'article) et que je voulais l'insérer, l'image maintenant dans la galerie est l'image recadrée.

J'essaie de vous aider à résoudre le premier problème, où la vignette recadrée ne s'affiche pas dans la section de l'image en vedette, mais plutôt dans l'image en taille réelle.

Je vous remercie,

imagespost-thumbnailsgallerythumbnailscropping
5
Gilipe

On dirait que votre client est suffisamment averti avec un programme d’édition d’images.

Il suffit de penser à voix haute, mais vous pouvez ajouter une méta-boîte personnalisée et demander au client de télécharger 2 images. 1 - La plus petite image qui met le focus là où ils le souhaitent 2 - La grande image, à utiliser comme "image sélectionnée".

Ensuite, appelez l'image personnalisée dans le thème et la grande image en cliquant. Je sais que c’est une étape supplémentaire pour le client, mais c’est une méthode que j’avais utilisée dans le passé pour une situation similaire.

1
Travis Pflanz

J'ai une solution pour toi. Ce n'est pas parfait, mais je l'ai testé pour vos besoins et cela fonctionnera. Il y a quelques "bugs" dans Wordpress, mais je vais en discuter plus tard.

Dans votre functions.php, définissez la taille de vos images:

// Add Thumbnail Support
if ( function_exists( 'add_theme_support' ) ) {

    add_theme_support( 'post-thumbnails' );

    set_post_thumbnail_size( 220, 220, true );

    add_image_size( 'very-large', 1024, 99999, false );
}

Ceci est juste un exemple pour votre grande image, voici quelques liens dans le Codex Wordpress pour plus d’informations:

Dans votre thème, appelez la vignette avec

<img src="<?php $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail', false); echo $imgsrc[0]; ?>">

Ensuite, pour la grande image, utilisez <?php the_post_thumbnail( 'very-large' ); ?>

Ensuite, allez dans Admin >> Paramètres >> Média >> Taille de la vignette. Entrez 220 largeur et 170 hauteur

Cochez "Recadrer la vignette aux dimensions exactes (normalement, les vignettes sont proportionnelles)"

Voici l'un des bugs apparents, j'ai testé plus de 200 façons différentes, j'ai set_post_thumbnail_size (220, 220, true); dans functions.php, mais devait également définir les dimensions différemment dans les paramètres Wordpress ou inversement

Maintenant, dans l’écran poste nouveau/modifier le poste:

  1. Cliquez sur "Définir l'image sélectionnée"
  2. Téléchargez votre grande image
  3. Cliquez sur "Modifier l'image" sous la vignette.
  4. Maintenant, cliquez et faites glisser sur l'image pour recadrer la sélection
  5. Dans "Image Rogner" à droite, entrez 225 pour largeur et 171 pour hauteur, exemple: 225: 171
  6. Dans "Réglages des vignettes", vous DEVEZ sélectionner "Vignette"
  7. Cliquez sur l'icône de recadrage juste au-dessus de l'image crop icon
  8. Cliquez sur "Enregistrer"
  9. Maintenant, à l'écran principal de l'image, en bas, cliquez sur "Utiliser comme image sélectionnée"

Voici des bugs plus apparents.

  • Vous ne pouvez pas simplement commencer par saisir les dimensions de la sélection, vous devez d’abord faire glisser une sélection.
  • Vous devez entrer une sélection plus grande que les dimensions réelles de la vignette Wordpress. Vous ne pouvez pas entrer les dimensions réelles de la vignette.
  • Même si tous nos paramètres et fonctions ont défini un recadrage strict pour la vignette, Wordpress ne sera PAS TOUJOURS recadré à 220x170. Par essais et erreurs, j'ai trouvé que 225: 171 fonctionnait toujours.

J’ai découvert quelque chose d’autre à surveiller: si la zone sélectionnée est grande et très grande ou très disproportionnée, la vignette ne sera pas affichée avec exactement 220x170 non plus.

Je suppose que vous pourriez truquer quelques pixels ici ou là en ajoutant height="170px" et width="220px" dans le code de l'image.

J'espère vraiment que quelqu'un de plus intelligent que moi pourra venir améliorer cette méthode, mais c'est le meilleur que je pourrais trouver après avoir joué avec elle pendant deux jours.

1
Travis Pflanz