Wordpress:Bilder und Galerien einfügen: Unterschied zwischen den Versionen

Aus VeloWikiRuhr
Wechseln zu: Navigation, Suche
(Bilder barrierefrei einfügen)
K (Bilder barrierefrei einfügen)
 
Zeile 14: Zeile 14:
 
[[Bild:Alt-Text.png]]
 
[[Bild:Alt-Text.png]]
  
An anderer Stellte heißt das Feld nicht <code>Alternativtext</code> sondern </code>Alternativer Text</code>
+
An anderer Stellte heißt das Feld nicht <code>Alternativtext</code> sondern <code>Alternativer Text</code>
  
 
<references/>
 
<references/>

Aktuelle Version vom 17. April 2017, 21:04 Uhr

Es dürfen nur Bilder verwendet werden, 
* die von dir selbst sind oder 
* für es eine explizite Erlaubnis gibt oder
* deren Lizenz die Verwendung zu lässt.
Also im Zweifelsfall ein Bild nicht verwenden. Auch Vorsicht bei Bildern aus der Mediathek. Eventuell dürfen die nur in einem speziellen Beitrag verwendet werden.

Bitte die Erlaubnis E-Mails oder Quellseiten dauerhaft aufheben und/oder Albert einen Link zur Quelle senden bzw. die E-Mail weiter leiten.

Bilder barrierefrei einfügen

Es macht ein wenig Arbeit und man sieht erst einmal nichts, aber blinde und sehbehinderte Besucher*innen der Webseite werden dankbar sein, wenn Bilder barrierefrei eingefügt werden. Nur durch die Einfügung eines Alt-Textes bekommen sie Zugang zu den Bildinhalten. "Zwar gibt es nicht den einen richtigen Alternativtext, da jeder Mensch seine eigene Vorstellungskraft hat. Jedoch kann der Alternativtext mehr oder weniger geschickt gewählt werden. Hier gibt es Tipps zum Formulieren treffender Alt-Texte."[1]

Ein entsprechendes Eingabefeld lässt sich z. B.: direkte nach dem Upload in der Mediathek befüllen:

Alt-Text.png

An anderer Stellte heißt das Feld nicht Alternativtext sondern Alternativer Text

  1. Müller, Anna 2017: 6 Tipps zur Barrierefreiheit – unsere Learnings der Lean Dus mit Jan Hellbusch; Sipgate Blog

Bilder in Kommentaren einbinden

Man kann in den Kommentaren natürlich auf Bilder verlinken:

BildimKommentaren1.png

Schicker ist es jedoch, sie einzubinden. Wer den html-Code <img src="http://..." alt="Beschreibung des Bildes" />" im Kopf hat, kann das einfach in das Kommentarfeld eingeben, was im folgend mit dem Backend realisiert wird.

Hinweis: Auf die Einbindung externer Bilder bitte verzichten, da wir darüber keine Kontrolle haben.

Weg 1

  1. Zuerst muss das Bild im Backend hochgeladen werden. Dafür gibt es mehrere Wege:
    1. Man geht auf Medien und lädt das Bild hoch. Wer es ordentlich mag, verknüpft es dann dort noch mit dem zugehörigen Beitrag. Einfach in der Spalte Hochgeladen zu auf Verknüpfen klicken.
    2. Wer mehrere Bilder mit dem Beitrag verknüpfen will, kann auch über Beiträge den Beitrag aufrufen zum bearbeiten und die Fotos dort über Dateien hinzufügen hochladen ohne sie dann einzufügen.
  2. In der Mediathek kann man das Bild anklicken und findet dann rechts die Datei-URL. Diese kann man kopieren. Einfach ein paar Buchstaben markieren, STRG + A drücken und dann STRG + C.
  3. In das Backend gehen und dort auf Kommentare. Wenn man mit der Maus auf den Kommentar fährt, erscheinen Bearbeiten-Funktionen:BildimKommentaren2.png
    Dort auf Bearbeiten klicken.
  4. Nun kommt man zu einem Editorfenster:BildimKommentaren3.png
    Wenn man nun auf img klickt, kann man die URL eingeben. Im nächsten Fenster kann man eine Beschreibung eingeben. Das ist für Leute hilfreich, die aufgrund einer Sehbeeinträchtigung Screenreeder nutzen und aus irgendwelchen Gründen keine Fotos angezeigt bekommen. Anschließend auf Aktualisieren klicken. Nun ist das Bild eingebunden:

Voilà.

BildimKommentaren4.png


