web-dev-qa-db-fra.com

Mise à l'échelle de l'image à l'aide du problème get_the_post_thumbnail dans Wordpress

URL du numéro - http://www.creativescripters.com/clients/testwp/uncategorized/image-resized/

J'utilise wordpress (auto-hébergé) dernière version. Le problème est que je cherche à obtenir une vignette de l'image redimensionnée/mise à l'échelle. Lorsque je le fais, wordpress renvoie le test-150x150.jpg, c'est-à-dire la vignette de l'image d'origine et non le image redimensionnée qui aurait dû être test-e1513229707262-150x150.jpg

Étape pour reproduire le problème

  1. Téléchargez une image, mettez-la à l'échelle (cliquez sur Éditer sur l'image importée, changez la largeur et cliquez sur l'échelle). Wordpress renommera l'image et ajoutera un identifiant de suffixe au nom afin que vous puissiez vérifier que l'image a bien été mise à l'échelle. par exemple, si vous avez téléchargé test.jpg après avoir redimensionné le nom de l'image, ce dernier deviendra test-randomstring.jpg

 enter image description here 

  1. Lorsque j'appelle get_the_post_thumbnail ($ post, 'full'), je reçois la bonne image. L'image redimensionnée, c'est-à-dire test-randomstring.jpg  enter image description here 

  2. Lorsque j'essaie d'obtenir une taille différente de l'image redimensionnée, par exemple, j'ai besoin d'une vignette générée à partir de la taille de l'image et que j'appelle la fonction get_the_post_thumbnail ($ post, 'vignette') wordpress renvoyer le THUMBNAIL à partir de l'image réelle (celle que j'ai téléchargée lors du test initial. jpg et pas celui redimensionné test-randomstring.jpg)

Capture d'écran - https://i.imgur.com/sQKoZcF.png

imagespost-thumbnails
4
June

REGENERER TOUJOURS LA SOURCE SUR L'EDITION D'IMAGE

(Le nouveau matériel, en particulier la fonction personnalisée, suit la conversation dans le fil de commentaire.)

La fonction suivante régénère automatiquement un ensemble de sources complet après une action de modification d'image.

/**
 * ALWAYS REGENERATE FULL SOURCE SET AFTER EDITING IMAGE
 * answering StackExchange WordPress Development Question
 * see: https://wordpress.stackexchange.com/questions/288581/image-scaling-using-get-the-post-thumbnail-issue-in-wordpress/
 * exploits code already worked out in Regenerate Thumbnails Plugin
 */
add_action( 'edit_attachment', 'wpse_always_regenerate', 99);

function wpse_always_regenerate( $postID ) {

    $new_url = get_attached_file( $postID );

    $metadata = wp_generate_attachment_metadata( $postID, $new_url );

    wp_update_attachment_metadata( $postID, $metadata );

}

Vous ajouteriez ceci au fichier functions.php de votre thème si c’était ce que vous souhaitiez: si vous étiez satisfait du numéro d’index généré et ajouté à l’image originale et si le jeu de sources complet était régi par la mise à l'échelle) de l'image. Il arrive de laisser le téléchargement d'origine et son ensemble dans le dossier. (L'ajout d'une opération "nettoyante" facultative est une chose à laquelle je n'ai pas encore accès, mais il existe déjà des plugins qui nettoieront déjà les images non attachées/inutilisées d'un dossier - l'une d'entre elles pourrait être appliquée de façon semi-régulière.)

Je ne l'ai pas testé pour d'éventuelles interactions supplémentaires indésirables. Dans la plupart des installations, cela ne ferait pas de mal, cela pourrait même aider, bien que je puisse imaginer certaines circonstances dans lesquelles vous NE voudriez PAS que toutes les actions de retouche d'image "régénèrent les vignettes" (qui devrait probablement être nommé "régénérer le jeu de sources"). Pour ces installations, vous voudrez évidemment quelque chose de plus raffiné.

DISCUSSION COMPLETE

Même si un peu plus de clarté sur la question initiale et sur la manière de la reproduire exactement serait utile, je pense que la réponse va dans ce sens:

Lorsque vous téléchargez une image, WordPress en télécharge la version complète, ainsi que le jeu normal de vignettes. Si vous redimensionnez l'image, une variation spécifique sera également créée, avec l'ajout de nombres aléatoires. Ainsi, lors d'une installation, lorsque je télécharge une image en tant qu'image sélectionnée et que je procède à sa redimensionnement, le dossier suivant s'affiche:

 ![enter image description here 

Si je demande get_the_post_thumbnail( $postID, $type ), je reçois:

complet :

<img 
    width="500" 
    height="651" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg" 
    class="attachment-full size-full wp-post-image" 
    alt="" 
    sizes="100vw" 
/>

post-thumbnail :

<img 
    width="500" 
    height="651" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg" 
    class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
    alt="" 
    sizes="100vw" 
/>

vignette :

<img 
    width="150" 
    height="150" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-150x150.jpg" 
    class="attachment-thumbnail size-thumbnail wp-post-image" alt="" 
    srcset="https://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-150x150.jpg 150w, 
            https://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-100x100.jpg 100w" 
    sizes="100vw" 
/>

Donc, en redimensionnant l'image lors du téléchargement, je crée une nouvelle version "complète" de l'image - avec le code "aléatoire" ajouté au nom de fichier d'origine et, depuis que je l'ai téléchargée en tant qu'image sélectionnée, elle est maintenant également insérée. comme l'image "post-vignette".

Ceci peut également être vérifié en utilisant wp_get_attachment_image_src (), qui, pour "full" dans ce qui précède, renvoie:

(
    [0] => http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg
    [1] => 500
    [2] => 651
    [3] => 
)

En bref, si vous appelez l'une des images nommées dans l'ensemble d'images habituel, vous obtiendrez celles créées avant de redimensionner l'image. Si - en supposant que vous avez redimensionné l'image lors de son téléchargement en tant qu'image sélectionnée - vous appelez pour obtenir l'image complète ou l'image (dans cette installation) post-thumbnail, vous obtenez également la nouvelle image redimensionnée.

Pour obtenir l'image complète originale, je pense que vous devrez peut-être accéder à l'objet pièce jointe, qui ressemble à ceci:

[64755] => WP_Post Object
        (
            [ID] => 64755
            [post_author] => 1
            [post_date] => 2017-12-23 17:38:24
            [post_date_gmt] => 2017-12-23 17:38:24
            [post_content] => 
            [post_title] => pingdom_topline_before
            [post_excerpt] => 
            [post_status] => inherit
            [comment_status] => open
            [ping_status] => closed
            [post_password] => 
            [post_name] => pingdom_topline_before
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2017-12-23 17:38:24
            [post_modified_gmt] => 2017-12-23 17:38:24
            [post_content_filtered] => 
            [post_parent] => 64752
            [guid] => **http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before.jpg**
            [menu_order] => 0
            [post_type] => attachment
            [post_mime_type] => image/jpeg
            [comment_count] => 0
            [filter] => raw
        )

)

Si vous souhaitez obtenir une version 150 x 150 (ou tout ce qui est défini pour l'installation par vignette) de l'image redimensionnée, vous devez soit:

1) Téléchargez l'image redimensionnée séparément et laissez WordPress générer le test-image-random-150x150.jpg pour vous. ou

2) Obtenez un effet similaire en "régénérant les vignettes".

