Cludinary image undescore methods

[Piermaria Cosina]

On the documentation there is not enough example to understand how to use the undescores method

I'm able to get the object in the view like img(src="#{data.yacht.cover.url}")

but I don't get how to use for example the thumbnail method should be something like this?

cover: { type: Types.CloudinaryImage, autoCleanup : true, thumbnail(50,50) }?

I need to have a thumbnail image for a post, what should I do, resize the image at the upload? or get a smaller image dynamically?

Can you provide some example of the cloudinary undescore methods? 

[Simon Widjaja]

Hi Permaria,

I spent the last couple of hours with Keystone and Cloudinary. BIG fan so far.

You don't have to modify the image before upload. That's what Coudinary can do for you before delivering the images...

To use all the Cloudinary goodness just use the API when displaying an image.

Example:

Assuming you have an image called "heroImage" you can set the image properties like this:

data.item._.heroImage.fill(768, 300, {quality: 40, gravity: 'center'})

Check out all available options/modes:

http://cloudinary.com/documentation/image_transformations

And it gets even better. I wanted to show different image variations of the same image in a responsive environment. 

The following Jade code was the perfect solution. It works like a charme! So no unnecessary bandwith will be used.

  //- Hero image (optional)
  if data.item.heroImage.exists
    div(style="width: 100%; position: relative;")
      style
        |@media screen and (max-width: 768px) {
        |  .marketing-action-hero {
        |     background: url(#{data.item._.heroImage.fill(768, 300, {quality: 40, gravity: 'center'})}) center center no-repeat;
        |     height: 300px;
        |  }
        |}
        |@media screen and (min-width: 769px) {
        |  .marketing-action-hero {
        |     background: url(#{data.item._.heroImage.fill(1920, 600, {quality: 40, gravity: 'center'})}) center center no-repeat;
        |     height: 600px;
        |  }
        |}
      div.marketing-action-hero

Happy Coding!

Simon