web-dev-qa-db-fra.com

Comment utiliser la fonctionnalité des images sensibles de WP 4.4 dans vos thèmes

Je ne comprends pas vraiment comment utiliser la nouvelle fonctionnalité d'images réactives fournie par WordPress dans mes thèmes.

Exemple:

Dans mon thème, j'ajoute une image d'en-tête. J'utilise donc l'image d'en-tête personnalisée du personnalisateur OR la post-vignette:

<figure id="header-image" class="uk-margin-remove">
<?php if ( ( is_single() || ! is_home() ) && has_post_thumbnail() ) : ?>
    <?php the_post_thumbnail(); ?>
<?php else: ?>
    ???
<?php endif; ?>
</figure>

Donc dans le premier cas, le résultat est le suivant:

<img src="http://xxx.dev/wp-content/uploads/x.jpg" srcset="http://xxx.dev/wp-content/uploads/x-300x70.jpg 300w, http://xxx.dev/wp-content/uploads/x-768x180.jpg 768w, http://xxx.dev/wp-content/uploads/x-1024x241.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" alt="">

ce qui est parfaitement bien. Mais si je veux afficher une image avec un ID de pièce jointe, quelle que soit la fonction utilisée, je ne reçois pas le résultat escompté.

Exemple:

Dans le code ci-dessus, vous voyez "???". À cet endroit, j'ai essayé certaines choses. Par exemple ceci:

<?php echo wp_get_attachment_image( get_custom_header()->attachment_id, 'full' ); ?>

Ce qui ne donne qu'une seule taille (voir l'attribut size):

<img src="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg" class="attachment-full size-full" alt="Delft_IMG_6275" srcset="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg 1920w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-300x70.jpg 300w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-768x180.jpg 768w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-1024x241.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" height="451" width="1920">

Alors, quelle est la bonne façon d’afficher des images dans le thème afin qu’il produise un résultat similaire à celui de the_post_thumbnail()?

theme-developmentimagesresponsivewp-get-attachment-image
2
SVARTBERG

Suite à notre échange dans les commentaires, j'ai relu votre question et ai une réponse assez simple:

On dirait que ça fonctionne bien.

Vous vous inquiétez de l'attribut sizes dans votre deuxième exemple, mais c'est l'attribut srcset que vous devriez regarder et il est montrant toutes vos tailles d'image:

<img 

src="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg" 

class="attachment-full size-full" alt="Delft_IMG_6275" 

srcset="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg 1920w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-300x70.jpg 300w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-768x180.jpg 768w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-1024x241.jpg 1024w"

sizes="(max-width: 1920px) 100vw, 1920px"

height="451" width="1920">

Votre navigateur lit les attributs comme ceci:

1 - Examinez l’attribut sizes et recherchez la première correspondance pour la largeur de la fenêtre courante. Dans ce cas, si la fenêtre d'affichage a une largeur maximale de 1920px, utilisez la valeur 100vw, convertie en px, sinon utilisez 1920px.

2 - Examinez l'attribut srcset et choisissez une image qui correspond à la valeur de (1).

Sur un grand écran de Nice avec une fenêtre pleine largeur, le navigateur choisit la valeur sizes de 1920px. Ceci pointe le navigateur vers l'image marquée avec 1920w dans l'attribut srcset, avec l'URL de votre image en taille réelle.

Sur un iPad en mode portrait, où la fenêtre d'affichage a une largeur de 768px, la valeur obtenue en (1) sera 100vw qui, pour cette fenêtre, est 768px. En cherchant dans srcset pour 768w, nous obtenons l'URL de la taille d'image medium_large (une nouvelle taille par défaut dans WP4.4 qui n'apparaît pas dans l'interface d'administration).

Lorsqu'il n'y a pas de correspondance exacte pour la largeur de la fenêtre d'affichage, le navigateur doit choisir la taille supérieure.

Dans certaines circonstances, vous pouvez souhaiter fournir une liste plus longue d'images que vous pouvez ajouter à l'aide de add_image_size() dans votre thème. WP créera un attribut srcset en utilisant toutes les images correspondant au rapport de format de la taille d'image que vous choisissez d'afficher.

Il existe également des circonstances dans lesquelles vous souhaitez un attribut sizes personnalisé et que vous pouvez filtrer l'attribut en conséquence, mais dans l'état actuel de votre question, je ne pense pas que c'est ce que vous recherchez.

1
Andy Macaulay-Brook

D'une part, il n'y a rien à faire, d'autre part, wordpress ne crée pas réellement d'images réactives.

Wordpress crée un attribut srcset chaque fois que vous utilisez les API liées aux images en fonction de la taille des images enregistrées, avec toutes les images correspondant au rapport de format. Ce que vous devez faire est d’enregistrer les tailles d’image appropriées afin de permettre à wordpress de générer les images et de les utiliser dans une srcset.

Dans votre exemple "échoué", les images complètes ne seront jamais réactives, car wordpress ne générera pas d'images plus grandes que l'image d'origine (et dans tous les cas, il est difficile de coder une génération d'images dont la taille varie d'une image à l'autre).

Ce que vous devez faire dans votre thème est de décider quelles tailles vous voulez prendre en charge et de les définir en premier. Par exemple, si vous souhaitez que la vignette 150x150 soit également transmise à la rétine x2, vous devez enregistrer à la fois une taille de 150x150 et une taille de 300x300. Si sur mobile vous allouez un espace 50x50 pour la vignette, vous devrez également enregistrer également les tailles 50x50 et 100x100 (pour la rétine). Vous n'êtes pas sûr que ce soit sage dans la pratique, mais c'est la théorie.

Rant: Appeler quel noyau wordpress fait une fonctionnalité est une insulte à l'intelligence. C’est un édulcorant qui vous permet d’éviter de nombreux appels d’API, mais il ne vous aide pas à définir réellement la taille dont vous avez réellement besoin et vous évite de vous ennuyer à configurer WordPress pour les utiliser.

0
Mark Kaplun

Vous pouvez utiliser un array as size:

wp_get_attachment_image( get_custom_header()->attachment_id, array('700', '600'));

EDIT:

@ downvoter explique pourquoi vous votez à la baisse. Je suis d’accord, j’avais tort, mais vous auriez pu dire: "Oui, vous pouvez utiliser un tableau pour redimensionner l’image, MAIS, la taille par défaut ne sera que la taille la plus proche, à une taille d’image définie.

Les images définies sont soit définies dans la section multimédia de SETTINGS-> MEDIA dans l’administrateur principal, elles seront "vignettes", "moyennes" et "pleines" OR lors d’une utilisation personnalisée et vous pourrez utiliser add_image_size('name-you want-use', 340, 230, true); dans vos fonctions. fichier ETC ... ETC ..

0
Malisa