Implement MVP of Visual Image Picker extension

[humphd]

One of the biggest requests we've gotten for improvements to Thimble is that it needs an easier way to deal with image selection. Right now the process is much more complicated than it needs to be, since it requires leaving the editor window, searching for an image, figuring out the right URL (image URL vs. HTML wrapper displaying the image), copy/pasting, discussions of fair use, etc.

There are a bunch of things we could do to make this easier, including:

• provide a default set of images we host and have curated, from which users can pick if they don't want to supply their own
• connect to popular image search APIs and allow searching and picking images directly from within the editor
• allow the user to take their own picture using their computer's camera

We've got examples of 1) and 2) above in the way that Khan Academy's HTML editor works, and in the second case how Popcorn Maker works.

First, here is what Khan does in their HTML Image lesson

Clicking on "Pick Image..." brings up a modal dialog:

Here the user can choose from a limited set of appropriate images that dove tail with the curriculum and lesson being completed. I think the "Pick Image..." UI is a bit clunky, but it works, and it's better than what we do now.

In the Popcorn Maker case, a search box allows the user to query the Flickr and Giffy APIs (among others), preview the results, and visually choose an image:

I'm wondering if we could combine these ideas and allow the user to type a URL or click something that opens a Brackets dialog that hosts similar code to what's in Popcorn Maker's image search. There are a number of existing Brackets extensions that do things in this space, mostly related to creating placeholder images, see:

• https://github.com/dnbard/brackets-lorem-pixel
• https://github.com/VincentLoy/brackets-lorem-picsum
• https://github.com/VincentLoy/brackets-ui-faces-and-names
• https://github.com/jspartak/custom-placeholdit-for-brackets.phit/
• https://github.com/joepenzo/DEVimg-for-Brackets

I don't think our first attempt at this needs to be perfect, since we're almost certainly going to want to get designers involved to help us shape the final UX.

@mjschranz, @ScottDowne, would you be willing to add thoughts to this bug on what would be involved in stealing the code from Popcorn Maker?

cc @davidascher

[mjschranz]

As far as what Popcorn Maker does for all of this, it really just parses what the user inputs and checks if it's some sort of URI for a media it knows about (YouTube, SoundCloud, Vimeo, etc) and if it doesn't pass any it assumes a normal search which then sends an AJAX request to the registered endpoint on it's server provided by https://github.com/mozilla/webmaker-mediasync.

I obviously don't know much about how brackets is setup for UI components but I'm guessing there isn't too much as far as the front end is concerned that brackets could use/share. The backend however was designed to be usable by anyway (assuming they used a Node.js server somewhere that you can send requests to).

[davidascher]

My contribution to this thread is to tell the story of a conversation I had with Stuart Butterfield back when he was CEO of Flickr. We were talking about how both nice it was that they had enabled creative commons licensing for images on an opt-in basis. I was bemoaning the fact that he couldn't make it opt-out, and he replied: "it doesn't matter -- suppose you're looking for a CC image of a pumpkin, it doesn't matter if you get 40 decent pictures or 4000".

The reason I tell that story is that I think within Thimble in particular, the primary use of the "add an image" flow is illustrative -- we should focus on "find a CC pumpkin", not the "help people navigate all of the sources of images in the world (the way filepicker.io does for example).

[humphd]

@davidascher I think that makes a lot of sense. @mjschranz, is the webmaker-mediasync stuff smart enough to only get CC licensed images? If not, can it be taught to do so?

[mjschranz]

It definitely could be. Only thing needed to be changed there would be the Flickr specific service code.

[humphd]

In addition to CC license by default, it would also be useful to default to "Safe" for the Safety Level we search, https://www.flickr.com/help/filters/#258. This is what http://www.photosforclass.com/ does.

[mjschranz]

I think I already do that but I recall testing in the past definitely being hit/miss and depandant on what users submitted/flagged inappropriate. I recall the default search being for cats on our image plugin and we wound up getting images of kitten fetuses which was rather not nice.

[mjschranz]

While we are here, what license were you specifically looking at? It looks like multiple from CC are supported based on https://www.flickr.com/creativecommons/ and https://www.flickr.com/services/api/explore/flickr.photos.licenses.getInfo.

Multiple licenses can be specified in search VIA csv. Are we thinking all of the ones listed that are actually Create Commons or only a subset of those?

[humphd]

As long as the image is one they can rightfully use, I don't think it matters. People almost certainly won't care, so this is more about removing friction on the way to getting an image into the editor.

[mjschranz]

@humphd https://github.com/mozilla/webmaker-mediasync/pull/14

[davidascher]

Right. Any CC license will do for our purposes. (Extra credit for, when embedding the image, doing so in a way that links back to the source flickr page e.g. as an extra IMG attribute).

[mjschranz]

I don't know if my code does that currently but I can certainly look into it to make sure that if that is available I'll choose that option.

[humphd]

There's no way we'll get to this in this heartbeat. Also, @flukeout and @cassiemc, fyi about this bug for later.