skip to content

Regional Computing Centre (RRZK)TYPO3 at University of Cologne

Bilder in Seiten einfügen

Legen Sie an der gewünschten Position innerhalb der Seite ein neues Inhaltselement vom Typ "Images Only" / "Bilder" (aus dem Tab "Typical page content") an. Es öffnet sich eine Dialogbox:

  • Im Tab "General" müssen Sie eine Überschrift für das Bild definieren, um das Element im Backend identifizieren zu können. Wenn diese Überschrift nicht im Frontend zu sehen sein soll, dann stellen Sie das Drop-Down-Menü Type auf "Hidden".
expand: Tooltip-Test

  • Im Tab "Images" können Sie über den Button "Add images" bereits hochgeladene Bilder aus der Dateiliste auswählen. Dafür öffnet sich ein Fenster, in welchem Sie alle Verzeichnisse und Unterverzeichnisse sehen, auf die Sie Zugriff haben. Klicken Sie auf den Namen eines Ordners, um dessen Inhalt zu sehen.
  • Falls Sie das gewünschte Bild noch nicht hochgeladen haben, können Sie im gleichen Tab stattdessen den Button "Select and Upload Files" verwenden, um dies nachzuholen.
  • Manchmal ist es sinnvoll ein Bild einzubetten, es aber nicht direkt in der maximal verfügbaren Größe darzustellen. Dafür steht Ihnen im Tab "images" die Option "Enlarge on Click" zur Verfügung, die eine Lightbox-Funktionalität aktiviert: Wenn die Option aktiviert wurde, genügt im Frontend ein Klick auf das Bild, um es in Originalgröße anzuzeigen.
expand:
Im Tab "Images" können Sie mit dem Button "Add Image" (1) ein bereits hoch geladenes Bild auswählen. Mit dem Button "Select & upload files" (2) können Sie ein Bild hochladen und direkt auswählen. Wenn Sie unter "Behavior" ein Häkchen für die Funktion "Click to enlarge" (3) setzen, werden Bilder so dargestellt, dass sie nach einem Klick vergrößert werden.

Nachdem Sie nun ein Bild aus der FileList ausgewählt haben, können Sie einzelne Informationen überschreiben. Klicken Sie dazu auf den Pfeil neben der verkleinerten Ansicht des Bildes. Wenn Sie beim Speichern des Bildes die entsprechenden Felder ausgefüllt haben, sind diese bereits vorausgefüllt. Sie können die angezeigten Felder überschreiben.

Der Feldname "Caption (Description)" ist hier irreführend: dort finden Sie den Inhalt des Feldes "Description" und nicht den Inhalt des hier nicht zu überschreibende Feldes "Caption". Darüber hinaus haben Sie die Möglichkeit, das Bild zu verlinken indem Sie das Feld "Link" ausfüllen.

expand:
Mit dem kleinen Pfeil (1) klappen Sie das eigentliche Menü auf. Danach können Sie den Title, den Alt-Text und die Description (irreführend als "Caption (Description)" markiert) bei Bedarf überschreiben. Sie können das Bild mit dem entsprechenden Feld (2) auch direkt verlinken.

Aus der Verwendung des Responsive Design ergibt sich eine wichtige technische Einschränkung: Sie können weder die exakten Abmessungen noch die exakte Position eines Bildes festlegen.

  • Im Tab "Appearance" / "Erscheinungsbild" stellen Sie im Drop-Down-Menü "Layout" lediglich die Breite des Bildes ein. Das geht nicht durch die Angabe von Pixeln, sondern muss in Prozent der Breite des übergeordneten Elements (in der Regel der Hauptspalte) erfolgen. Die proportionale Höhe wird automatisch berechnet. Sie können zwischen 33, 50, 67 und 100 Prozent wählen.
  • Die Position eines Bildes auf der Seite ist ebenso variabel. Ein Bild das auf einem PC-Bildschirm links neben einem Textblock angezeigt wurde, kann auf einem Smartphone ober- oder unterhalb des Textes erscheinen. In diesem Fall ist schlicht kein Platz vorhanden, um Bild und Text lesbar nebeneinander darzustellen.

Verzichten Sie deshalb auf Formulierungen, die sich auf eine konkrete Positionierung eines Bildes beziehen wie “Auf dem Bild links sehen Sie..”.

Eine Kontrolle über Umbrüche im Layout erhalten Sie durch Verwendung des Divider-Inhaltselements.

expand:
Im Tab "Appearance" wählen Sie vor allem über das Drop-Down-Menü "Layout" aus wieviel Prozent der verfügbaren Breite das Bild einnehmen soll. Die Menü-Elemente unter "Image Alignment" haben als Folge des Responsive Design Ansatz keine Funktion.

Im Tab "Metadata" können Sie das Feld Creator setzen. Weitere Felder in den Tabs "Metadata", "Camera Data" und "Categories" werden von TYPO3 Installationen des RRZK derzeit nicht ausgewertet.

Wie Sie Urheber- und Lizenzmarken an den Bildern auf Ihrer Webseite einfügen können, erfahren Sie auf der folgenden Webseite.

Contact
If you have any questions or problems, please contact the RRZK-Helpdesk