novactive/ezcloudinarybundle

Novactive eZ Cloudinary Bundle is an eZPlatform bundle for Images optimizations and manipulations.

Novactive eZ Cloudinary Bundle

This repository is what we call a "subtree split": a read-only copy of one directory of the main repository. It is used by Composer to allow developers to depend on specific bundles., _(*1)

If you want to report or contribute, you should instead open your issue on the main repository: https://github.com/Novactive/Nova-eZPlatform-Bundles, _(*2)

Documentation is available in this repository via .md files but also packaged here: https://novactive.github.io/Nova-eZPlatform-Bundles/master/CloudinaryBundle/README.md.html, _(*3)

, _(*4)

Novactive eZ Cloudinary Bundle is an eZPlatform bundle for Images optimizations and manipulations., _(*5)

This bundle brings the power of Cloudinary in your eZ Platform project., _(*6)

For this first version, the plugin allows you to define Cloudinary Variation on top of eZ Variations. Images stay on your servers but the SRC is adapted to make Cloudinary rendering/manipulating images., _(*7)

All the configuration is SiteAccessAware then you can have different one depending on the SiteAccess, _(*8)

INSTALL

Use Composer

Add the lib to your composer.json, run composer require novactive/ezcloudinarybundle to refresh dependencies., _(*9)

Then inject the bundle in the bundles.php of your application., _(*10)

    Novactive\Bundle\eZCloudinaryBundle\NovaeZCloudinaryBundle::class => [ 'all'=> true ],

Setup your credentials

nova_ezcloudinary:
    authentification:
        cloud_name: 'demo'
        api_key: "xxxxx"
        api_secret: "xxxx"

Usage

This bundle mimics the native image variation system., _(*11)

parameters:
    nova_ezcloudinary.default.cloudinary_variations:
            simpletest1:
                ezreference_variation: 'Native eZ Variation Name, ~ means original'
                filters: # look at the documentation on Cloudinary
                    width: 200
                    height: 200
                    gravity: 'face'
                    radius: 'max'
                    effect: 'sepia'
            simpletest2: # look at the documentation on Cloudinary
                ezreference_variation: 'medium' # Cloudinary manipulation are going to be base on the medium alias
                filters: # look at the documentation on Cloudinary
                    transformation:
                        width: 300
                        height: 300
                        effect: 'sepia'
                        radius: 'max'
                        fetch_format: 'auto'
                        angle: 45

In your template, _(*12)

    {{ ez_render_field( content, "image",{
        "parameters": {"alias": 'simpletest2'},
        "attr" : { "class" : "img-responsive" }
    }
    ) }}

Automatically, nova_ezcloudinary_alias will be used instead of ez_image_alias. The bundle fallback on the native Variation system if the alias name does not exist in cloudinary_variations, _(*13)

Then basically there is no change in your code, just yaml configuration for your Variation., _(*14)

if you have overrided the content_fields, be sure to update the call to nova_ezcloudinary_alias, _(*15)

Chained Transformations

Chained transformations can be done by adding an array to the configuration like so:, _(*16)

filters:
  transformation:
    - secure: 'true'
      crop: 'crop'
      height: 823
      width: 1920
      quality: 'auto:best'
    - crop: 'crop'
      y: 0
      x: 415
      width: 1234
      height: 823
      quality: 'auto:best'
    - crop: 'scale'
      width: 537
      height: 358
      aspect_ratio: '3:2'
      quality: 'auto:eco'

Local mode

This bundle uses the fetch mode of Cloudinary, then images have to be "reachable" to be converted. BUT, obviously your localhost is not public, to bypass that situation, we recommand the usage of ngrok, _(*17)

Let's assume your webserver listen on the TCP port 42080, _(*18)

$ ngrok http 42080

You will get something like: http://xxxxx.ngrok.io And you can set up that in the configuration:, _(*19)

parameters:
    nova_ezcloudinary.default.cloudinary_fecth_proxy:
        host: xxxxx.ngrok.io

you can do your own tunnel, here, but ngrok is really good at it, _(*20)

Local mode without Cloudinary

You can also disable all Cloudinary variations for you local usages, using only native ezplatform variation:, _(*21)

parameters:
    nova_ezcloudinary.default.cloudinary_disabled: true
    nova_ezcloudinary.default.cloudinary_fallback_variation: original # Will replace all unknown variation by original