Après une telle action de régénération, mon dossier de téléchargements affiche les éléments suivants:

 enter image description here 

Notez que le jeu d'images d'origine n'est pas modifié dans le dossier.

Il est préférable de créer un tel ensemble d'images régénéré, en particulier si vous envisagez d'utiliser l'image redimensionnée à d'autres fins, car le réimporter et le laisser générer l'ensemble complet d'images source correspondant à votre installation vous aideront à la réactivité et à la réactivité. cohérence.

Pour atteindre ces objectifs, vous aurez besoin d’une fonction personnalisée (comme celle fournie au début de cette réponse), et une implémentation plus complexe et optionnelle mériterait d’être envisagée, même si je ne suis pas convaincue qu’elle serait utilisée très souvent. (Lorsque je souhaite redimensionner une image à des dimensions particulières, je la fais presque toujours séparément de WP et lui donne un nom qui a du sens pour moi, mais je ne peux pas parler pour les autres.)

Si vous souhaitez obtenir un ensemble d’images source complet (par rapport à la nouvelle image redimensionnée) et que vous ne souhaitez pas télécharger à nouveau la nouvelle image redimensionnée, ou que vous utilisiez la fonction pour le faire pour vous chaque fois que vous modifiez une image dans la bibliothèque, vous pouvez utiliser Regenerate Thumbnails ou un plugin similaire. Enfin, vous pouvez également rogner (ou rogner) l’image pour produire l’ensemble des vignettes.

