As part of Cloudinary API, we can manipulate the images just by using the URL parameter settings, as we did on the books page:
Go to
http://localhost:3000/books
.Open your web inspector and check the rendered code for the first image; you will see the following code:
<img src="http://res.cloudinary.com/n6b/image/upload /c_fill,e_brightness:20,h_200,q_80,r_5,w_280/v1/cities/sample01.jpg .png" class="materialboxed initialized" height="200" width="280">
The API creates the img
tag and applies the object properties defined in app/views/books.swig
as URL parameters, as we can see in the following code:
{{ cloudinary.image(item.image.public_id, { width: 280, height: 200, quality: 80,crop: 'fill',format:'png', effect: 'brightness:20', radius: 5, class:'materialboxed' }) | safe }}
Object property |
URL parameter |
width: 280 |
|
height: 200 |
|
crop: fill |
|
quality: 80... |