search

pinterest / widgets

JavaScript widgets, including the Pin It button.
Other
210 stars 88 forks source link

Image size bug with data-pin-media #42

Closed plasticmind closed 9 years ago

plasticmind commented 9 years ago

After quite a bit of testing, I've discovered that both the data-pin-media and data-pin-id attributes cause some kind of filtering on the Pinterest image select screen.

If you click the Pin It bookmarklet, you should get all of the images on the page that fit Pinterest's size profile (height, width, aspect ratio), like this:

2014-12-11 at 6 52 pm

However, if data-pin-media or data-pin-id is set, the size of those images impact the size of the images that get displayed on the Pinterest image select screen, like this (using data-pin-media):

2014-12-11 at 6 54 pm

Or like this (using data-pin-id):

2014-12-11 at 6 55 pm

Full demonstration and documentation of the bug here: http://www.simplyrecipes.com/labs/pinterest/data-pin-id/test-1.html?v=5

kentbrew commented 9 years ago

Right, these are weird-looking results. Here's what's going on:

The any-image Pin It button, toolbar bookmarklet, browser extensions, and mobile apps all rely on the same method (not seen in pinit_main.js) to rank images found on a page. This method assigns points based on things like size (bigger is better), shape (portrait is better than landscape, up to a point), whether it's a video, whether it's been identified as the canonical image on the page, and other special factors. After we get everything scored, we sort by score, highest to lowest, and then thumbnail everything whose score is greater than that of the highest-scoring image on the page divided by a magic number (currently 30, subject to change).

One of the special factors mentioned above comes when we find a data-pin-id; another comes if we find data-pin-media. I've just combined the two of these so they won't multiply and push other images down below the quality score limit.

On your test page:

Many of the images that are not showing up are wider than they are tall. These don't make great pins on Pinterest (in the grid they are shrunken down to scale their width into 236px, remember?) so we only give "credit" for the height. If you've got an image that's 300px high and 600px wide, we're scoring it as if it's 300 x 300px. If an image's absolute width is less than 236px it gets an additional ding, so those 200x300 and 200x400 images are ranking very low.

Could you please try your test page with some portrait-format images which are at least 300px wide?

Hope this helps; thanks again for the thorough research and test cases!

plasticmind commented 9 years ago

Thanks for the great feedback, Kent!

So, if I'm understanding this correctly: when a larger image is defined in the data-pin-media attribute, many of the images "disappear" from the image selection because the images displayed are based off the largest image on the page? Fascinating.

When I use the data-pin-id attribute, does the Pin It button factor in that pin's image dimensions, or is it still only evaluating images on the current page?

kentbrew commented 9 years ago

Some images are pushed down below the threshold when an especially good image shows up on top, yes. This works really well when we are looking at a big blog index that might have ads all over it.

When you give us a data-pin-id we're going to repin whatever image we already have. Dimensions no longer enter into it.

plasticmind commented 9 years ago

Thanks for the feedback, Kent!