web-dev-qa-db-fra.com

Créez des images de taille et de nom WordPress pour Retina.js

Je suis un grand fan de la façon dont retina.js fonctionne pour les écrans à haute densité de pixels. Essentiellement, lorsqu’il charge des ressources d’image (via <img> ou une image css), il vérifie s’il existe une version suffixe @2x de l’image (par exemple, s’il existe un logo.jpg, il affichera automatiquement le [email protected] à sa place s’il existe.

La fonction WordPress the_post_thumbnail me permet de définir différentes tailles d'image, mais je souhaite savoir s'il existe un moyen de créer également des versions des images deux fois plus grandes avec le suffixe @2x!

C'est facile à faire pour les fichiers de thème, mais il serait génial de permettre cela aussi pour les images de contenu.

functionspost-thumbnailscontent
2
ArleyM

Vérifiez ce plugin Wordpress

Wp Retina 2X

1
Ravinder Kumar

Ok voici mon conseil.

Il vous suffit de créer des copies d’images double taille à l’aide des paramètres de média natif Wordpress. Et puis ajoutez le code suivant dans vos modèles.

<?php $normal = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail');
$retina = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' ); ?>

<img src="<?php echo $normal[0]; ?>" data-at2x="<?php echo $retina[0]; ?> alt="<?php the_title(); ?>" width="xxx" height="xxx"/>

Ici, ma taille de vignette (normale) est 300x300px et la vignette moyenne (rétine) a une taille de 600x600px. Et n'oubliez pas de charger retina.js sinon data-at2x = ne fonctionnera pas. Bonne chance!

0
wp student