search

superawesomelabs / leo

Highly Extensible, Declarative Static Site Generator
103 stars 6 forks source link

Image Handling #6

Open ChristopherBiscardi opened 8 years ago

ChristopherBiscardi commented 8 years ago

We have img-loader, but we want more.

The Blog Post content type should have handling for Featured Images. What do these featured images look like?

How can we achieve Preview Photos? Removing the jpeg headers is probably not an option for us initially. HTML pages will need to render the blurred version of the photo and the "real" version likely won't load until the javascript does.

We also need to do this for images inside markdown, which means the solution we use for the featured image is going to have to be included in a markdown-it plugin as well. This points to building a re-usable library to achieve this affect.

Update Jan 21, 2015

There are, roughly speaking, 3 TODOs here

  1. Implement imagemagick-loader
  2. Implement a React Element (<Magick />) which provides a declarative interface to imagemagick-loader
  3. Implement a Markdown-It plugin which adds the equivalent of <Magick /> to the markdown syntax
    • Implement React Element (<MagickReader />) that provides an easy way to consume imagemagick-loader output (which should be json, since it'll come back from the API)

      ImageMagick Loader

A Webpack loader that processes images in all sorts of ways. Allowing require('what.png?max-width=960') type statements, which will be generated by the markdown and react interfaces.

This element would accept an image src and attributes that map to the loader options.

<Magick src='./whatever.png'>
  <Size max-width='960px' />
  <Size max-width='480px' />
</Magick>

which compiles to an img tag with srcset declarations.

Markdown-It Plugin

Roughly same as above.

Includes a React element that accepts a spread json object (supplied from a graphql query)

ChristopherBiscardi commented 8 years ago

There are a number of APIs that exist to serve the purpose of image translation. Examples below:

Cloudinary

cloudinary

http://res.cloudinary.com/demo/image/fetch/w_365,h_140,c_fill,r_20,e_saturation:50,f_auto/http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg
imgix

imgix-example

https://assets.imgix.net/examples/clownfish.jpg?auto=format&dpr=1&fit=crop&h=580&ixjsv=2.1.0&q=60&w=1140
ChristopherBiscardi commented 7 years ago

https://www.npmjs.com/package/sharp