0Afficher l'image agrandie au survol dans wordpress

Dans le cadre des récentes améliorations que j'ai apportées à divers sites Web, je voulais que les images dans les galeries affichent des versions agrandies au survol.. Faire cela avec la base CSS est assez banal, mais je ne voulais pas seulement agrandir l'image d'origine, Je voulais que le navigateur récupère un nouveau (plus grand) image aussi…

Toutes les images fournissent déjà un ensemble src complet, donc tout ce que j'avais à faire était d'utiliser un peu de jQuery (qui est déjà chargé par wordpress de toute façon) pour changer la taille d'affichage cible pour que le navigateur tire une image plus grande. Ce qui est bien, c'est que le CSS fonctionne instantanément pour que vous obteniez une image plus grande en utilisant le fichier d'origine, puis la qualité s'améliore une fraction de seconde plus tard lorsque le fichier de résolution plus élevée est chargé.

le CSS

le CSS j'ai utilisé est le suivant. J'ai simplement ajouté ceci au style.css de mon thème (ou plutôt thème enfant — toujours une bonne idée d'en utiliser un)

dt.gallery-icon a img.size-thumbnail:flotter
{
transformer: escalader(3.0);
}

Remarque (1) - ce qui précède CSS s'applique uniquement aux images de la galerie. Il est peu probable que quiconque veuille cette fonctionnalité pour toutes les images affichées n'importe où sur la page, mais vous pourriez le vouloir pour la section de contenu principal. Vous devrez vérifier comment votre thème structure cela, mais dans mon cas, la zone de contenu principale est une "section", donc le code suivant ferait le travail

section.entry-content p a img.size-thumbnail:flotter
{
transformer: escalader(3.0);
}

Remarque (2) — Ce code s'applique uniquement aux images miniatures. Pour les images moyennes, vous remplaceriez "taille-thumbnail" par "taille-moyenne", et pour les grands avec « taille-grande ».

Remarque (3) — Parce que mes vignettes sont 120x80px, je veux les augmenter à 3 fois leur taille d'origine. J'ai déjà une taille d'image personnalisée de 360 ​​× 240 que wordpress crée pour moi et qui est incluse dans le src-set. Pour les écrans haute résolution, il existe également des tailles d'image encore plus grandes que j'ai (e.g. 720×480). La création de tailles d'image supplémentaires dans wordpress est facile - il existe de nombreux bons guides en ligne si vous avez besoin de le faire.

Si vous vouliez mettre à l'échelle à 1,5x ou 2,0x, changez simplement le 3.0 comme voulu

Le jQuery

Ajoutez ce qui suit à votre (enfant) fichier de script du thème (en supposant qu'il en ait un). S'il n'en a pas, créer le vôtre, et « mettez-le en file d'attente » avec une fonction personnalisée dans le (enfant) fonctions du thème.php

jQuery(document).prêt(fonction(){

  jQuery("dt.gallery-icon a img.size-thumbnail").flotter(fonction(){
    jQuery(ce).attr("tailles","(largeur maximale: 360px) 100vw, 360px");
    }, fonction(){
    jQuery(ce).attr("tailles","(largeur maximale: 120px) 100vw, 120px");
  });

  //répéter ce qui précède 5 lignes ici pour chaque taille d'image différente que vous souhaitez modifier

});

Le code ci-dessus s'applique aux images avec une vignette de classe qui se trouvent dans n'importe quel dt avec une classe d'icône de galerie - donc en d'autres termes - uniquement aux images à l'intérieur de la structure de galerie intégrée de wordpress. En survol, la largeur maximale passe de 120 à 360 (une augmentation de 3x pour correspondre à mon CSS!), puis la deuxième partie de la fonction restaure l'original 120 largeur lorsque le survol s'arrête.

Comme avec le CSS au-dessus, vous pouvez ajuster les nombres pour changer l'agrandissement de l'image, et vous pouvez changer le dt.gallery-icon a img.size-thumbnail section pour cibler un élément ou une classe différente en fonction des images que vous souhaitez cibler.

Mettez votre propre script en file d'attente

Si votre thème n'avait pas de fichier de script et que vous devez mettre le vôtre en file d'attente, ajoutez ce qui suit à votre (enfant) fonctions du thème.php (en supposant que vous ayez appelé votre fichier de script image-zoom.js et l'avez enregistré dans le dossier racine du thème)

wp_register_script( 'img-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', tableau( 'jquery' ), '', true);
wp_enqueue_script( 'img-zoom' );

Ce qui précède enregistrera votre script, dans le pied de page, s'assurer qu'il est placé après jquery (donc jquery devrait déjà être disponible lors de son exécution)

Ajout de tailles d'image

Pour être complet, voici comment ajouter des tailles d'image personnalisées à wordpress. Encore, ajoutez ceci à votre (enfant) fonctions du thème.php

add_image_size( 'quart de largeur', 192, 144, faux );

Ci-dessus, j'ai ajouté une nouvelle taille d'image appelée "quart de largeur" ​​avec une largeur maximale de 192px et une hauteur maximale de 144px. L'image ne sera pas recadrée (d'où le faux à la fin).

WordPress créera désormais automatiquement des images de cette taille lorsque vous téléchargerez des images (vous devrez utiliser un plugin de reconstruction de vignettes pour recréer les vignettes des images déjà téléchargées).

Cette nouvelle taille d'image n'apparaîtra PAS pour l'insertion dans l'éditeur cependant. Pour le rendre disponible, ajoutez également le code suivant à votre functions.php

fonction my_custom_image_sizes( $tailles ) {
    return array_merge( $tailles, tableau(
        'quart de largeur' => __('Quart de largeur'),
    ) );
}

Respecter les paramètres existants

Une autre chose que vous pourriez vouloir faire (pour s'assurer que les images réactives fonctionnent bien) est de créer plus grand (i.e. haute résolution) des tailles de vignettes qui respectent les GUI de rogner ou non les vignettes. Pour ce faire, utilisez le code ci-dessous qui, comme vous le verrez, est légèrement modifié par rapport au code plus basique ci-dessus.

add_image_size( 'resp-pouce-2x', (get_option( 'thumbnail_size_w' ) == 0 ? 0 : '240'), 160, get_option( 'thumbnail_crop' ) );

Le code ci-dessus vérifie 2 choses - tout d'abord, il vérifie si l'option de recadrage est définie, et si c'est, il le reflète pour notre nouvelle taille réactive. Il vérifie également si la largeur est définie sur 0 (i.e. pas de maximum) auquel cas notre nouvelle image n'aura pas non plus de maximum non plus. J'ai appelé la nouvelle taille d'image "resp-thumb-2x" car il s'agit d'une copie "responsive" de la vignette qui est deux fois plus grande (pour les écrans haute résolution avec le double de la densité de pixels normale). J'ai également créé un certain nombre d'autres tailles pour faire un ensemble assez complet.

Remarque - Étant donné que mes vignettes d'origine étaient 120 × 80, je veux que mes nouvelles soient 240 × 160, ce sont donc les tailles que j'ai spécifiées (codé en dur). Il serait possible d'obtenir à la fois la hauteur et la largeur spécifiées pour la vignette d'origine et de multiplier les deux par 2 rendre cette fonction totalement générique, mais je ne l'ai pas fait quand je l'ai développé donc je vous laisse le soin de le découvrir!

Un dernier conseil

Si, comme moi, vous créez votre propre ensemble complet de nouvelles tailles d'image, vous ne voudrez peut-être pas que wordpress crée ses propres tailles cachées supplémentaires. En plus de l'image originale, et la vignette, le médium, et la grande image, wordpress crée également une "post-vignette", un "moyen-grand", un 1536×1536 et un 2048×2048. Ceux-ci sont désactivés dans 2 différentes manières…

Pour supprimer le 1536 et 2048 les images sont simples

remove_image_size( '1536x1536' ); //retirer le 1536 nous n'en avons pas besoin
remove_image_size( '2048x2048' ); //retirer le 2048 nous n'en avons pas besoin

Le post-pouce et moyen-grand sont légèrement plus compliqués

//retirer le moyen-grand intégré
ajouter_filtre('intermediate_image_sizes', fonction($tailles) {
    retourner array_diff($tailles, ['moyen large']);
});

//supprimer la post-vignette intégrée
ajouter_filtre('intermediate_image_sizes', fonction($tailles) {
    retourner array_diff($tailles, ['post-vignette']);
});

Notez que la suppression de la post-vignette semble parfois avoir des effets étranges sur la bibliothèque d'images dans l'éditeur.

Une dernière note finale

Lors du choix de la taille des images (pour des images plus grandes, moins les vignettes) vous voulez idéalement une taille que les images de rapport d'aspect communes redimensionneront toujours bien à. Pour cette raison, je recommande les tailles suivantes

Notez comment les largeurs spécifiées produisent des hauteurs de nombres entiers pour tous 3 des rapports d'aspect les plus courants. Vous n'obtiendrez pas cela avec des largeurs comme 150 ou 200.

Notez également la tendance des augmentations. Sauter 2 lignes dans le tableau et la taille double! Les rangs pairs (288,576,1152 et 1535) sont également 1,5 fois la taille précédente, donc ils fonctionnent bien sur les écrans semi-haute dpi en utilisant un 50% augmentation de ppp. En utilisant cet ensemble de 7 tailles vous avez une bonne gamme d'options utilisables pour la plupart des fenêtres ET un bon ensemble d'images réactives que wordpress ajoutera automatiquement à l'ensemble src car elles auront des rapports d'aspect cohérents sans fractions qui entraîneraient une perte de qualité ou un recadrage.

Actuellement, pour les vignettes, j'ai tendance à avoir une largeur illimitée autorisée OU à recadrer durement à un fixe 3:2 ratio donc j'utilise des tailles de nombres entiers pour les vignettes mais je peux éventuellement modifier mon thème et étendre le système ci-dessus en arrière en ayant des options 48px et 96px de large (notez qu'il n'y a pas de valeur entre ces 2 cela fonctionnerait malheureusement - et comme j'utilise des mini vignettes de 60px de large, je n'ai pas choisi d'étendre vers l'arrière). 72px fonctionnerait pour les deux 4:3 et 3:2 (et 64px fonctionneraient avec 4:3 et 16:9). Étant donné que la majorité de mes images sont prises sur mon reflex numérique, elles sont généralement 3:2 (le même que le rapport hauteur/largeur du film 35 mm traditionnel) donc je pourrais aussi utiliser cette taille, qui fonctionnerait alors avec les grandes tailles jusqu'en haut, mais les tailles plus grandes ne sont pas recadrées alors que mes vignettes le sont - je suis heureux que les images plus grandes soient à la fois paysage et portrait, mais je veux que les vignettes soient généralement en mode paysage uniquement pour s'adapter à mon design, c'est pourquoi je n'ai pas étendu vers l'arrière. Espérons que de plus en plus de logos sont disponibles en tant que SVG'S, et une fois JPEG-XL arrive dans le navigateur dans un futur proche, beaucoup de cela sera résolu.