Assistant

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 über die Mediathek hochzuladen.

1. Navigieren Sie im Wordpress Backend zu Medien. Klicken Sie, um zur Mediathek zu gelangen
2. Klicken Sie entweder in der linken Seitenleiste, oder oberhalb der Mediathek auf den Button "Mediendatei hinzufügen".
3. Im gestrichelten Bereich "Dateien für den Upload bereitstellen" können Sie Dateien entweder per Drag & Drop von Ihrem Computer hineinziehen, oder drücken den Button "Dateien auswählen".

Gehen Sie wie folgt vor, um Bilder oder Dokumente von einer Inhaltsseite aus hochzuladen.

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 Inhaltsbereich des Editors 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.
   • Im Block-Editor (Gutenberg Editor) ziehen Sie die Bilder einfach an die gewünschte Stelle, bis ein blauer Balken erscheint. Lassen Sie los, um die Bilder einzufügen.

     

5. Die Mediathek öffnet sich mit den neuen Dateien als Auswahl.
   

   

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.
7. Die Bilder sind ab sofort hochgeladen.

Filtermöglichkeiten in der Mediathek

Darstellungsoptionen

• Wechseln Sie mit den Icons links im Filterbereich zwischen der Listen- und Kachelansicht
• In der Listenansicht haben Sie die Möglichkeit, Uploads u.a. nach Autor, Dateiname, Größe oder Datum zu sortieren. Klicken Sie dazu einfach auf die Pfeile im Headerbereich der Liste.

Filteroptionen

• Im Dropdown "Alle Schlagwörter" sehen Sie eine Auflistung Ihrer vergebenen Schlagwörter, nach denen Sie sortieren können
• Im Dropdown "Alle Medien" können Sie u.a. nach Bildern, Dokumenten, Videos und Archiven filtern
• Im Dropdown "Alle Daten" können Sie die Bildauswahl auf einen bestimmten Monat bzw. Jahr beschränken
• Im Dropdown "Alle Kategorien" sehen Sie eine Auflistung Ihrer vergebenen Kategorien, nach denen Sie sortieren können

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

Wie Sie PDFs hochladen und auf einer Inhaltsseite einbinden, erfahren Sie auf der Anleitungsseite zu PDFs.

Inhaltsverzeichnis

• Bilder in Inhaltsbereichen einbinden
• Mehrere Bilder als Galerie einbinden
• Videos einbinden
• Video-Tutorial

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 im klassischen Editor auf Dateien hinzufügen über der Editor-Werkzeugleiste. Die Mediathek öffnet sich. Im Block-Editor können Sie über den Block Inserter oder im Inhaltsbereich /bild eingeben, um ein Bild aus der Mediathek hinzuzufügen.

   

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.
   

   

8. Falls benötigt, ergänzen Sie das Feld Bildbeschriftung. Diese sollte vom Alternativtext leicht abweichen.
   

   

9. Scrollen Sie in der Eingabemaske nach unten.
   

   

10. Hier können Sie Bildausrichtung und Bildgröße wählen.
    

    

11. Bestätigen Sie mit dem Button "In die Seite einfügen" (Klassischer Editor) / "Auswählen" (Block-Editor)
12. Das Bild wurde an der gewünschten Position im Editor eingefügt.

Mehrere Bilder als Galerie einbinden

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.
   

   

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.

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
   Unbekannte Videoquelle

   .

3. Unter dem Video können Sie noch einen

   -Shortcode einsetzen, um mehr Weißraum zu erzeugen. Das Video wird dann an der entsprechenden Stelle angezeigt.

Video-Tutorial

Die Galerie-Funktion von WordPress erlaubt das Einfügen einer Bildergalerie in Seiten und Beiträgen. Wie die Galerie aussieht, wird vom Theme gesteuert.
Zudem gibt es Optionen, mit denen das Aussehen beeinflusst werden kann. Auf der Anleitungsseite zu Bildern erfahren Sie, wie Sie einzelne Bilder einbinden können.

Inhaltsverzeichnis

1. Galerien im klassischen Editor
   • Galerien im Grid-Format
   • Optionen der Standardgalerie

2. Galerien im Block-Editor
3. Video-Anleitung

Galerien im klassischen Editor

Die Darstellung der Galerie unterscheidet sich im klassischen Editor und im Block-Editor.
Wenn Sie vorerst die alte Darstellung der Galerien bevorzugen, müssen Sie den Galerie-Shortcode verwenden oder den klassischen Block einsetzen.

Code

Standardansicht

Die Standarddarstellung der Galerie erfolgt in Form eines Sliders. Von dieser Darstellung kann mit folgenden Optionen abgewichen werden.

Bildergalerie im Grid-Format