Ce dernier est facile à exécuter: en plus de redimensionner l’image, dans "modifier une image", vous pouvez utiliser l’outil de rognage pour créer une copie quasi virtuelle de l’original - et WordPress générera le jeu de sources complet lors de la sauvegarde. l'image. Je dis quasi-copie parce que dans les tests, l'éditeur ne vous permettra pas de sauvegarder complètement une "copie" identique à l'original, mais je n'ai pas d'autre choix que d'examiner le code en détail si je veux comprendre, et c'est quelque chose Je pars pour un autre jour et peut-être écrirai-je ailleurs - à moins que quelqu'un d'autre vienne avec le briefing complet en premier.

Donc, en somme,

1. Lorsque vous téléchargez une image pour la première fois, WordPress crée un ensemble de vignettes basées sur le fichier téléchargé.

2. Si vous redimensionnez simplement l'image, elle produira une seule image redimensionnée, avec un nom de fichier généré basé sur le nom d'origine, avec l'ajout d'un élément "aléatoire" (en fait, un numéro d'index hétérogène)

3. Si vous ré-téléchargez la nouvelle image redimensionnée ou si vous régénérez des vignettes (à l'aide d'une fonction personnalisée, d'un plugin ou d'une astuce d'édition), vous pouvez créer un nouvel ensemble d'images à partir de l'image redimensionnée. nom de fichier.

4
CK MacLeod

Utilisez post-thumbnail au lieu de thumbnail. Votre code final sera get_the_post_thumbnail($post, 'post-thumbnail');. S'il vous plaît se référer à ce link

2
BlueSuiter

Utilisé img tag et image d'affichage

<img src="<?= $img_url=get_the_post_thumbnail_url($post->ID,'full'); ?>" alt="image" />
2
Tarang koradiya

Vous devez ajouter la taille d'image appropriée dans le fichier functions.php de votre thème.

add_image_size('my_post_thumbnial', 400, 99999, false);

400 est la largeur, 99999 est la hauteur, false est de ne pas recadrer. Cela doit être "après" add_theme_support (post-vignettes); alors trouvez cela et placez le code ci-dessus après.

Vous n'avez pas besoin de régénérer toutes vos images ... il vous suffit de télécharger à nouveau celles dont vous avez besoin. Facultativement, le plug-in Regenerate Thumbnails ( https://wordpress.org/plugins/regenerate-thumbnails/ ) ajoute un lien vers chaque image de votre médiathèque pour régénérer cette image.

Appelez ensuite votre vignette avec the_post_thumbnail('my_post_thumbnial');

2
Ted

Vous voudrez peut-être essayer d’ajouter la constante IMAGE_EDIT_OVERWRITE constante dans votre fichier wp-config pour forcer WP à purger les anciennes images et en utiliser de nouvelles.

La fonction wp_save_image() est ce qui traite l'image et est appelée par wp_ajax_image_editor() qui est le gestionnaire AJAX pour l'éditeur d'image AJAX points de terminaison.

Vous pouvez en savoir plus sur son fonctionnement dans le fichier /wp-includes/image-edit.php ou parcourir son code source en ligne @ https://developer.wordpress.org/reference/functions/wp_save_image/

Cependant, je ne sais toujours pas si c'est vraiment un problème,

  1. L'image originale est 1024x707
  2. WP le convertit en taille miniature avec d'autres tailles.
  3. Vous obtenez une vignette de cette image qui est 150x150.
  4. Vous le redimensionnez pour dire 400x276.
  5. La vignette pour cette image serait en réalité identique au pouce de la première image.

Donc, le résultat est à peu près le même de toute façon :)

2
shramee