Usage

Once the module is installed and configured, the primary integration steps are modifying the Thymeleaf templates to make the necessary calls to pull the images from Cloudinary. There are two ways to accopmplish this:

1) Using the <blc:cloudinary-image...> tag.

This uses a Thymeleaf tag (called cloudinary-image) and allows you to pass in an assortment of tag attributes:

type - defines if img tag or div tag will be rendered. Possible values for this attribute are "image" or "background". This attribute can be skipped, in this case the img tag will be rendered. In case of type="background" div will be renedered with style attribute: style="background-image: url('CLOUDINARYURL')"_

align - standard img attribute

path - path to the image (required)

id - standard attribute

class - standard attribute

classappend - standard thymeleaf attribute

alt - standard attribute

title - standard attribute

placeholder - a url to another image, it will be rendered as another image in style tag after comma
E.g style="background-image: url('CLOUDINARYURL'), url('PLACEHOLDER URL'')"_

background-color - standard attribute

opacity - standard img attribute

width - width of the image - passed to Cloudinary

height - height of the image - passed to Cloudinary

crop-mode - a Cloudinary cropMode - values include scale, fit, mfit, fill, lfill, limit, pad, lpad, mpad, crop, thumb, imagga_crop, imagga_scale

transformation - param to send to cloudinary to get transformed image, you can specify either this attribute or width etc, not both.
This attribute will be rendered with data- prefix

note on width, height, crop-mode - These parameters are sent to cloudinary to resized image. You can specify all or width and/or height only.
These attributes will be rendered in the resulting tag with a data- prefix

note on background-color, opacity, placeholder - using these attributes with type="background" adds backgound color and opacity to generated style attribute

For example:

<blc:cloudinary-image type="image" id='myimage' path="image.png" transformation="w_400,h_400,c_crop,g_face,r_max/w_200"/>

Note that any attribute value starting with ${, *{, #{ , @{, ~{ will be pre-evaluated.

2) Using the CloudinaryThymeleafUtils url method.

The second approach is using an expression to render the image. The expression calls the url() method and can receive various parameters.

${@blCloudinaryThymeleafUtils.url(...)} or ${#cloudinary.url(...)}

The various signatures for url() include:

url(String path)
url(String path, Integer width, Integer height)
url(String path, Integer width, Integer height, String cropMode)    
url(String path, Float width, Float height)
url(String path, Float width, Float height, String cropMode)
url(String path, String transformation, boolean isNamedTransformation)    
url(String path, String transformation)

For example:

"${#cloudinary.url(IMG_URl, 70, 53,'w_400,h_400,c_crop,g_face,r_max/w_200' )}"