search

iandonovan / sponsored_corgis

A Google Chrome extension that replaces Facebook "Sponsored Stories" with pictures of corgis.
https://chrome.google.com/webstore/detail/sponsored-corgis/hhjaidjgkafhbemfmgmbkocjcnbbpbep?hl=en-US
2 stars 0 forks source link

Re-size photos in browser #1

Open iandonovan opened 11 years ago

iandonovan commented 11 years ago

Some photos are all stretched, particularly in the sidebar, and even MORE particularly on the sidebar when viewing profiles. Dan Casey requested a way to re-size the photos in-browser. Click-and-drag a corner?

powellcj12 commented 11 years ago

Would it better to resize the images, or find images with dimensions that better fit the ads they're replacing?

iandonovan commented 11 years ago

Here is the Flickr documentation on the size of the photos I can grab. None of them perfectly overlaps with any of the Facebook ads, so some resizing will always be necessary. (Flickr gives square-ish photos.) Generally, the only corgis that are noticeably stretched are the ones on the right side of the screen when looking at a Timeline; the news feed ones are (usually) a-okay.

I guess what I'm saying is that I don't know if we're able to get photos that perfectly fit the ads. Better fit? Probably. The ads I mentioned, though, are fucking tough. Those are the edge cases.

There is a resize library in jQueryUI, though. I'll have to look up how to use jQuery in a Chrome extension (it's a bootstrapped app) but that seems like something I could definitely use. Basically let the user re-size those edge-case corgis.

What do you think?

powellcj12 commented 11 years ago

Could you just programmatically resize the images instead of having the user do it? I'm not sure I see the benefit of having the user resize it themselves, unless that's really what Dan wants...

iandonovan commented 11 years ago

I'm not really following: I am programmatically resizing the images. I get a picture from Flickr of some size, then I assign it the size of the ad it's replacing. For the tricky ads on the Timeline pages, that's what makes 'em stretched. If there's a way to programmatically see that an image is stretched, fuck yeah, let's do that.

powellcj12 commented 11 years ago

Yeah, programmatically determining that an image won't work is what I'm getting at. When you go to resize the image into the area of the Facebook ad, look at how much the dimensions are going to change, and if it's over some threshold, request another one.

Problems with this are:

  1. What's a good threshold to set?
  2. It could take a lot of attempts to find a picture that works, potentially making the page "load" slowly. I also don't know if Flickr limits the number of API calls you can make in a given time period.
iandonovan commented 11 years ago

Hmmmmm.

  1. I don't know. Typically the stretching occurs when the pictures are made too thin, so I could arbitrarily say, "Get a new picture if this corgi's width is going to be reduced by more than 40%" or something.
  2. It could take a lot of attempts, yes, but the Flickr API limiting is a non-factor. The image-grab is on the extension's installation, not on a page load. When you install the app, it grabs 400 image URLs and saves them to localstorage. Any replacements would be drawing from that initial pool. It could still slow things down a bit if one ad needs like 80 attempts, though.

I think it's best to get two classes of images: One for the newsfeed ads and the ads below the mini-ticker, and one class for Timelines. The timeline ones will be smaller, so I can (A) not stretch them as much or (B) just display them at full-size, hoping the CSS of the page won't look too awful.