Ghost: ✨ Unsplash Integration

[JohnONolan]

Bringing the magic of the Unsplash API to Ghost

---

---

Master TODO List:

(Once these things are done, it's done)

• [x] 2 col breakpoint at 940px
• [x] 1 col breakpoint at 540px
• [x] If editor does not have focus, insert image at the very end, not the very beginning
• [x] Settings in Apps to enable/disable and add API key
  
  
  
  • [x] only show toolbar/feature image icons when enabled)
  
  
• [x] Allow Unsplash images to be used for post feature images
• [x] Add "zoom" view for images
• [x] Basic error handling (display message somewhere when request fails)
• [x] Fix image cards not having a height until image has loaded
• [x] Vertically centre loading spinner within available space
• [x] Load more images at a time + have an earlier trigger (don't want to wait around)
• [x] Add support for image captions to Casper
• [x] Ensure compliance with Unsplash API guidelines
• [x] Be able to close main Unsplash window with Esc key
  
  
  
  • [x] Esc key disabled if you're currently zoomed-in to a photo
  
  

[JohnONolan]

Leaving this here as a thinking-out-loud thing, probably not for now, but for future:

How unsplash.com handles it:

Makes sense. But don't need that level of complexity to begin with

[kevinansfield]

Load more images at a time + have an earlier trigger (don't want to wait around)

We're loading 30 at a time which is the maximum the API is allowing (I tried setting per_page=50 but it only gave me 30 back 😬). Can definitely add the earlier trigger though

[kevinansfield]

@AileenCGN a couple of notes for the Unsplash settings integration when you're up 😄

• had a brief chat with @ErisDS regarding the unsplash API key exposed via the config endpoint and we agreed it's not the best place because it's accessible publicly. We thought adding a configuration/private endpoint that is behind authentication would be a better place for this and any future api keys. For the client-side implementation it should be possible by:
  
  
  
  
  
  1. adding a fetchPrivate() method to the config service then using something like assign({}, publicConfig, privateConfig)) to merge the private keys with the public keys on the content object
  
  
  2. calling config.fetchPrivate() in an RSVP.all() along with settings.fetch() any time the client becomes become authenticated (a project search for ('settings').fetch() should show all of the occurrences) - this won't be particularly DRY but don't worry about that at the moment, we can refactor when we remove the oauth logic
     
     
  
  
• the slack settings were set up as an array (I think) because it was envisioned that we may eventually have multiple slack configurations for different things. For the unsplash settings we'll only have one settings so it may be better to make it an object rather than an array of objects - that should alleviate the pain of remembering to use .firstObject everywhere

[aileen]

the slack settings were set up as an array (I think) because it was envisioned that we may eventually have multiple slack configurations for different things. For the unsplash settings we'll only have one settings so it may be better to make it an object rather than an array of objects - that should alleviate the pain of remembering to use .firstObject everywhere

We should probably refactor the slack settings for this in a different PR as well. I very much doubt that we're going to add more keys to this currently.

[JohnONolan]

Maybe OTT - maybe not: IF a photo is being inserted at the END of the document - Can we insert 2 newlines after it \n\n ? Eg:

[jloh]

Is the plan for this that when a user selects/decides on an image, Ghost will download that image into the users blog locally or will it just be served through unsplash directly?

Just curious since if its the latter and the image gets removed from unsplash it'll leave us with 404's!

[kevinansfield]

@jloh Unsplash's API terms state that they prefer hotlinking to their CDN so we need to do that for compliance. We do however have a button to download the image too so if you find an image you like you can click that, download the image to your local machine then upload to your blog, we're just not able automate that.

[nuclearpengy]

This is going to be a winner of a feature.