Pinterest hover buttons, those little “Pin It” buttons that appear when mousing over images on Pinterest-integrated sites, don’t work if your site is using HTML5 responsive images (the picture element and srcset attribute) in the way recommended when using the picturefill polyfill for legacy browser compatibility.
The reason is that the JavaScript Pinterest asks you to include on your site, “pinit.js,” assumes any image that should receive a hover button has a nonempty src attribute, while your markup written for optimal use of picturefill excludes the src attribute, relying solely on the srcset attribute instead. This way, legacy browsers don’t unnecessarily load a version of the image that may turn out not to be needed.
Of note, Drupal 8’s Responsive Images module, as themed by default, issues an srcset but no src attribute for this reason. Voila, no Pinterest joy.
Turns out a tiny modification to pinit.js (actually, pinit_main.js; pinit.js is merely a loader) fixes this issue, so long as you’re also comfortable specifying which particular version of the image you want pinned in your img tags using Pinterest’s data-pin-media custom data attribute. I’ve recently opened a pull request on github to try and get this into their hosted version of the JavaScript, but meanwhile you can grab my repository from github and host it yourself as well. Update: the above PR was merged; the stock pinterest script now supports the below example:
Once running this JavaScript, your markup can be
<img srcset="/my-pic.png" data-pin-media="http://mysite.com/my-pic.png" />
…and you should be good to go!
I’ve also got a really quick module for Drupal 8 that adds data-pin-media to all responsive images at https://github.com/mbaynton/pinterest_responsive, which I’ll see about making as a drupal.org project if/when my JS gets merged.
Update: Released as pinterest_hover for Drupal 8.x
Leave a Reply