Code Monkey home page Code Monkey logo

craft3-cloudinary's Introduction

Cloudinary Volume for Craft 3

THIS IS STILL IN DEVELOPMENT. USE WITH CAUTION.

This will add a new asset volume for Cloudinary and supports srcset generation.

Using in Twig

Use craft.cloudinary.transform(image, sizes, options) in your twig templates.

Where:

  • image is a Craft Asset Model
  • sizes is an array of sizes you want to generate this image as. This also supports any cloudinary option per size.
  • options is an array of additional options including any cloudinary option that you want to apply to all sizes.

Example:

{% set result = craft.cloudinary.transform(image, [{width:375, height:675, quality: 80},{width: 1440, height: 675}], {scaleAndCrop: true}) %}

This example will return an array with the following keys:

  • src
  • alt
  • srcset

Where srcset is only applicable if you supplied more than one size. Every size must have at least a width specified, even if using Cloudinarys transformation array, this will be used for the srcset generation.

Using in Plugins

Include Cloudinary with:

use futureactivities\cloudinary\Plugin as Cloudinary;

and then use:

Cloudinary::getInstance()->transform->image($image, $sizes, $options);

Additional Options

The options parameter can be used to specify additional cloudinary options to apply to all sizes.

You can also add the following custom options:

  • scaleAndCrop - Setting this to true will adjust the sizes array to first scale and then crop using the Craft 3 focal points.

Twig Filters

The transform method will return an array that you can use in your image tag. Optionally a twig filter has been provided to generate this for you:

{{ craft.cloudinary.transform(image, [{width:375, height:675},{width: 1440, height: 675}], {scaleAndCrop: true}) | buildImg }}

The filter also supports the following parameters:

  • sizes - the value of the sizes attribute

craft3-cloudinary's People

Contributors

paul-blundell avatar nzimelimited avatar brandonkelly avatar mthomas546 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.