• Navigation überspringen
  • Zur Navigation
  • Zum Seitenende
Organisationsmenü öffnen Organisationsmenü schließen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
  • FAUZur zentralen FAU Website
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
  • RRZE
  • Videoportal
  • Lageplan und Anfahrt
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
Menu Menu schließen
  • Grundlagen
    • Rahmenbedingungen für Webauftritte
    • Über WordPress
      • Grundsätzliches zum Webpublishing
    • Login und Navigation im Backend
      • Profil
      • Dashboard
      • Der Customizer
    • Benutzer anlegen und bearbeiten
    • Seiten
      • Eine Seite erstellen
      • Mehrere Seiten gleichzeitig konfigurieren
      • Seiten und Beiträge freigeben
    • Beiträge
    • Sidebar
    • Inhalte bearbeiten
      • Mediathek
      • Bilder
      • Galerie
      • Tabellen
      • Zitate
      • Formeln, Daten und Quellcode
    • Seitenstruktur erstellen
    • Menüs
    • Widgetbereiche und Widgets
    • Häufig gestellte Fragen
    Portal Grundlagen
  • Plugins
    • Plugins aktivieren
    • Externe Daten einbinden
      • Calendar
      • CRIS
      • FAU oEmbed
      • Jobs
      • Lehrveranstaltungen
      • Remoter
      • Statistik
      • UnivIS
      • Video
    • Neue Inhaltstypen erstellen
      • Expo
      • FAQ
      • Glossary
      • Person
      • Legal (ehemals ToS – „Terms of Service“)
      • RSVP
      • Synonym
    • Inhaltsseiten mit Funktionen erweitern
      • Contact Form 7
      • Downloads
      • Elements
      • Multilang
      • Advanced Editor Tools
      • Verfallsdatum für Beiträge („Post-Expiration“)
    • Zugang beschränken
      • Access Control
      • Private Site
    • Beiträge teilen
      • Auto-Tweet
      • RSS
    • Spezialplugins
      • Newsletter
      • Progressive Web-App (PWA)
      • The SEO Framework
      • Workflow
      • WS Form
    • Über Externe Plugins
    • Über FAU- und RRZE-Plugins
    Portal Plugins
  • Themes
    • FAU Einrichtungen
      • Umsetzungsbeispiele
      • Templates
      • Portalmenüs
      • Bildlinks (Logos einbinden)
      • Shortcodes
    • FAU Events
      • Startseite
      • Widget-Bereiche und Footer-Inhalt
      • Referenten und Vorträge
      • Shortcodes für Referenten und Vorträge
      • Call for Papers
      • Externe Anmeldeformulare einbinden
    • Francesca – Ein Theme für Kooperationen
    Portal Themes
  • Entwicklung
    • Design
      • Farben (Markendesign 2021)
      • Logos
      • Schriften
    • Einsatzkontext (Statistik)
      • Einrichtungsbezeichnungen
    • Versionsverwaltung Git
    • Einheitliche Vergabe von Versionsnummern
    • Vorgaben an Themes
    • Vorgaben an Plugins
    • Eigene Testinstanz
    • Serverkonfiguration
    • Statistiken zu Webauftritten
    Portal Entwicklung
  • Vorlagen
    • Akkordeons
    • Ansprechpartner & Kontakte
      • Format Kompakt
      • Runde Kacheln
      • Format Sidebar
      • Klassische Darstellung
    • Beiträge ausgeben
    • Button
    • Icon & Iconboxen
    • Kurze Hinweise
    • Testimonials
    • Textboxen
    Portal Vorlagen
  • Tutorials
    • Schnelleinstieg FAU Events
    • Publikationsliste erstellen
    • Tipps und Tricks
    • Neue Daten in die FAU-Karte einbinden
    • Vortragsliste erstellen
    • Schnelleinstieg FAU Einrichtungen
      • Vorbereitungen
      • Navigation im Backend
      • Ein Theme auswählen
      • Seitenlogo und Seiteninformationen ergänzen
      • Eine Startseite erstellen
      • Rechtstexte generieren
      • Inhaltsseiten erstellen für Anfänger
      • Beiträge und die dynamische Sidebar
      • Abmessungen für Bilder und Grafiken
      • Beiträge und die dynamische Sidebar
      • Portale und die Seitennavigation
      • Suchmaschinenoptimierung in 5 Minuten
      • Blogroll und Finetuning
    • Barrierefreiheit
      • Vorwort und Überblick
      • Einführung und Hintergründe
      • Bereitstellung und Pflege von Inhalten
      • Entwicklung und Design
      • Organisatorische und rechtliche Anforderungen
      • Satzungen
      • Tests der Barrierefreiheit
      • Weitere Leitfäden und relevante Informationsangebote
      • Kurzanleitung zur Verbesserung der digitalen Barrierefreiheit in Dokumenten aus Büroanwendungen
    • SEO – Search engine optimization
      • SEO Inhalte gestalten
      • SEO Grundlagen
      • SEO und Barrierefreiheit
    • MeinStudium
    Portal Tutorials
  1. Startseite
  2. Grundlagen
  3. Inhalte bearbeiten
  4. Bilder

