New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image size bug with data-pin-media #42

Closed
plasticmind opened this Issue Dec 11, 2014 · 4 comments

Comments

Projects
None yet
2 participants
@plasticmind

plasticmind commented Dec 11, 2014

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

This comment has been minimized.

Show comment
Hide comment
@kentbrew

kentbrew Dec 12, 2014

Member

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!

Member

kentbrew commented Dec 12, 2014

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

This comment has been minimized.

Show comment
Hide comment
@plasticmind

plasticmind Dec 12, 2014

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?

plasticmind commented Dec 12, 2014

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

This comment has been minimized.

Show comment
Hide comment
@kentbrew

kentbrew Jan 20, 2015

Member

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.

Member

kentbrew commented Jan 20, 2015

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.

@kentbrew kentbrew closed this Jan 20, 2015

@plasticmind

This comment has been minimized.

Show comment
Hide comment
@plasticmind

plasticmind Jan 20, 2015

Thanks for the feedback, Kent!

plasticmind commented Jan 20, 2015

Thanks for the feedback, Kent!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment