Umgang mit Bildern

Bilder konnten Sie bisher - unter Umgehung (!) des Inhaltselementes "Text und Bilder" - mit Hilfe eines kleinen Funktionssymbols auch direkt im Texteditor (RTE) einbinden. Die Bilder wurden dann wie ein einzelnes Zeichen in einer Textzeile behandelt.

Bilder, die in dieser Weise "inline" im Texteditor eingebunden wurden, werden beim Migrationsprozess verloren gehen. Grund dafür ist, dass nur die Bild-Referenzen aus den Inhaltselementen "Text und Bilder" resp. "Nur Bilder" migriert werden können.


Kontakt

Das Webrelaunch-Team freut sich über Ihre Rückmeldungen, die dazu beitragen, eine noch bessere Universitäts-Website zu entwickeln.

E-Mail: webprojekt(at)uni-ulm.de
Support: Webformular

Probleme, die Sie vor dem Relaunch beseitigen sollten

Bitte überprüfen Sie Ihre Content-Elemente auf Inline-Bilder. Ein Beispiel ist in der nebenstehenden Abbildung zu sehen.

Sollten Inline-Bilder vorhanden sein, ändern sie bitte deren Verlinkung durch Nutzung des Inhaltselementes "Text und Bilder", das bereits jetzt und auch nach dem Relaunch zur Verfügung stehen wird.

Das Inhaltselement "Text und Bilder"

Step 0: Voraussetzung für das Einbinden von Bildern

Step 1: Auswahl des Inhaltselemente-Typs

Step 2: Ausfüllen der Registerkarte "Allgemein"

Step 3: Ausfüllen der Registerkarte "Bilder"

Step 4: Auswahl des Bildes / der Bilder

Step 5: Ergänzen der "Bild-Metadaten" auf der Registerkarte "Allgemein"

Step 6: Ausfüllen der Registerkarte "Erscheinungsbild"

Anmerkung: Die Registerkarten "Zugriff" und "Kategorien" sind für diesen Inhaltselementtyp unspezifisch und werden an anderer Stelle besprochen.


Step 0: Voraussetzung für das Einbinden von Bildern

Bilder, die Sie auf Ihren Webseiten präsentieren, sind wie Filme und Audio-Dateien oder wie z. B. PDF-Dokumente, die Sie als Download anbieten, eigenständige Dateien, die in Typo3 in einem speziellen Modul, der "Dateiliste" bereitgestellt werden müssen.

Wie Sie diese Dateiliste "befüllen", wird in einem => eigenen Anleitungsmodul erläutert.

Step 1: Auswahl des Inhaltselemente-Typs

  • Auf einer gewünschten Seite in einem gewünschten Layoutbereich ein neues Inhaltselement anlegen
  • Für eine Text-Bild-Kombination dabei den Typ "Text und Bilder" wählen

Step 2: Ausfüllen der Registerkarte "Allgemein"

  • Auf der Registerkarte "Allgemein" (A) eine Überschrift (B) für das Inhaltselement vergeben
  • Dabei den Überschriftentyp (C) bestimmen (h1 = Fettdruck im grauen Balken)
  • Im Formularfeld (D) den Text für das Element eingeben

Step 3: Ausfüllen der Registerkarte "Bilder"

  • Auf der Registerkarte "Bilder" (E) die Funktion "Bild hinzufügen" (F) wählen
  • Gfs. die Klickvergrößerung (G) aktivieren, so dass auf der Seite ein - im Vergleich zum Originalbild in der Dateiliste - verkleinertes Bild gezeigt wird, das aber auf Mausklick hin in einem eigenen PopUp-Fenster vergrößert dargestellt wird