Bilder

Bereichsnavigation: Grundlagen
  • Rahmenbedingungen für Webauftritte
  • Über WordPress
    • Grundsätzliches zum Webpublishing
  • Login und Navigation im Backend
    • Profil
    • Dashboard
    • Der Customizer
  • Benutzer anlegen und bearbeiten
  • Seiten
    • Eine Seite erstellen
    • Mehrere Seiten gleichzeitig konfigurieren
    • Seiten und Beiträge freigeben
  • Beiträge
  • Sidebar
  • Inhalte bearbeiten
    • Mediathek
      • Ein Beitragsbild anpassen
    • Bilder
      • Abmessungen für Bilder und Grafiken
      • Hover Effekte von Bildern
      • Zusatzklassen für Bilder
    • Galerie
      • Bildergalerie im Gridformat
      • Optionen der Standardgalerie
    • Tabellen
    • Zitate
    • Formeln, Daten und Quellcode
    • Listen
  • Seitenstruktur erstellen
  • Menüs
  • Widgetbereiche und Widgets
  • Häufig gestellte Fragen
    • FAQ Login und Benutzerverwaltung
    • FAQ Inhalte erstellen
    • FAQ Anzeige und Darstellung
    • FAQ Suchmaschinenoptimierung (SEO)

Bilder

Support und Beratung

Webteam

Webteam

  • E-Mail: webmaster@fau.de
Beschreibung: Für alle Fragen rund um WordPress, Webhosting & Co.

Wenn es um Bildeinbindung geht, führt kein Weg um die Mediathek. Hier lernen Sie, wie Sie Bilder in Ihrer Webseite einpflegen können.

Inhaltsverzeichnis

  • Bilder und Dokumente in die Mediathek laden
  • Bilder in Inhaltsbereichen einbinden
  • Mehrere Bilder als Galerie einbinden
  • Dokumente (z.B. PDFs) auf einer Inhaltsseite einbinden
  • Videos einbinden
Leider unterstützt Ihr Browser keine HTML5-Videoformate. Rufen Sie dazu das Video Bilder und Dokumente und Galerien aus dem Videoportal der FAU auf.

Bilder und Dokumente in die Mediathek laden

Bilder in den Formaten .jpg und .jpeg werden automatisch beim Upload für das Netz optimiert und verkleinert. Bilder im .png-Format behalten Ihre vollständige Dateigröße bei.

