Fertig
Bilder einbinden
Vor dem Einbinden der Bilder sollte die Ordnerstruktur verstanden sein.
Erstmal hier lesen
- Nur auf einer Seite vorkommende Bilder
- Auf mehreren Seiten vorkommende Bilder
- Bilder mit Links
- In einer Textzeile eingebettete Bilder
- Bilder mit umfließendem Text
- Bilder mit Beschreibung
- Bilder mit abweichender Größe
Nur auf einer Seite vorkommende Bilder
Die Einbindung von Bildern ähnelt sehr dem Erstellen eines Links, beginnt aber immer mit einem ! .
Darauf folgt in eckigen Klammern der optionale Alternativtext-Tag und dann in runden Klammern der Pfad mit optionalem Titel in Anführungszeichen.
Das erzeugt den Code
<img src="img.jpg" alt="alt text" title="Title" />
Auf mehreren Seiten vorkommende Bilder
Soll ein Bild eingebunden, das in vielen Seiten vorkommt, sollte es im Ordner files auf der obersten Ebene liegen und muss dann wie folgt eingebunden werden.
Der Pfad zum Bild im Ordner files muss in geschweiften Klammern und einfachen Anführungszeichen mit dem Zusatz absolute_url stehen, {{ 'files/musterbild.png' | absolute_url }}, damit immer die oberste Ebene gefunden wird.
Dieses Bild 
kommt öfter vor.
Dieses Bild {: .inline } kommt öfter vor.
Bilder mit Links
Ein Link wird wie folgt erzeugt (siehe Links)
[buchner-Seite aufrufen](https://www.buchner.de)
Wird in die eckigen Klammern [ ] ein Bild geschrieben, dann wird daraus ein Bild mit Link.
[buchner-Seite aufrufen](https://www.buchner.de)
+
=
[](https://www.buchner.de)
Auch Bilder haben, wenn sie mit einem Link versehen sind, eine feine Linie, die zeigt, dass es einen Link gibt. Soll diese wegfallen, muss der Ausdruck eine Klasse .border-0 haben.
[](https://www.buchner.de){: .border-0 }
Notiz: So sieht es aus, wenn das Bild auch noch eine eigene Klasse hat
[{: .width-25 }](https://www.buchner.de){: .border-0 }
In einer Textzeile eingebettete Bilder
Bilder und Icons bis zu einer Höhe von 24px lassen sich auch direkt in den Fließtext einbinden. Dafür brauchen sie eine eigene Klasse.
{: .inline }
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. {: .inline } At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Bilder mit umfließendem Text
Bilder, die im Fließtext rechts oder links positioniert werden sollen, brauchen eine eigene Klasse.
{: .float-left } oder {: .float-right }
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
{: .float-left } Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. {: .float-right } Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Bilder mit Beschreibung
Um ein Bild mit Beschreibung zu erzeugen, wird unter einem Bild ein Titel platziert. Dieser wird mit * eingefasst. Dem ganzen Block wird dann noch die Klasse .sub-title zugeordnet.
Bildunterschrift mit mehreren Zeilen. Das Bild hat eine Breite von 640 Pixeln.
*Bildunterschrift mit mehreren Zeilen.*
*Das Bild hat eine Breite von 640 Pixeln.*
{: .sub-title }
Bilder mit abweichender Größe
Bilder werden immer so groß (Pixel) dargestellt, wie sie sind, maximal aber so breit, wie der Bildschirm des Gerätes, auf dem die Seite angezeigt wird, oder 736 Pixel breit, wenn der Bildschirm größer ist.
Dieses Testbild hat eine Breite von 1536 Pixeln, wird aber verkleinert.
Hat ein Bild nicht die richtige Größe oder wird auf 100% verkleinert, gibt es die Möglichkeit, es auf 25%, 50% oder 75% der Seitenbreite zu verkleinern. Die entsprechenden Klassen heißen .width-25, .width-50 und .width-75.
{: .width-25 }
{: .width-50 }
{: .width-75 }