Weg 2

  1. Beim Beitrag, den ihr kommentieren wollt (oder wo ein Bild ergänzt werden soll im Kommentar), klickt ihr auf Bearbeiten (je nachdem wo ihr seid, ist das an einer anderen Stelle).
  2. Unter der Texteingabe gibt es den Button Kommentar hinzufügen bzw. wenn ihr auf einen Kommentar antworten wollt, mit der Maus auf den Kommentar fahren und dort auf Antworten klicken.
  3. Aus dem Dateimanager einfach das Bild auf die Kommentartextfläche ziehen und der Mediaupload öffnet sich.
  4. Bilder wie gewohnt einfügen
  5. Die Teile [caption id="attachment_7121" align="aligncenter" width="800"] und [/caption] entfernen

Mehrere Bilder als Galerie einfügen

Wenn das Galerie-Plugin noch nicht aktiviert ist, muss es aktiviert werden und das Layout in der ersten Galerie an das Seitenlayout angepasst werden

Bitte keine Bildergalerie erstellen über Medien hinzufügen - Galerie erstellen. Das sieht unsexy aus und bricht das einheitliche Layout.

  1. Nach dem gewohnten Upload über Medien hinzufügen die Mediathek bitte wieder schließen. Vorher nicht vergessen, in Bildunterschrift wenigstens den Fotonachweis einzufügen. Dieser hat auf velocityruhr.net die Form (Foto: Maxi Mustermann). Nähere Beschriftungen kommen davor. Soweit erforderlich, muss auch die Lizenz hier angegeben werden. Das ist bei fast allen CC-Lizenzen z. B. der Fall. Optimalerweise verlinkt man auf die Lizenz: (Symbolbild: Deutsche Fotothek‎, <a href="http://creativecommons.org/licenses/by-sa/3.0/de/deed.en" title="Creative Commons Attribution-Share Alike 3.0 de">CC BY-SA 3.0 de</a>, https://commons.wikimedia.org/w/index.php?curid=6542529)
  2. Nun links im Menü auf Gallery by Supsystic - Neue Galerie gehen.
    Galerieeinfügen2.png
  3. Im neuen Ansichtsbereich auf den Bereich Neue Galerie klicken, einen präzisen Titel festlegen und anschließen auf Speichern klicken.Galerieeinfügen3.png
  4. Im nun nächsten Ansichtsbereich auf Bilder hinzufügen klicken. Dann erscheint ein Pop-Up-Fenster, in dem ihr auf Importiere aus der WordPress Medienbibliothek müsst.
  5. Wähle alle Bilder aus. Wenn man die SHIFT-Taste drückt, kann man zwei Bilder markieren und alle Bilder zwischen diesen werden eingefügt. Wenn man die STRG-Taste drückt beim Anklicken, kann man gezielt einzelne Bilder auswählen und auch wieder abwählen. Dann auf Choose Imageklicken.
  6. In der Übersicht kann man mit der Maus vorne auf das Bild klicken und die Reihenfolge verändern.
  7. Nun auf Einstellungen klicken, dann auf Import Settings, im Pop-Up-Fenster eine bestehende Galerie auswählen und die Einstellungen importieren.
  8. Es gibt nun zwei Wege die Galerie einzufügen.
    1. In der Übersicht zu den Gallerie-Einstellungen sieht man links eine Kurzcode. Dein einfach kopieren und in der Text-Ansicht einfach einfügen.
    2. In der Visuell-Ansicht auf den Galerie-Button klicken:
      Galerieeinfügen1.png
      und die Galerie auswählen.


Voilà.

Galerieeinfügen4.png

Sieht schicker aus als der Standard und so ist es überall einheitlich.

Galerieeinfügen5.png

Auch die Lightbox ist dadurch überall einheitlich und ein wenig schicker.

Verkehrszeichen

Für velocityruhr.net direkt stehen alle aktuell anordbaren Verkehrszeichen zur Verfügung (333-20 <Ausfahrt von der Autobahn> fehlt, da in der Quelle fehlerhaft). Auch die Neue Verkehrszeichen mit dem Neuerlass der StVO vom 01.04.2013 sind verfügbar. Wenn doch eins fehlen sollte, bitte mit Norbert klären, warum das so sein könnte. Schilder mit Bestandsschutz sind nicht in der Kategorie zu finden.

Einfach in der Mediengalerie <VZKat (BASt)> bei <Filtern nach Media Category> auswählen.

VZKat-Bilder1.png

Dann werden nur die verfügbaren Zeichen angezeigt.

to do: - Einarbeiten: http://www.bast.de/DE/Presse/2013/presse-08-2013.html - http://www.bast.de/DE/Presse/2009/presse-14-2009.html