Gehen Sie wie folgt vor, um Bilder oder Dokumente in die Mediathek zu laden.

  1. Navigieren Sie auf die Inhaltsseite, auf welcher die Bilder eingebunden werden sollen.
  2. Öffnen Sie auf Ihrem Computer den Ordner, mit den gewünschten Bildern, die hochgeladen werden sollen.
  3. Klicken Sie im Editorfenster auf die Position, an welcher das Bild eingefügt werden soll.
  4. Ziehen Sie die Bilder in das WordPress Editorfenster und lassen Sie die Maustaste los, wenn der Text „Dateien für den Upload bereitstellen“ im Editorfenster erscheint.
    Der Editor zeigt den Schriftzug Dateien für den Upload bereitstellen, nachdem Dateien von der Festplatte in den Editor gezogen werden.
  5. Die Mediathek öffnet sich mit den neuen Dateien als Auswahl.
    Eine Bildschirmaufnahme der Mediathek in WordPress. Auf der rechten Seite sieht man die Anhang-Details. Auf der linken Seite sieht man Kacheln mit bereits hochgeladenen Bildern und Dateien.
  6. Falls es sich um kein dekoratives Bild handelt: Vergeben Sie einen Alternativtext in der rechten Spalte. Im Tipp der Woche erfahren Sie mehr über die Vergabe von Alternativtexten ebenso wie in unserem Artikel: „Der perfekte Alt-Text: Wir haben sechs blinde und sehbehinderte Menschen gefragt, welche Bildbeschreibungen ihnen wirklich etwas bringen.“
  7. Die Bilder sind ab sofort hochgeladen.

Bilder in Inhaltsbereichen einbinden

Nachdem die Bilder in die Mediathek geladen wurden, können Sie diese wie folgt auf Inhaltsseiten einbinden:

  1. Navigieren Sie auf die Inhaltsseite, auf welcher die Bilder eingebunden werden sollen.
  2. Positionieren Sie den Textcursor an die Position, an welcher das Bild eingebunden werden soll.
  3. Falls Sie das Bild noch nicht hochgeladen haben, folgen Sie die der Anleitung im Abschnitt „Bilder und Dokumente in die Mediathek laden“.
  4. Falls das Bild bereits in die Mediathek geladen wurde, klicken Sie Dateien hinzufügen über der Editor-Werkzeugleiste. Die Mediathek öffnet sich.
    Ein Screenshot der WordPress Mediathek.
  5. Falls Sie sich im „Dateien hinzufügen“ Reiter befinden: Wechseln Sie in den Reiter Mediathek, um ein bestehendes Bild auszuwählen.
  6. Wählen Sie das gewünschte Bild aus der Mediathek aus, welches eingebunden werden soll.
  7. Falls es sich um ein nicht dekoratives Bild handelt: Vergeben Sie einen Alternativtext über die Eingabemaske in der rechten Spalte.
    Ein Screenshot der Mediathek. Auf der rechten Seite sieht man einen Bereich der Anhang-Details. Das erste Feld steuert die Ausgabe des Alternativtextes.
  8. Falls benötigt, ergänzen Sie das Feld Bildbeschriftung. Diese sollte vom Alternativtext leicht abweichen.
    Ein Screenshot der Anhangdetails. Auf der rechten Spalte ist das Feld Beschriftung hervorgehoben.
  9. Scrollen Sie in der Eingabemaske nach unten.
    Ein Screenshot der Mediathek. Man sieht ein Scroll-Symbol, dass darauf hinweist, dass man in der Spalte auf der rechten Seite nach oben scrollen kann.
  10. Hier können Sie Bildausrichtung und Bildgröße wählen.
    Ein Screenshot der Mediathek. Auf der rechten Seite, am Ende der Spalte ist der Bereich Anzeigeeinstellungen für Anhänge hervorgehoben.
  11. Bestätigen Sie mit dem Button „In die Seite einfügen“
  12. Das Bild wurde an der gewünschten Position im Editor eingefügt.

Mehrere Bilder als Galerie einbinden

(Vergrößern)
Bildbeschriftung
(Vergrößern)
(Vergrößern)
(Vergrößern)
Bildbeschriftung

