eworldproblems
  • Home
  • About
  • Awesome Ideas That Somebody Else Already Thought Of
  • Perl defects
  • Books & Resources
Follow

Pinterest hover buttons and picturefill



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

Posted in Uncategorized
SHARE THIS Twitter Facebook Delicious StumbleUpon E-mail
← Reset a crashed migration in Drupal 8
Top gotchas: Creating virtual machines under KVM with virt-install →

No Comments Yet

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Reset connection rate limit in pfSense
  • Connecting to University of Minnesota VPN with Ubuntu / NetworkManager native client
  • Running nodes against multiple puppetmasters as an upgrade strategy
  • The easiest way to (re)start MySQL replication
  • Keeping up on one’s OpenSSL cipher configurations without being a fulltime sysadmin

Categories

  • Computing tips
    • Big Storage @ Home
    • Linux
  • dev
    • devops
    • Drupal
    • lang
      • HTML
      • JavaScript
      • PHP
    • SignalR
  • Product Reviews
  • Uncategorized

Tags

Apache iframe malware performance Security SignalR YWZmaWQ9MDUyODg=

Archives

  • June 2018
  • January 2018
  • August 2017
  • January 2017
  • December 2016
  • November 2016
  • July 2016
  • February 2016
  • January 2016
  • September 2015
  • March 2015
  • February 2015
  • November 2014
  • August 2014
  • July 2014
  • April 2014
  • February 2014
  • January 2014
  • October 2013
  • August 2013
  • June 2013
  • January 2013
  • December 2012
  • November 2012
  • September 2012
  • August 2012
  • July 2012

Blogroll

  • A Ph.D doing DevOps (and lots else)
  • gavinj.net – interesting dev blog
  • Louwrentius.com – zfs@home with 4x the budget, other goodies
  • Me on github
  • My old edulogon.com blog
  • My old GSOC blog
  • My wife started baking a lot
  • Now it's official, my wife is a foodie

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

EvoLve theme by Theme4Press  •  Powered by WordPress eworldproblems