Inclure/exclure des images pour le bouton "Pin It" de Pinterest

Question

Chaque article de mon site web, contient une galerie de photos. La galerie se compose de vignettes qui renvoient à des images en taille réelle. J'ai également placé un bouton PinIt dans mes articles. Le problème est qu'il capture les images miniatures pour les épingler.

En me basant sur ce que j'ai trouvé sur ce genre de problème, j'ai fini avec le code suivant qui devrait exclure les vignettes de l'affichage, et inclure les images en taille réelle à la place. Mais rien de tout cela n'est fait...

<a href="path_to_full_image" rel="lightbox[single_post]" pi:pinit:media="path_to_full_image">
     <img src="path_to_thumbnail" width="200" height="130" nopin="nopin" />
</a>

Des suggestions ?

Answer 1

Nous pouvons éviter de montrer une image dans l'action d'épinglage en utilisant simplement nopin = "nopin" dans l'attribut image.

Par exemple..,

<img src="http://via.placeholder.com/350x150" nopin = "nopin" />

Answer 2

Pour que le bouton PinIt puisse sélectionner des images en taille réelle, celles-ci doivent être chargées et visibles sur la page. Comme ce n'est pas le cas, il ne peut pas les saisir dans la galerie de la grille. Comme solution de contournement, je suggère d'avoir une logique personnalisée qui précharge les images en taille réelle avant de déclencher l'événement de clic du bouton PinIt. Quelque chose comme ceci :

$('a[rel="lightbox"]').each(function(){
  image_src = $(this).attr('href');
  $('<img/>').attr('src',image_src).appendTo('#imageContainer');
  ;
})
$('#pinItButton').trigger('click');

De cette façon, vous préchargerez toutes les images et les placerez dans le dossier de l'utilisateur. conteneur d'image puis déclencher un clic qui ouvrira Grid Gallery pour choisir une image.

J'espère que cela vous aidera.