CODEWITHSUNDEEP
buttonpinterest
zekia
zekia

Reputation: 4857

Include/exclude images for Pinterest "Pin It" button

each post in my website, contains a photo gallery. The gallery consists of thumbnail images which link to full-size images. I have also placed a PinIt button in my posts. The problem is that it catches thumbnail images for pining.

Based on what I've found about this kind of issue, I ended up with the following code which should exclude thumbnails from pining, and include full-size images instead. None of these, is donw though...

<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>

Any suggestions?

Upvotes: 4

Views: 2079

Answers (2)

Stranger
Stranger

Reputation: 10611

We can avoid showing an image in the pin action just by using nopin = "nopin" in the image attribute.

For eg.,

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

Upvotes: 2

temkin
temkin

Reputation: 355

In order for the PinIt button to pick full-size images they should be loaded and visible on the page. Since they are not, it cannot grab them to the grid gallery. As a workaround I would suggest to have a custom logic that pre-loads full-sized images before triggering the PinIt button click event. Something like this:

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

This way you will pre-load all the images and put them into imageContainer block and then trigger a click that will open Grid Gallery to pick an image.

Hope it helps.

Upvotes: 0

Related Questions