Um mehrere Bilder als Galerie einzubinden, gehen Sie wie folgt vor:

  1. Falls die gewünschten Bilder noch nicht in die Mediathek geladen wurden: Folgen Sie der Anleitung im Abschnitt Bilder und Dokumente in die Mediathek laden.
  2. Navigieren Sie auf die Inhaltsseite, auf welcher die Galerie eingebunden werden soll.
  3. Klicken Sie auf Dateien hinzufügen über der Editor-Werkzeugleiste.
  4. Die Mediathek öffnet sich. Falls Sie im Reiter „Dateien hochladen“ sind, wechseln Sie in den Reiter Mediathek
  5. Klicken Sie in der linken Navigation auf Galerie erstellen.
    Ein Screenshot der Mediathek. Am linken Rand ist der Menüpunkt Galerie erstellen an der zweiten Position hervorgehoben.
  6. Wählen Sie alle gewünschten Bilder aus, die in der Galerie eingebunden werden sollen.
  7. Klicken Sie Neue Galerie erstellen in der unteren rechten Ecke des Mediathek-Fensters.
  8. Vergeben Sie eine Beschriftung für die einzelnen Bilder.
  9. Passen Sie die Galerie-Einstellungen am rechten Rand an.
  10. Klicken Sie Galerie einfügen.
  11. Die Galerie wurde im Inhaltsbereich eingefügt.

Dokumente (z.B. PDFs) auf einer Inhaltsseite einbinden

Achten Sie darauf, dass der Dateiname von PDF-Dateien idealerweise keine Sonderzeichen enthält. Manchmal können auch Umlaute dafür sorgen, dass die Mediathek eine PDF-Datei nicht einbinden kann. In diesen Fällen einfach den Dateinamen ändern und erneut in die Mediathek hochladen.
  1. Falls die gewünschten Dokumente noch nicht in die Mediathek geladen wurden: Folgen Sie der Anleitung im Abschnitt Bilder und Dokumente in die Mediathek laden.
  2. Navigieren Sie auf die Inhaltsseite, auf welcher die PDF eingebunden werden soll.
  3. Klicken Sie auf Dateien hinzufügen über der Editor-Werkzeugleiste.
  4. Die Mediathek öffnet sich. Falls Sie im Reiter „Dateien hochladen“ sind, wechseln Sie in den Reiter Mediathek
  5. Wählen Sie das Dokument aus, das eingebunden werden soll.
  6. Klicken Sie in die Seite einfügen am unteren rechten Rand der Mediathek.
  7. Das Dokument wurde korrekt verlinkt.
  8. Passen Sie gegebenenfalls den Linktext an, damit der Linktext „sprechend“ ist.
    • Negativbeispiel: „Hier“, „PDF“ oder „Dokument“.
    • Besser: In unserem Ratgeber zur Bildeinbindung (pdf) können Sie mehr erfahren.

Videos einbinden

Zwar können Videos auch über die Mediathek eingebunden werden, allerdings gibt es bessere Alternativen, um ein Video einzubinden. Gleichzeitig sparen Sie sich so wertvollen Speicherplatz auf Ihrer CMS-Instanz. Gehen Sie wie folgt vor:

  1. Laden Sie Ihr Video als öffentlichen Clip im Videoportal hoch. Hier finden Sie eine Anleitung zur Nutzung des Videoportals.
    Alternativ kann auch YouTube oder z.B. Vimeo genutzt werden. Allerdings werden YouTube-Videos erst nach Einwilligung des Nutzers dargestellt.
  2. Binden Sie das Video mithilfe unseres Videoplugins ein. Hierfür aktivieren Sie das Videoplugin in der Pluginübersicht und verwenden den Shortcode [fauvideo url="..."].
  3. Unter dem Video können Sie noch einen [divider]-Shortcode einsetzen, um mehr Weißraum zu erzeugen. Das Video wird dann an der entsprechenden Stelle angezeigt.

Weitere Hinweise zum Webauftritt

Social Media

  • RSS Feed
  • GitHub
  • Twitter

Noch Fragen?

Schreiben Sie uns eine Mail an webmaster@fau.de. Wir beantworten Ihnen alle offenen Fragen rund um unser Content Management System (CMS), WordPress, Webhosting und Co.

Regionales Rechenzentrum Erlangen
(RRZE)

Martensstraße 1
91058 Erlangen
  • Kontakt
  • Webworking Blog
  • Impressum
  • Datenschutz
  • Barrierefreiheit
  • RSS Feed
  • GitHub
  • Twitter
Nach oben