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.

Die Mediathek effizient verwalten

Um auch bei vielen Uploads den Überblick zu behalten, gibt es einige Möglichkeiten, Ihre Mediathek zu organisieren. Zur besseren Auffindbarkeit können Sie ihre Uploads kategorisieren und verschlagworten. Für Medien steht Ihnen diese Option mit dem RRZE Downloads Plugin zur Verfügung.

1. Über Dashboard | Medien können Sie Kategorien und Schlagwörter erstellen.
2. Wenn Sie ein Bild in der Mediathek öffnen, können Sie dort eine zuvor angelegte Kategorie oder Schlagwörter zu einer Datei hinzufügen, oder diese dort neu hinzufügen
3. Anschließend können Sie in der Mediathek über die Dropdowns nicht nur nach Medientypen oder Datum sortieren, sondern auch nach Ihren Kategorien oder Schlagwörtern.

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.

Tipp: Sortieren Sie nach Größe, um schwere Dateien zu identifizieren und mehr Speicherplatz einzusparen. Nicht genutzte Dateien können Sie schnell über die Spalte "Hochgeladen zu" ausfindig machen und gegebenenfalls entfernen.

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.

Inhaltsverzeichnis

1. Bilder in Inhaltsbereichen einbinden
   • Mit Bild & Text arbeiten

2. Mehrere Bilder als Galerie einbinden
3. Videos einbinden
4. Video-Tutorial

Bilder im Inhaltsbereich 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. Öffnen Sie den Block-Inserter über das blaue Plus oben links und suchen Sie den Block "Bild". Oder tippen Sie in einem freien Bereich /bild um den Block schnell einzufügen.
3. Laden Sie ein Bild von Ihrem Computer hoch, wählen Sie ein bestehendes Bild aus der Mediathek oder fügen Sie ein Bild über die URL hinzu.

Anhang-Details ausfüllen

1. Falls es sich um ein nicht dekoratives Bild handelt: Vergeben Sie einen Alternativtext über die Eingabemaske in der rechten Spalte.
   
2. Falls nötig, ergänzen Sie eine Bildunterschrift. Das können Sie aber auch nachträglich über die Blockwerkzeugleiste erledigen.
3. Geben Sie die Copyright- bzw. Urheberrechtsinfo des Bildes in das Feld "Beschriftung" ein.
   
4. Scrollen Sie im Bereich "Anhang-Details" nach unten und fügen Sie ggf. Kategorien und Schlagwörter hinzu.
   
5. Bestätigen Sie das Einsetzen des Bildes über den Button "Auswählen".
6. Um die Position des Bildes im Inhaltsbereich zu verändern, verschieben Sie den Bildblock einfach per Drag & Drop.

Mit Bild und Text arbeiten

Im neuen Theme und im Block-Editor ist es nicht mehr möglich, Text um Bild fließen zu lassen. Standardmäßig werden Bilder und Texte untereinander dargestellt. Um Ihre Inhaltsseite visuell interessanter zu gestalten oder aufzulockern, können Sie die folgenden Blöcke nutzen. Sie können innerhalb der Blöcke auch verschiedene andere Blöcke einfügen, zum Beispiel Buttons.

Medien & Text Block

Im Medien & Text Block können Sie im Gegensatz zum regulären Bildblock oder anderen Bild & Text-Blöcken auch Bilder im Portraitformat einsetzen. Zudem lässt sich das Bild über den Regler problemlos skalieren.

Textspalten

Auch innerhalb des Textspalten-Blocks können verschiedene andere Blöcke eingesetzt werden. Eingesetzte Bilder setzen jedoch ein Seitenverhältnis von 3:2 voraus.

Spalten

Auch im Spalten-Block wird ein Seitenverhältnis von 3:2 für Bilder vorausgesetzt.

Eine Bildgalerie einbinden

Stellen Sie sicher, bereits einige Bilder in die Mediathek geladen zu haben. Gehen Sie anschließend wie folgt vor:

1. Navigieren Sie auf die Inhaltsseite, auf welcher die Galerie eingebunden werden soll.
2. Klicken Sie auf das blaue Plus oben links, um den Block-Inserter zu öffnen.
3. Suchen Sie nach dem Block "Galerie" und klicken oder ziehen Sie ihn, um den Block in den Inhaltsbereich einzufügen.
4. Es öffnet sich nun die Mediathek. Wählen Sie alle Bilder per Klick aus, um sie zur Galerie hinzuzufügen. Sie können auch neue Bilder hochladen.
5. Unterhalb der Kacheln sehen Sie die Bilder, die Sie ausgewählt haben.
6. Klicken Sie auf den Button "Neue Galerie erstellen".
7. Im nächsten Screen können Sie für die Bilder optional noch Untertitel ergänzen.
8. Klicken Sie auf den Button "Galerie einfügen", um die Galerie in den Inhaltsbereich einzusetzen.
   

Der Galerie-Block im Theme FAU Elemental unterscheidet sich von der gewohnten Raster-Ansicht. Die Bilder werden im Großformat ausgegeben und können über die Pfeile links und rechts navigiert werden.

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 FAU.tv hoch. Hier finden Sie eine Anleitung zur Nutzung des Videoportals.
2. Alternativ kann auch YouTube genutzt werden. YouTube Videos können erst nach Einwilligung des Nutzers angezeigt werden.
   
3. Binden Sie das Video mithilfe unseres Videoplugins ein. Hierfür aktivieren Sie das Videoplugin in der Pluginübersicht und verwenden anschließend den Block "Video".
4. Um mehr Weißraum unterhalb des Videos zu erzeugen, können Sie den Block "Abstandshalter" verwenden.

Video-Tutorial

Die Video-Anleitung bezieht sich auf den Klassik-Editor und ältere Themes.

Zitate werden verwendet, um Fremdaussagen optisch und semantisch korrekt darzustellen. Sie können den Zitat-Block verwenden, um:

• ein wörtliches Zitat wiederzugeben (z.B. aus Interviews oder Artikeln)
• eine zentrale Aussage hervorzuheben
• Testimonial-Texte (z.B. Stimmen von Studierenden) darzustellen

Zitat-Block

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

Testimonial-Block

Im neuen Theme FAU Elemental empfehlen wir, statt des regulären Zitat-Blocks den neuen Block FAU Testimonial zu verwenden. Der Testimonial-Block kann auch mit einem Bild versehen werden. Sie haben zudem die Möglichkeit, mehrere Zitate hinzuzufügen um den Block als Zitat-Slider zu verwenden.

Zitat im Code-Editor

Zitate können im Code-Editor über <blockquote></blockquote> eingebunden werden. Die folgenden Beispiele sind möglicherweise veraltet und funktionieren nur noch im Klassik-Editor oder im Block-Editor über die Code-Ansicht, welche bei Aktivierung des Block-Editors jedoch standardmäßig nicht mehr verfügbar ist. In Ausnahmefällen kann der Code-Editor über den Websupport aktiviert werden.

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

Dies wird erreicht, indem der HTML-Tag blockquote um die Klasse "noquote" ergänzt wird. 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"