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
   

   View Slide

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

   View Slide

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
   

   View Slide

4. WHAT IS
   CLOUDINARY?
   Image and Video optimization
   platform.
   

   View Slide

5. “ An Image is worth a
   thousand word. 5
   

   View Slide

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

   View Slide

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

   View Slide

8. IMAGE
   TRANSFORMATION
   

   View Slide

9. View Slide

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

    View Slide

11. 11
    Image URL Format
    

    View Slide

12. 12
    Example of a Transformed Image URL
    

    View Slide

13. 13
    Chained Transformation
    

    View Slide

14. View Slide

15. LAZY
    TRANSFORMATION
    

    View Slide

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

    View Slide

17. View Slide

18. View Slide

19. EAGER
    TRANSFORMATION
    

    View Slide

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

    View Slide

21. View Slide

22. View Slide

23. 23
    URL EXAMPLE
    

    View Slide

24. CONDITIONAL
    TRANSFORMATION
    

    View Slide

25. View Slide

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.
    

    View Slide

27. View Slide

28. 28
    MULTIPLE CONDITIONS
    

    View Slide

29. 29
    HANDLING CHAINED
    TRANSFORMATIONS
    

    View Slide

30. 30
    FALL BACK CONDITION WITH if_else TAG
    

    View Slide

31. IMAGE DELIVERY
    

    View Slide

32. GOALS ◎
    Image Optimization.
    ◎
    Responsive Images
    32
    

    View Slide

33. IMAGE
    OPTIMIZATION
    f_auto AND q_auto
    

    View Slide

34. RESPONSIVE
    IMAGE
    Responsive Breakpoint Generator
    

    View Slide

35. View Slide

36. AUTOMATING
    RESPONSIVE
    IMAGES
    DPR (Device Pixel Ratio)
    36
    

    View Slide

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
    

    View Slide

38. View Slide

39. View Slide

40. 40
    SDK IMPLEMENTATION
    

    View Slide

41. 41
    SDK IMPLEMENTATION
    

    View Slide

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

    View Slide

43. View Slide

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,
    

    View Slide

45. View Slide

46. Cloudinary Servers
    Servers
    46
    

    View Slide

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
    

    View Slide

48. 48
    THANKS!
    Any questions?
    You can find me at
    @Obinnaspeaks &
    obinnacodes@gmail.com
    

    View Slide