Step 4: Auswahl des Bildes / der Bilder

  • Step 3 (F) verzweigt in das Modul "Dateiliste"; im dortigen "Verzeichnisbaum" und seinen Ordnern (H) das gewünschte Bild suchen
  • Gfs. "Vorschaubilder" aktivieren (I) , um bei Bilddateien kleine thumbnail-Vorschaubilder zu sehen
  • Mit einem direkten Mausklick auf einen Bilddatei-Namen (J) wird ein Bild in das Inhaltselement übernommen
  • Alternative - insbesondere für die schnelle Übernahme mehrerer Bilder geeignet:
    Eine oder mehrere Checkboxen (K) vor den Dateinamen aktivieren und die Bilder mit "Auswahl importieren" (L) übernehmen
  • Der Auswahlprozess kann, wenn viele Bilder auszuwählen sind, mit "Auswahl umkehren" (L) optimiert werden

    Step 5: Ergänzen der "Bild-Metadaten" auf der Registerkarte "Allgemein"

    • Nach der Übernahme (J) resp. (L) erscheint das Bild auf der Registerkarte "Bilder" - u. U. mit mehreren anderen Bildern zusammen in einer Liste (M)
    • Drei kleine Bearbeitungssymbole (N) erscheinen bei "mouse-over":
      Papierkorb: löscht das Bild (nur in diesem Inhaltselement)
      Glühbirne: versteckt / verbirgt / deaktiviert das Bild
      Liste: bestimmt mit gedrückter Maus bei mehreren Bildern deren Reihenfolge
    • Mit dem kleinen Dreieck vor dem Vorschaubild wird das Formularfeld mit den Metadaten des Bildes auf- und zugeklappt (O); zu den Metadaten gehören:
    • Das optionale Feld "Titel" (P) enthält den Text einer Quick-Infobox, die bei "Maus über Bild" angezeigt wird
    • Das optionale Feld "Link" (Q) enthält das Hyperlinkziel für einen Mausklick auf das Bild; dieser Link hat Vorrang vor der "Klickvergrößerung"
    • Das Feld "Alternativer Text" (R) ist wichtig für die Barrierefreiheit einer Webseite; der Text wird von Screenreadern vorgelesen
    • Das optionale Feld "Beschreibung" (S) enthält eine Bildunterschrift, die in einem grauen Balken unter dem Bild erscheint
      Farbiger Teststreifen zur Monitorfarbeinstellung
      Bild 17: Teststreifen

      Step 6: Ausfüllen der Registerkarte "Erscheinungsbild"

      Einträge auf der Registerkarte "Erscheinungsbild" (T) betreffen folgende Eigenschaften:

      • "Oberer Abstand" und "Unterer Abstand" (U) - in Pixeln anzugeben - bestimmen über den vertikalen Abstand des gesamten Elementes zu vorhergehenden resp. nachfolgenden Inhaltselementen, so dass beispielsweise zwei Bilder aus zwei verschiedenen Inhaltselementen nicht "hart" aneinander "kleben"
      • Mit "Breite" und "Höhe" (V) - in Pixeln anzugeben - lassen sich Bilder kleiner darstellen als sie im Original in der Dateiliste vorliegen.
        - Dabei reicht es aus entweder die Breite ODER die Höhe anzugeben; der jeweils zweite Parameter wird automatisch proportional "richtig" angepasst
        - Breite und Höhe bei 0 zu belassen bedeutet, das das Bild in Originalgröße angezeigt wird
        - Die Bildmaße über die Originalgröße des Bildes in der Dateiliste hinaus zu vergrößern ist nicht möglich
      • Das Auswahlmenü (W) für "Position und Ausrichtung" erklärt sich durch seine anschaulichen Symbole
      • Die Ausrichtung einer Bildunterschrift resp. aller -unterschriften (X) bestimmt über linksbündig, zentriert etc.
      • Bei mehreren Bilder kann die "Anzahl der Spalten" (Y) angepasst werden
      • Bei mehreren Bildern ist wählbar, ob die Bilder in einem gleichmäßigen Raster gezeigt werden, oder ob auf "Horizontale Reihen" (Z) verzichtet wird, d. h. weniger hohe Bilder "nach oben hin aufrücken"