Hacking Cloudinary APIs and ADD-ons

Slide 1

Slide 1 text

HACKING CLOUDINARY APIs AND ADD-ONS

Slide 2

Slide 2 text

HELLO! I am Obinna Ekwuno Media Developer Expert @ Cloudinary Technical Writer @ Scotch.io & LogRocket @obinnaspeaks 2

Slide 3

Slide 3 text

TALK GOALS ◎ Understand what Cloudinary does. ◎ Teach how Image manipulations use Transformations ◎ Basic understanding of Add-ons ◎ Learn to deliver Images like a Pro 3

Slide 4

Slide 4 text

WHAT IS CLOUDINARY? Image and Video optimization platform.

Slide 5

Slide 5 text

“ An Image is worth a thousand word. 5

Slide 6

Slide 6 text

“ A Fast , Optimized Image is worth a thousand words + a happy user. 6

Slide 7

Slide 7 text

CLOUDNIARY SERVICES ◎ Resource storage ◎ Image / Video Manipulation ◎ Transformations 7

Slide 8

Slide 8 text

IMAGE TRANSFORMATION

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Image Transformations ◎ Chain Transformations ◎ Lazy Transformations ◎ Eager Transformation ◎ Conditional Transformations 10

Slide 11

Slide 11 text

11 Image URL Format

Slide 12

Slide 12 text

12 Example of a Transformed Image URL

Slide 13

Slide 13 text

13 Chained Transformation

Slide 14

Slide 14 text

Slide 15

Slide 15 text

LAZY TRANSFORMATION

Slide 16

Slide 16 text

LAZY TRANSFORMATION PROCESS 16 APPLY TRANSFORMATION UPLOAD REQUEST FROM USER

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

EAGER TRANSFORMATION

Slide 20

Slide 20 text

EAGER TRANSFORMATION PROCESS 20 APPLY TRANSFORMATION UPLOAD DELIVER TO USER

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

23 URL EXAMPLE

Slide 24

Slide 24 text

CONDITIONAL TRANSFORMATION

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

26 URL SDK symbol Description eq = Equal to ne != Not equal to lt < Less than gt > Greater than lte <= Less than or equal to gte >= Greater than or equal to in|nin in|nin Included in | Not included in Compares a set of strings against the tags characteristic or against another set of strings.

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

28 MULTIPLE CONDITIONS

Slide 29

Slide 29 text

29 HANDLING CHAINED TRANSFORMATIONS

Slide 30

Slide 30 text

30 FALL BACK CONDITION WITH if_else TAG

Slide 31

Slide 31 text

IMAGE DELIVERY

Slide 32

Slide 32 text

GOALS ◎ Image Optimization. ◎ Responsive Images 32

Slide 33

Slide 33 text

IMAGE OPTIMIZATION f_auto AND q_auto

Slide 34

Slide 34 text

RESPONSIVE IMAGE Responsive Breakpoint Generator

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

AUTOMATING RESPONSIVE IMAGES DPR (Device Pixel Ratio) 36

Slide 37

Slide 37 text

Steps ◎ Install Cloudinary to your project (Include in script tag in index.html) ◎ Set Image tag parameter (data-src = Image URL ) - w_auto & c_scale ◎ Add cld-responsive class to image tag 37

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

40 SDK IMPLEMENTATION

Slide 41

Slide 41 text

41 SDK IMPLEMENTATION

Slide 42

Slide 42 text

CLOUDINARY ADD-ONS Cloudinary Object-Aware Cropping- Using the Gravity (g_auto) cropping 42

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Category Objects person person vehicle bicycle, car, motorbike, airplane, bus, train, truck, boat outdoor traffic_light, stop_sign, parking_meter, fire_hydrant, bench animal bird, cat, dog, horse, sheep, cow, elephant, bear, zebra, giraffe accessory backpack, umbrella, handbag, tie, suitcase sports frisbee, skis, snowboard, sports_ball, kite, baseball_bat, baseball_glove, skateboard, surfboard, tennis_racket kitchen bottle, wine_glass, cup, fork, knife, spoon, bowl food banana, apple, sandwich, orange, broccoli, carrot, hotdog, pizza, donut, cake chair, sofa, pottedplant, bed,

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Cloudinary Servers Servers 46

Slide 47

Slide 47 text

Summary Bring your images and videos to Cloudinary and we will give you the best quality with no increase in size or decrease in performance 47

Slide 48

Slide 48 text

48 THANKS! Any questions? You can find me at @Obinnaspeaks & [email protected]