web-dev-qa-db-fra.com

Retina images - syntaxe personnalisée pour l'insertion d'images dans le contenu d'un post

Je suis actuellement en train de construire un thème WordPress immobilier réactif et je vois comment ajouter correctement le support pour les écrans HiDPI. J'ai décidé d'utiliser une solution JavaScript Picturefill , qui imite la fonctionnalité de image HTML element . WordPress nous permet de créer des tailles d'image personnalisées, et j'ai décidé que pour chaque taille d'image (comme pour la liste des images de la galerie sur une seule page), il me faudrait quatre tailles d'image déclarées:

  1. Image basse résolution régulière pour les appareils de bureau
  2. @ 2x image haute résolution pour les appareils de bureau HiDPI (pour le moment MacBook Retina uniquement)
  3. Une image basse résolution plus petite pour les smartphones (pourquoi les smartphones doivent-ils charger une image en taille réelle?)
  4. Petite image haute résolution pour les smartphones

Pour les tablettes, j'ai décidé de traiter les images de même taille que pour les appareils de bureau, tout simplement parce que la taille de l'image spécifique à la tablette n'est pas si différente de celle des ordinateurs de bureau. Les gains de bande passante ne sont donc pas assez importants pour justifier l'ajout de deux images. tailles (par emplacement d'image) à WordPress (basse et haute résolution) et encombrer les téléchargements et DOM.

Maintenant, tout va bien quand nous avons affaire à des images que le thème tire automatiquement (comme des miniatures de publication, une galerie de publication automatique, etc.), mais comme pour que le script Picturefill fonctionne, je dois sortir quatre chemins d’image différents (avec le média approprié). requêtes) - comment pourrais-je traiter les images que l'utilisateur place manuellement dans le contenu de la publication ?

Pour ceux qui ne veulent pas lire le fonctionnement de Picturefill, voici la syntaxe attendue par le script:

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <div data-src="small.jpg"></div>
    <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
    <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
    <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</div>

Si vous avez des suggestions sur la méthode proposée, partagez-les, mais vos idées sur la manière de créer la syntaxe ci-dessus pour les images que les utilisateurs mettent manuellement dans le contenu de la publication m'intéresseraient

En revanche, évitez de suggérer de mettre une telle fonctionnalité dans le plugin, car, à mon avis, les images HiDPI sont clairement des fonctions de présentation et doivent être gérées par le thème.

De plus, je suis au courant de l'existence de Wp Retina 2x plugin, mais ce n'est pas exactement ce dont j'ai besoin, car mes images doivent non seulement être en haute résolution, mais également en réactif - je ne ne voulez pas forcer les utilisateurs de smartphones à télécharger des images haute résolution d'environ 800 Ko.

imagesimage-size
6
Mateusz Hajdziony

Je ne l'avais pas fait moi-même mais j'ai comment insérer une image dans la syntaxe Markdown dans WordPress stockée pour plus tard et montrant comment personnaliser le balisage d'une image insérée.

Il utilise le filtre image_send_to_editor dans la fonction get_image_send_to_editor () .

1
Rarst

C'est un peu brouillon, mais vous pouvez écrire un filtre pour the_content, utiliser une expression rationnelle pour trouver toutes les balises d'image, puis les remplacer par votre format révisé.

Cette approche pose quelques problèmes, le plus difficile étant de résoudre l’URL de l’image de base: même si l’image a été téléchargée via Wordpress, l’instance de la publication peut être l’image de taille normale ou la vignette. Pour le convertir dans votre tableau de tailles, vous avez besoin de l’URL de l’image de base, puis vous pouvez ajouter les différentes tailles à la fin (c’est-à-dire 150x150).

Il est également possible que l'auteur du message ait inséré une image qu'il a lui-même téléchargée à la place de Wordpress ou peut-être qu'il crée un lien direct vers une image extérieure.

Une importation de pièce jointe typique ressemble à ceci:

<img src="http://my_domain.com/wp-content/uploads/2012/08/image_name.jpg" alt="Description" width="150" height="150" class="aligncenter size-thumbnail wp-image-1237" />

Nous avons donc besoin d’une expression régulière qui recherche les balises d’image, mais uniquement celles qui sont de véritables pièces jointes Wordpress. Je suis juste en train de créer le code suivant - il me faut toujours quelques itérations pour faire en sorte qu'une expression rationnelle fonctionne correctement - donc cela nécessitera probablement quelques ajustements, mais voici un concept:

function picturefill_images($content) {
    if(preg_match("/<img.*?wp-image-(\d+).*?\/>/", $content, $matches);
    foreach($matches as $match) {
        $img_id = $match[1];

        $new = "<div data-src='".wp_get_attachment_link($img_id, 'thumbnail')."'></div>";
        $new .= "<div data-src='".wp_get_attachment_link($img_id, '300x300')."' data-media='(min-width: 400px)'></div>";
        // etc, etc, etc...

        $content = preg_replace("/".preg_quote($match[0])."/", $new, $content);
    }

    return $content;
}
add_filter('the_content', 'picturefill_images');

Ce qui se passe, c’est que nous filtrons le contenu de toutes les balises d’image qui contiennent une image de type wp - #### et que nous capturons le numéro final - l’identifiant de la pièce jointe. Nous utilisons ensuite l'id pour construire un remplacement pour la balise avec différentes tailles de pièces jointes. Enfin, remplacez la balise d’image originale dans le contenu par notre remplaçant.

Encore une fois, tout cela est du travail sur tableau blanc - non testé, mais cela devrait vous permettre de démarrer dans la bonne direction.

1
Ed Burns