Hacking Cloudinary APIs and ADD-ons

A brief introduction to using Cloudinary APIs in handling Media resources

Transcript

1. HACKING CLOUDINARY APIs AND ADD-ONS
2. HELLO! I am Obinna Ekwuno Media Developer Expert @ Cloudinary Technical Writer @ Scotch.io & LogRocket @obinnaspeaks 2
3. 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
4. WHAT IS CLOUDINARY? Image and Video optimization platform.
5. “ An Image is worth a thousand word. 5
6. “ A Fast , Optimized Image is worth a thousand words + a happy user. 6
7. CLOUDNIARY SERVICES ◎ Resource storage ◎ Image / Video Manipulation ◎ Transformations 7
8. IMAGE TRANSFORMATION
10. Image Transformations ◎ Chain Transformations ◎ Lazy Transformations ◎ Eager Transformation ◎ Conditional Transformations 10
11. 11 Image URL Format
12. 12 Example of a Transformed Image URL
13. 13 Chained Transformation
15. LAZY TRANSFORMATION
16. LAZY TRANSFORMATION PROCESS 16 APPLY TRANSFORMATION UPLOAD REQUEST FROM USER
19. EAGER TRANSFORMATION
20. EAGER TRANSFORMATION PROCESS 20 APPLY TRANSFORMATION UPLOAD DELIVER TO USER
23. 23 URL EXAMPLE
24. CONDITIONAL TRANSFORMATION
26. 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.
28. 28 MULTIPLE CONDITIONS
29. 29 HANDLING CHAINED TRANSFORMATIONS
30. 30 FALL BACK CONDITION WITH if_else TAG
31. IMAGE DELIVERY
32. GOALS ◎ Image Optimization. ◎ Responsive Images 32
33. IMAGE OPTIMIZATION f_auto AND q_auto
34. RESPONSIVE IMAGE Responsive Breakpoint Generator
36. AUTOMATING RESPONSIVE IMAGES DPR (Device Pixel Ratio) 36
37. 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
40. 40 SDK IMPLEMENTATION
41. 41 SDK IMPLEMENTATION
42. CLOUDINARY ADD-ONS Cloudinary Object-Aware Cropping- Using the Gravity (g_auto) cropping 42
44. 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,
46. Cloudinary Servers Servers 46
47. 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
48. 48 THANKS! Any questions? You can find me at @Obinnaspeaks & obinnacodes@gmail.com