☁️ Raketenstart Cloudinary

Asset Management, aber in cool!

👈 Jörn Meyer

Agenda

Nexus (DAM)

Wo die Wilden Bilder Wohnen

Nexus (DAM)

Bild rein, Bild raus

Ab geht die Post

Nexus (DAM)

Assets Organisieren: Ordner

  • Hierarchische Struktur
  • Jedes Asset kann nur in einem Ordner liegen
  • Zwei Ordner-Modi: fixed und dynamic

Nexus (DAM)

Assets Organisieren: Ordner

Fixed Folders Mode public_id ändert sich beim Verschieben
Dynamic Folders Mode public_id ändert sich nicht beim Verschieben

Nexus (DAM)

Assets Organisieren: Ordner

  • Folder Mode gilt pro Product
  • Kann nur von Cloudinary verändert werden
  • 🤓 Meinungsalarm: Dynamic Folders ist klar überlegen

Nexus (DAM)

Assets Organisieren: Collections

  • Thematische Sammlung von Assets
  • Asset kann in beliebig vielen Collections liegen
  • Collections können über Public Links aufgerufen werden,
    auch ohne Authorisierung
  • Quasi „Fotoalben”
  • Keinen Einfluss auf public_id

Nexus (DAM)

Detailansicht: Metadaten und Co.

Auf geht's, ab geht's!

Nexus (DAM)

Metadaten: Gutes Haus verliert nix

Nexus (DAM)

Metadaten

Embedded Metadata
Structured Metadata

Nexus (DAM)

Moderation: Du komms' hia net roin.

Transformationen

https://cloudinary.com/cookbook

Transformationen

URL-„Hacking”

https://res.cloudinary.com/dndndbkml/image/upload/c_crop,w_200/v1705938560/ig6qzxc0gvs6bxysmbm5.jpg
  • Cloud ID
  • Transformationen
  • Public ID

Cropping / Zuschneiden

Crop / Zuschneiden

fill

Füllt die angegebenen Abmessungen ohne Verzerrung zu füllen. Kann beschnitten werden.

c_fill,w_150,h_150

crop

Extrahiert einen Bereich der angegebenen Abmessungen aus dem Originalbild, ohne es zuvor zu verändern.

c_crop,w_150,h_150

thumb

Miniaturansicht des Bildes mit den angegebenen Abmessungen, basierend auf einer festgelegten "gravity". Kann skalieren.

c_thumb,g_face,z_0.75,h_150,w_150

auto

Ermittelt automatisch den besten Beschnitt basierend auf einer festgelegten Schwerkraft. Kann skalieren.

c_thumb,g_face,z_0.75,h_150,w_150

Resize / Skalieren

scale

Skaliert das Bild auf die angegebenen Abmessungen, ohne auf das Seitenverhältnis zu achten.

c_scale,h_150,w_150

fit

Verändert die Größe des Bildes, um innerhalb der durch die Abmessungen festgelegten Begrenzungsbox zu passen, unter Beibehaltung des Seitenverhältnisses.

c_fit,h_150,w_150

thumb

Verändert die Größe des Bildes, um innerhalb der durch die Abmessungen festgelegten Begrenzungsbox zu passen, unter Beibehaltung des Seitenverhältnisses. Falls das veränderte Bild nicht den gesamten Bereich ausfüllt, wird Padding angewendet.

c_pad,h_150,w_150

Transformationen

Welches Cropping / Resizing ist das richtige?

Im Zweifelsfall
thumb
¯\_(ツ)_/¯

Weitere Transformationen

shadow

Schlagschatten

w_150,h_150,e_shadow,x_5,y_5

radius

Runde Ecken

w_150,h_150,r_max

background_removal

Hintergrund entfernen

w_150,h_150,e_background_removal

Transformationen

Cloudinary Named Transformations

  • Selbstgedängeltes Infrastructure-as-Code-Tool!
  • yarn add \
    @kernpunkt/cloudinary-named-transformations
  • Achtung: .npmrc konfigurieren!
  • list (--detail)
  • upload <file>

Transformationen

Cloudinary Named Transformations

              
                {
                  "transformations": [
                    { 
                      "name": "rounded_corners", 
                      "transformation": "c_fill,g_face,w_300,h_300/r_max/f_png" 
                    }
                  ]
                }

MediaFlows

Automagische Bildbearbeitung

MediaFlows

  • Beta-Tool
  • Eigener Account nötig...aus Gründen?
  • „Zusammenklicken” von Logik-Bausteinen
  • Weittereichen von Parametern von Baustein zu Baustein
  • Verbesserungsbedürftiges Gewöhnungsbedürftiges Logging

MediaFlows

Triggers

Upload
DAM App
Webhook

MediaFlows

Beispiel 1: Wasserzeichen hinzufügen

MediaFlows

Beispiel 1: Wasserzeichen hinzufügen

Bild wird hochgeladen
Tag watermark vorhanden?
kernpunkt-Logo draufsetzen

MediaFlows

Beispiel 2: Automatische Moderation

MediaFlows

Beispiel 2: Automatische Moderation

Bild wird hochgeladen
Tag moderate vorhanden?
Bild akzeptabel?
Prima.
Löschen.

MediaFlows

Beispiel 3: Hintergrund entfernen

MediaFlows

Beispiel 3: Hintergrund entfernen

Bild(er) in DAM ausgewählt
Hintergrund entfernen
...that's it

MediaFlows

Beispiel 4: Avatar per Webhook

MediaFlows

Beispiel 4: Avatar per Webhook

JSON per Webhook übertragen
Bild von gravatar.com laden
Bild in Cloudinary erstellen
E-Mail in str. Metadaten

APIs & Libraries

Developer-Krempel

APIs & Libraries

Cloudinary CLI

APIs & Libraries

Cloudinary CLI

  • pip3 install cloudinary-cli
  • Authentifizierung über CLOUDINARY_URL Umgebungsvariable
  • Denkbar einfache Syntax
  • Keine Auto-Vervollständigung
  • Manche Features nur über CLI (oder API)

APIs & Libraries

React

APIs & Libraries

React

  • yarn add @cloudinary/url-gen @cloudinary/react
  • Cloudinary API
  • Cloudinary React-Komponenten

APIs & Libraries

React

  • Website für Fotografen
  • Alle Assets aus Ordner portraits
  • Kunden als Structured Metadata
  • Unterseiten für Kunden

Feedback

Miro

🙏 Vielen Dank.