Standard type="grid"

Code

Der Standardtyp "grid" ohne Angabe von Columns wird eine Mindestbreite pro Bild festlegen und dann abhängig von der Bildschirmauflösung selbstständig umbrechen.
Außerdem ist nur bei dieser Form ein Hover-Effekt vorhanden, der das jeweilige Bild beim Überfahren mit der Maus etwas vergrößert.

Bei den folgenden Varianten hingegen wird versucht die angegebene Zahl an Bildern pro Zeile darzustellen; Dabei wird jedoch die Größe des Bildes variieren.
Wenn Bilder unterschiedliche Dimensionen haben, wird stets nur eine Reihe von Bildern dieselbe Höhe haben. Die Proportionen werden dabei soweit möglich eingehalten.

Häufiger in Verwendung kommen 3er oder 4er Grids:

Standard type="grid" mit Columns-Angabe: columns="3"

Im Backend kann man die Columns ändern. Diese werden beim WordPress-Default dazu verwendet, die Anzahl der Spalten festzulegen.

Beispiel

Code

Standard type="grid" mit Columns-Angabe: columns="4"

Im Backend kann man die Columns ändern. Diese werden beim WordPress-Default dazu verwendet, die Anzahl der Spalten festzulegen.
Die Parameter type="grid" columns="4" entsprechend type="4cols".

Beispiel

Code

Weniger nützlich sind die Formate mit 2 oder 5 Bilder pro Zeile:

Standard type="grid" mit Columns-Angabe: columns="5"

Im Backend kann man die Columns ändern. Diese werden beim WordPress-Default dazu verwendet, die Anzahl der Spalten festzulegen.

Beispiel

Code

Bildunterschrift anzeigen

Mit dem Attribut captions="true" lässt sich die Anzeige der Bildunterschriften aktivieren.
Diese Funktion steht sowohl in der Griddarstellung, als auch in der Sliderdarstellung der Galerie zur Verfügung.
Bei Nutzung der Griddarstellung werden diese unter allen Bildern gezeigt,l bei der Sliderdarstellung nur unter den aktiven Slide.

Beispiel

Code:

Abstand der Bilder abschalten

Mit der CSS-Klasse nospace kann der innere Abstand der Bilder entfernt werden. Somit erscheint die Bilderliste direkt zusammenhängend.

Beispiel mit Flexgrid

Code:

Beispiel mit 4cols

Code:

Optionen der Standardgalerie

Die Standard Bildergalerie kann über die folgenden Parameter beeinflusst werden:

• type="grid"
  Die Darstellungsoptionen mit dem Type Grid erlauben es, die Bilder ohne einem dynamischen SLider darzustellen. Beispiele hierzu entnehmen Sie der dazugehörigen Beispielseite.
• order="rand"
  Dies erlaubt es, die Bilder in Zufallsreihenfolge darzustellen. Diese Option kann über den Galerie-Wizard von WordPress eingestellt werden.
• nodots="true"
  Mit dem Parameter "nodots" lassen sich in der Standarddarstellung die Punkte, welche die einzelnen Bilder der Liste repräsentieren, abschalten.
• columns="n"
  Hier kann eine Zahl von 2 bis 5 eingetragen werden. Auf einer Desktop-Darstellung größer als 992 Pixel werden die Grafiken dann entsprechend der Zahl nebeneinander dargestellt. Diese Option kann über den Galerie-Wizard von WordPress eingestellt werden.

Beispiel der Option nodots="true"

Code

Weitere Variationen der Standardgalerie

Beispiele für die Nutzung der Galerie mit den drei verschiedenen Linkzielen (post, file, none) aus dem Wizard:

Beispiel ohne Link (Default)

Code:

Beispiel link="file"

Code:

Beispiel link="post"

Code:

Beispiel link="none"

Code:

Galerien im Block-Editor

Standardansicht

Die Standarddarstellung der Galerie erfolgt in Form eines Grid-Formats. Es werden keine Bilduntertitel oder Bildbeschreibungen angezeigt. In diesem Falle empfehlen wir, Bilder einzeln untereinander einzubinden.

Über die Block-Einstellungen haben Sie folgende Konfigurationsmöglichkeiten:

• Anzahl der Spalten festlegen
• Auflösung der Bilder
• Zufällige Reihenfolge
• Passendes Zuschneiden der Bilder

Video-Anleitung

In diesem Tipp-der-Woche Video erfahren Sie, wie Sie Grid-Galerien im klassischen Editor erstellen können.

Zitate in Form eines längeren hervorgehobenen Absatzes oder auch kurze Denksätze können im Editor mit dem Zitatzeichen oder direkt im HTML mit den Tag <blockquote> gekennzeichnet werden.

Beispiel

