Bilder

Dies ist die Dokumentation der Bild-basierten Elemente der UMCO Akademie.

Bild

Bild ohne Verlinkung

Frontend: Ein Bild, welches über die gesamte verfügbare Breite des Inhalts geht und bei kleineren Auflösungen entsprechend runterskaliert. Für eine klare Darstellung ist eine Mindestbreite von 800px (?) erforderlich. Bei schmaleren Bildern ist die Ausrichtung (siehe Inspektor) zu beachten.

Backend: Es sollte im Inspektor immer auch ein Alternativtext (kurze textliche Beschreibung des Bildinhalts) angegeben sein. Der Titel des Bildes ist optional. Der Beschreibungstext des Bildes aus der Mediathek kann ein- oder ausgeblendet und sogar im Frontend-Editor angepasst werden.

Anmerkungen: Hinzuzufügende Bilder müssen zunächst in der Mediathek hinterlegt sein. Sie können auch nachträglich über den Inspektor in die Mediathek hochgeladen werden (achte dabei auf die korrekte Auswahl von Sammlung und Tags).

Ein Platzhalter-Bild mit schwarzem Kreuz auf grauem Hintergrund

Bild mit Verlinkung

Frontend: Siehe "Bild ohne Verlinkung"´, außerdem kann das Bild verlinkt werden. Das heißt, dass man bei Klicken auf das Bild direkt an die im Inspektor verlinkte Seite weitergeleitet wird.

Backend: Um ein Bild zu verlinken gibt es im Inspektor die Möglichkeit einen Link einzufügen. Es sollte im Inspektor immer auch ein Alternativtext (kurze textliche Beschreibung des Bildinhalts) angegeben sein. Der Titel des Bildes ist optional. Der Beschreibungstext des Bildes aus der Mediathek kann ein- oder ausgeblendet und sogar im Frontend-Editor angepasst werden.

Anmerkungen: Hinzuzufügende Bilder müssen zunächst in der Mediathek hinterlegt sein. Sie können auch nachträglich über den Inspektor in die Mediathek hochgeladen werden (achte dabei auf die korrekte Auswahl von Sammlung und Tags).

Text mit Bild

Bilder, welche nicht über die gesamte verfügbare Breite gehen, werden vom Text umflossen. Sie können dabei linksbündig, rechtsbündig oder auch zentriert dargestellt werden.

Linksbündiges Bild

Frontend: Dies ist ein Bild, welches nicht über die gesamte, verfügbare Breite geht. Ist es ein linksbündiges Bild, wird es rechts vom Text umflossen.

Backend: Siehe "Bild ohne Verlinkung" oder "Bild mit Verlinkung", außerdem kann man auch in diesem Format das Bild verlinken.

Anmerkungen: Siehe "Bild ohne" oder "mit Verlinkung".

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rechtsbündiges Bild

Frontend: Dies ist ein Bild, welches nicht über die gesamte, verfügbare Breite geht. Ist es ein rechtsbündiges Bild, wird es links vom Text umflossen.

Backend: Siehe "Bild ohne Verlinkung" oder "Bild mit Verlinkung", außerdem kann man auch in diesem Format das Bild verlinken.

Anmerkungen: Siehe "Bild ohne" oder "mit Verlinkung".

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Zentriertes Bild

Frontend: Dies ist ein Bild, welches nicht über die gesamte, verfügbare Breite geht. Ist es ein zentriertes Bild, liegt es in der Mitte des Textes.

Backend: Siehe "Bild ohne Verlinkung" oder "Bild mit Verlinkung", außerdem kann man auch in diesem Format das Bild verlinken.

Anmerkungen: Siehe "Bild ohne" oder "mit Verlinkung".

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slider

Frontend: Dies ist ein Slider. Eine Sammlung von Bildern, welche über die gesamte, verfügbare Breite des Inhalts geht. 

Backend: Um den Slider zu befüllen, muss man über den Strukturbaum auf der linken Seite gehen. Nachdem man den Slider eingefügt hat, wählt man Inhaltssammlung unter dem Slider im Strukturbaum aus. Dadurch bekommt man die Möglichkeit ein "Neues Element in:" die Inhaltssammlung zu erstellen. Wählt man Bild Slide, kann man das Slide genauso befüllen wie bei den vorherigen Bildtypen. Auf diese Weise kann man beliebig viele Bildslides einfügen und befüllen. Alles weitere funktioniert genau wie bei den anderen Bildtypen.

Anmerkungen: An dieser Stelle darf man nicht vergessen, über den Strukturbaum auf der linken Seite zu operieren. Ansonsten ist es nicht möglich den Slider zu befüllen.

Workflow

Der folgende Workflow schildert den Eingabe-, Bearbeitungs- und Freigabe-Prozess von Bildern. Aktuell berücksichtigt er zwei Parteien, "Strg" und "Umco". "Strg" könnte auch eine andere Personengruppe sein, während "Umco" immer die Marketing-Abteilung von UMCO ist.

Wenn Bilder in Neos eingestellt werden sollen: 

  • Dateien ungeordnet (aber mit Indikator für das Thema im Dateinamen) in Austausch hochladen
  • Dateien im Austausch auf die entsprechende Sammlung ziehen (z.B. Umweltschutz, oder allgemein für _Seminare)
  • Dateien im Austausch auf die entsprechenden Tags ziehen (z.B. Inhalte: Einzelne, Inhalt: Gruppen)


Damit sind die Bilder korrekt kategorisiert. Was man tun kann (aber nicht unbedingt muss): 

  • Auswählen oder Optimieren des Bildes
  • Dateien einen Titel und einen ersten Beschreibungstext geben
  • Dateien auf Tag „Strg“ ziehen um zu markieren, dass das Bild von Strg-Seite aus final ist


Damit sind alle Bilder korrekt datiert. Um den Austausch frei zu bekommen: 

  • Marketing öffnet die Bilder im Austausch mit dem Tag „Strg“ einzeln - diese sind von uns soweit finalisiert
  • Wenn Metadaten und Zuordnung für Marketing prima sind, entfernt Marketing den Haken bei „Austausch“ und setzt den Haken bei „Umco“ 

Ergebnis

  • Alle mit „Umco“ getaggten Bilder sind freigegeben und u.U. schon live.
  • Alle mit „Strg“ getaggten Bilder sind in Bearbeitung durch oder finalisiert von Strg.