{"action":"opened","issue":{"url":"https://api.github.com/repos/humphd/brackets/issues/197","labels_url":"https://api.github.com/repos/humphd/brackets/issues/197/labels{/name}","comments_url":"https://api.github.com/repos/humphd/brackets/issues/197/comments","events_url":"https://api.github.com/repos/humphd/brackets/issues/197/events","html_url":"https://github.com/humphd/brackets/issues/197","id":68451253,"number":197,"title":"Implement MVP of Visual Image Picker extension","user":{"login":"humphd","id":427398,"avatar_url":"https://avatars.githubusercontent.com/u/427398?v=3","gravatar_id":"","url":"https://api.github.com/users/humphd","html_url":"https://github.com/humphd","followers_url":"https://api.github.com/users/humphd/followers","following_url":"https://api.github.com/users/humphd/following{/other_user}","gists_url":"https://api.github.com/users/humphd/gists{/gist_id}","starred_url":"https://api.github.com/users/humphd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/humphd/subscriptions","organizations_url":"https://api.github.com/users/humphd/orgs","repos_url":"https://api.github.com/users/humphd/repos","events_url":"https://api.github.com/users/humphd/events{/privacy}","received_events_url":"https://api.github.com/users/humphd/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-04-14T17:38:14Z","updated_at":"2015-04-14T17:38:14Z","closed_at":null,"body":"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.\r\n\r\nThere are a bunch of things we could do to make this easier, including:\r\n* 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\r\n* connect to popular image search APIs and allow searching and picking images directly from within the editor\r\n* allow the user to take their own picture [using their computer's camera](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)\r\n\r\nWe'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.\r\n\r\nFirst, here is what Khan does in their [HTML Image lesson](https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-html/p/html-images)\r\n\r\n![screen shot 2015-04-14 at 1 13 54 pm](https://cloud.githubusercontent.com/assets/427398/7142782/fc984b8a-e2a8-11e4-8254-4169b84414c4.png)\r\n\r\nClicking on \"Pick Image...\" brings up a modal dialog:\r\n\r\n![screen shot 2015-04-14 at 1 14 50 pm](https://cloud.githubusercontent.com/assets/427398/7142789/0855e130-e2a9-11e4-8841-6eda43a4caf8.png)\r\n\r\nHere 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.\r\n\r\nIn the [Popcorn Maker case](https://popcorn.webmaker.org/), a search box allows the user to query the Flickr and Giffy APIs (among others), preview the results, and visually choose an image:\r\n\r\n![screen shot 2015-04-14 at 1 15 18 pm](https://cloud.githubusercontent.com/assets/427398/7142819/3e87dc4a-e2a9-11e4-9962-fdcbe4f5d248.png)\r\n\r\nI'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:\r\n\r\n* https://github.com/dnbard/brackets-lorem-pixel\r\n* https://github.com/VincentLoy/brackets-lorem-picsum\r\n* https://github.com/VincentLoy/brackets-ui-faces-and-names\r\n* https://github.com/jspartak/custom-placeholdit-for-brackets.phit/\r\n* https://github.com/joepenzo/DEVimg-for-Brackets\r\n\r\nI 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.\r\n\r\n@mjschranz, @ScottDowne, would you be willing to add thoughts to this bug on what would be involved in stealing the code from Popcorn Maker?\r\n\r\ncc @davidascher"}}