Dies ist ein Blockquote.
Ein längerer als Zitat gekennzeichneter Absatz mit Zitatangabe.
...
Zitationsangabe mit <cite>. Mit einem Link.

Dazugehöriger HTML-Code (über den Editor erzeugt)

<blockquote>Dies ist ein Blockquote.
Ein längerer als Zitat gekennzeichneter Absatz mit Zitatangabe.
...
<cite>Zitationsangabe mit <cite>. Mit einem <a href="#">Link</a>.</cite></blockquote>

Zitation im Absatztext

Ist gewünscht nur ein paar Worte in einem Absatz als Zitat hervorzuheben, wird das HTML-Element <cite> verwendet.

In dem vorherigen Satz wurde dazu das Wort "Zitat" entsprechend gekennzeichnet.

Absatzzitate ohne Quote-Zeichen

Das Zitat „Ich bin Pirat und mir geht’s gut. Am Tag packt mich die Stehlenswut.“ kommt aus dem Holzfäller-Lied (Original Lumberjack Song) von Monthy Python.
Hier heißt es „Ich bin Holzfäller und mir geht’s gut. Am Tag packt mich die Arbeitswut.“

Wikipedia

Dies wird erreicht, indem der HTML-Tag blockquote um die Klasse "noquote" ergänzt wird.

Code

<blockquote class="noquote">Dies ist ein Blockquote.
...
<cite>Zitationsangabe mit <cite>. Mit einem <a href="#">Link</a>.</cite></blockquote>

Blockquotes ohne Quotes werden insbesondere dann benötigt, wenn es darum geht, wissenschaftliche Formeln und ähnliches darzustellen. In diesen Fällen wäre ein Quotezeichen falsch.

Ebenso sind westeuropäische Quotezeichen nur bei westeuropäischen Texten sinnvoll.
Das folgende Beispiel zeigt dies bei chinesischen Text:

孤山寺北贾亭西
水面初平云脚低
几处早莺争暖树
谁家新燕啄春泥
乱花渐欲迷人眼
浅草才能没马蹄
最爱湖东行不足
绿杨阴里白沙堤

Code

<blockquote lang="cn">
孤山寺北贾亭西
水面初平云脚低
..
</blockquote>

Zur Darstellung von Formeln, Daten und Quellcode, die über eine eigene Textformatierung verfügen, sind die HTML-Elemente <pre> und <code>  nutzbar.

Die folgenden Beispiele zeigen deren Einsatz.

Code-Tag

Der folgende Text ist im Code-Tag: Dies ist im Code-Tag. Das kann durchaus auch länger sein. Und vielleicht ein Break enthalten:
. Aber ob das sinnvoll ist, ist eine andere Frage..

Code

<code>Dies ist im Code-Tag. Das kann durchaus auch länger sein. Und vielleicht ein Break enthalten: <br>. Aber ob das sinnvoll ist, ist eine andere Frage.</code>

Pre-Tag

Der folgende Text ist im Code-Tag:

Dies ist im Code-Tag. Das kann durchaus auch länger sein. Und vielleicht ein Break enthalten: 
. Aber ob das sinnvoll ist, ist eine andere Frage.

Code

<pre>Dies ist im Code-Tag. Das kann durchaus auch länger sein. Und vielleicht ein Break enthalten: <br>. Aber ob das sinnvoll ist, ist eine andere Frage.</pre>

Code in Pre

Beispiel:

Dies ist im Code-Tag. Das kann durchaus auch länger sein. Und vielleicht ein Break enthalten: 
. Aber ob das sinnvoll ist, ist eine andere Frage.

Code

<pre>Dies ist im Code-Tag. Das kann durchaus auch länger sein. <code>Und vielleicht ein Break enthalten: <br></code>. Aber ob das sinnvoll ist, ist eine andere Frage.</pre>

Die folgenden Klassen stehen zur Verfügung:

Standardausgabe

<ul>...<ul>

<ol>...<ol>

Ausgabe ohne Listenpunkte

<ul class="nolist">...<ul>

<ol class="nolist">...<ol>

Klasse Markercolor

<ul class="phil markercolor">...<ul>

<ol class="phil markercolor">...<ol>

Kontrastmarker

<ul class="med kontrastmarker">...<ul>

<ol class="med kontrastmarker">...<ol>

Spezialmarker für unsortierte Listen

<ul>

<ul><li class="symbol name">...<li><ul>

• Positiv mit

  class="positiv"

• Negativ mit

  class="negativ"

• Fragezeichen mit

  class="question"

• Ausrufezeichen mit

  class="exclamation"

• Paragraphenzeichen mit

  class="paragraph"

• Haken mit

  class="check"

• Kreuz mit

  class="cross"