Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hacking Cloudinary APIs and ADD-ons

Hacking Cloudinary APIs and ADD-ons

A brief introduction to using Cloudinary APIs in handling Media resources

F51de5c2338c052872065d71e6f677b3?s=128

Obinna Ekwuno

July 29, 2019
Tweet

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

  9. None
  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

  14. 14

  15. LAZY TRANSFORMATION

  16. LAZY TRANSFORMATION PROCESS 16 APPLY TRANSFORMATION UPLOAD REQUEST FROM USER

  17. 17

  18. 18

  19. EAGER TRANSFORMATION

  20. EAGER TRANSFORMATION PROCESS 20 APPLY TRANSFORMATION UPLOAD DELIVER TO USER

  21. 21

  22. 22

  23. 23 URL EXAMPLE

  24. CONDITIONAL TRANSFORMATION

  25. None
  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.
  27. None
  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

  35. None
  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
  38. 38

  39. 39

  40. 40 SDK IMPLEMENTATION

  41. 41 SDK IMPLEMENTATION

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

    42
  43. None
  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,
  45. 45

  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