Bilder in Inhalte einbinden

Eingebettete und diskrete Bildanzeige

Die Software erlaubt eine eingebettete und diskrete Einbindung von Bildern.

Bei der diskreten Einbindung, werden die Bilder außerhalb des Textkörpers in einem gesonderten Container angezeigt. Der Vorteil dieser Anzeige ist die Animation und zufallsgesteuerte Anzeige von einzelnen Bildern oder Bildergruppen.

Bei der eingebetteten Anzeige von Bildern erscheinen Diese innerhalb des Textkörpers und können von dem Text umlaufen werden, wodurch die kontextuelle Dramaturgie des Dokuments gestaltet werden kann.

Für unser Beispiel ist Letzteres angestrebt, aber auf die erste Methode soll ebenfalls eingegangen werden.
Zusätzlich sollen die Bilder in zwei unterschiedlichen Größen vorliegen, um sie auch in einer Vergrößerung anzeigen zu können.

Die Dateien werden folglich zweimal und in unterschiedlichen Größen importiert. Gleichzeitig werden die Dateien mit unterschiedlichen Namenserweiterungen ausgestattet, die dem Administrator nachfolgend eine einfachere Erkennung der unterschiedlichen Dateien erlauben.

Voreinstellungen

Die Skalierung der Bilder während des Imports muss mit Voreinstellungen freigegeben werden, die im Backend über das Untermenü 'System' unter dem Befehl 'Vorgaben Datei Import' zu finden sind. Dort ist die Option 'Benutzer Skalierung zulassen' einzuschalten (Abb.01-0038):

Bilder VoreinstellungenAbb.01-0038

Bildverzeichnis anlegen und Dateien Hochladen

Als Speicherort für die gewünschten Bilddateien erstellen wir mit dem Dateimanager zunächst in dem Wurzelverzeichnis 'images' ein neues Unterverzeichnis 'redaktionelles'. Dort hinein importieren wir anschließend die gewünschten Bilddateien.

Beachten Sie, dass der Benutzer hier nur Verzeichnisse zu sehen bekommt, die in der Datenbank registrierter Importdateien eingetragen sind und für eine Benutzergruppe freigegeben wurden, der auch der jeweilige Benutzer angehört.

Lesen Sie dazu den Absatz 'Zugriffsberechtigungen für Dateiverzeichnisse'.

Wir öffnen wieder das Importformular des Dateimanagers, wählen die entsprechenden Dateien aus, und stellen die Parameter wie in folgender Abbildung gezeigt ein (Abb.01-0039):

Bilder hochladenAbb.01-0039

Das Importformular zeigt nun, nach Änderung der Voreinstellungen, Optionen für die Skalierung von Bilddateien an.

Für die Skalierung während des Imports wurden 320 Pixel eingestellt und die Namenserweiterung wurde mit '_320' angegeben. Der Standardwert für die Skalierung ist 400.

Die Trennzeichen der Namenserweiterungen werden nicht automatisch eingefügt. Es wird ausschließlich die Zeichenfolge verwendet, die eingegeben wurde.

Die angegebene Benutzergruppe steuert die Rechte auf die Administration der hochgeladenen Bilddateien (Nicht auf deren Anzeige).

Der Wert sichert die Diskretion zwischen den Autorengruppen ab und gewährleistet, dass unterschiedliche Arbeitsgruppen keinen Zugriff auf Dateien einer Gruppe erhalten der Selbst nicht angehören.
Benutzer, die gemeinsam Zugriff auf eine bestimmte Datei erhalten sollen, was für Bilder meistens zutrifft, müssen derselben Benutzergruppe angehören.

Nach dem Import können wir das Ergebnis im Dateimanager überprüfen (Abb.01-0040):

Bilder verwaltenAbb.01-0040

Der Dateimanager verfügt über eine Filtereingabe und einen Paginator. Auf Schauplätzen, die mitunter mehrere hundert Bilder enthalten können, ermöglicht erst die seitenweise Auflistung der Bilder die Anzeige in einer Vorschau. Die zusätzlich mögliche Filterung der Anzeigeliste durch eine Sucheingabe erleichtert die Auswahl bestimmter Bilder.

Dem Content Bilder zuweisen

Wir wechseln in den Contentmanager, rufen dort den Content der Reiseberichte auf, und öffnen den Content Editor für unseren Reisebericht nach Tunesien (Abb.01-0042).

Auf dem Registerblatt 'Bilder' betätigen wir die Textschaltfläche 'Zuweisen' und öffnen damit den Dateiauswahl-Dialog. Abbildung Abb.01-0042 zeigt den Content Editor einer früheren Version. Wer den Abschnitt 'Querverweise' gelesen hat wird feststellen, dass dort ein Registerblatt fehlt.

Mit dem Auswahlbaum des Dateiauswahl-Dialogs lassen wir uns das Verzeichnis mit den eben hochgeladenen Bildern anzeigen und selektieren in der Dateiauswahl alle Dateien, deren Namen in '_320' endet. Es handelt sich um die Dateien, die wir beim Import auf 320 Pixel Breite skaliert haben.

Wir schließen den Dialog mit 'Zuweisen' ab und haben die Bilder damit dem Inhalt zugewiesen. Die so zugewiesenen Bilder wird der Contentparser im Kopf des Inhalts untereinander und in einem gesonderten Container des Inhalts anzeigen.

Entscheidend für die Position des Bildcontainers ist die Einstellung der Optionsgruppe 'Innere Reihenfolge', die links in der Steuertafel des Content Editors zu sehen ist. Er kann in verschiedenen Positionen, beispielsweise vor dem Titel und auch nach dem eigentlichen Inhalt, auftreten.

Standardmäßig verwendet diese Optionsgruppe den Wert, der von den Voreinstellungen für Inhalte vorgegeben wird. Dort ist die Standardvorgabe so eingestellt, dass der Container mit den Bildern nach dem Titel des jeweiligen Inhalts erscheint.

Wie auch an anderer Stelle beschrieben: Inhalte sind als Absätze zu verstehen. Jedes Thema kann beliebig viele Inhalte anzeigen.

Bevor wir wieder ins Frontend wechseln, weisen wir den Bildern noch ihre Vergrößerungsbilder zu. Dazu wählen wir in der Bildauswahl des Contentmanagers das betreffende Bild aus und betätigen die Textschaltfläche 'Attribute' um das Hilfsformular für die Definition der Bildattribute anzuzeigen.

Als Großbild kann immer nur ein einziges Bild zugewiesen werden. Die Vergrößerungsbilder unterstützen keine Größenzuweisung weshalb Vergrößerungsbilder immer in der Größe angezeigt werden wie sie importiert wurden.

Die Situation ist in Abb.01-0042 dargestellt.

Vor dem Screenshot wurden, außer der Zuweisung des Vergrößerungsbildes, bereits weitere, erforderliche Einstellungen vorgenommen worden. So wurde der Wert von 'Anzeige' und der 'Umlaufposition' eingestellt. 'Anzeige' steuert die Css Eigenschaft 'display' und 'Umlaufposition' die Eigenschaft 'float'.

Mit dem Hilfsformular 'Bildattribute' können auch noch weitere Eigenschaften eingestellt werden, die in weiteren Abschnitten des Handbuchs beschrieben werden.

Lesen Sie dazu den Abschnitt 'Steuerung der Bildanzeige'.

Bilder zuweisenAbb.01-0042

Nachdem alle Bilder eingestellt wurden wechseln ins Frontend und sehen uns das Ergebnis an. Abbildung 01-0043 zeigt die Ansicht.