updated:  2024 21. May
published:  2022 16. September

Bilder Fotos Grafiken

Bilder, Grafiken in Markdown.

Bilder in Markdown einbinden

Bilder werden in Markdown standardmäßig mit folgender Syntax aufgerufen:


 # Kurzform 
 ![](/path/to/image.jpg)

 # Optional mit Titel und alternativer Bezeichnung.
 ![alternative Bezeichnung](/path/to/image.jpg "Titel")
Beispiele 

 ![](/Inhalt/Bild1.jpg)
 ![](/images/Bild2.jpg)
 ![](/svg/Bild2.svg)
 ![Kein Bild geladen](/images/image.jpeg "Titel des Bildes")

Das Standardverzeichnis für Bilder ist static oder alles unterhalb von content.


 gohugo-work-directory
  ├── content
  │   └── Inhalt
  │       └── Bild1.jpg
  ├── data
  ├── static
  │   ├── images
  │   │   └── Bild2.jpg
  │   └── svg
  │       └── Bild2.svg
  └── themes

Weitere Parameter

Mit Hilfe von render_hooks wurden weitere Parameter hinzugefügt. Diese Parameter sind Optionen für die Position und Rahmen, sowie Links in der Textzeile des Bildes und die Größendarstellung.

Erweiterter Aufruf mit Parametern 

 ![](/path/to/image.jpg "Title {ClassOption01 ClassOption02}")
 ![](/path/to/image.jpg "Title {ClassOption01 ClassOption02}[[Linkname01=href...][Linkname02=href...][...]]")
 ![](/path/to/image.jpg "Title {ClassOption01 ClassOption02}[[Linkname01=href...][Linkname02=href...][...]] #width=80%")

1. ClassOptionen

Mit ClassOption wird die Position des Bildes im Text und/oder ein Rahmen festgelegt.

Aufruf mit ClassOptionen 

 ![](/images/Blume.jpg "Bild rechts mit Rahmen {right frame}" )
Option Usage
frame Rahmen
left Bild links vom Text.
right Bild rechts vom Text.
Das Bild wird zentriert wenn keine Option zur Position übergeben wird.

Die Positionierung der Bilder sind mit dem entsprechenden Responsive Design ausgestattet und verhalten sich auf mobilen Endgeräten anders. Das Bild wird zentriert.

Kein Bild geladen.
 Bild zentriert 
Mustertext: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Kein Bild geladen.
 Bild links 
Mustertext: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Kein Bild geladen.
 Bild rechts mit Rahmen 
Mustertext: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Im Bildtitel können Verweise zu anderen Seiten (zum Beispiel zu Quellen oder Copyright) mit gegeben werden.

Aufruf mit Links 

 ![](/images/Blume.jpg "Bild mit Link im Titel[[Home=https://www.vermessungsprogramme.de]]" )
Kein Bild geladen.
 Bild mit Link im Titel  · Home · 
altern. Text
 Ellipsoidische Breite  · Kkddkkdd · CC BY-SA 3.0 · 
Mustertext für Textlayout: Trapattonis Wutrede März 1998: “Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen: Estens - Wir haben nicht offensiv gespielt. Es gibt keine deutsche Mannschaft spielt offensiv und die Namen offensiv wie Bayern. Letzte Spiel hatten wir in Plas drei Spitzen: Elber, Jancker und dann Zickler. Wir mussen nicht vergessen Zickler. Zickler ist eine Spitzen mehr Mehmet e mehr Basler. Ist klar diese Wörter, ist möglich verstehen, was ich hab’ gesagt? Danke. Offensiv, offensiv ist wie machen in Platz. Zweite - Ich habe erklär mit diese zwei Spieler: Nach Dortmund brauchen vielleicht Halbzeit Pause. Ich habe auch andere Mannschaften gesehen in Europa nach diese Mittwoch. Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein Trainer sehen, was passieren in Platz. In diese Spiel es waren zwei, drei oder vier Spieler, die waren schwach wie eine Flasche leer! Haben Sie gesehen Mittwoch, welche Mannschaft hat gespielt Mittwoch? Hat gespielt Mehmet, oder gespielt Basler, oder gespielt Trapattoni? Diese Spieler beklagen mehr als spielen! Wissen Sie, warum die Italien-Mannschaften kaufen nicht diese Spieler? Weil wir haben gesehen viele Male solche Spiel. Haben gesagt, sind nicht Spieler für die italienische Meisters. Struuunz! Strunz ist zwei Jahre hier, hat gespielt zehn Spiele, ist immer verletzt. Was erlauben Strunz? Letzte Jahre Meister geworden mit Hamann eh… Nerlinger. Diese Spieler waren Spieler und waren Meister geworden. Ist immer verletzt! Hat gespielt 25 Spiele in diese Mannschaft, in diesem Verein! Muss respektieren die andere Kollegen! Haben viel nette Kollegen, stellen sie die Kollegen in Frage! Haben keinen Mut an Worten, aber ich weiß, was denken über diese Spieler! Mussen zeigen jetzt, ich will, Samstag, diese Spieler mussen zeigen mich eh … seine Fans, mussen allein die Spiel gewinnen, mussen allein die Spiel gewinnen. Ich bin müde jetzt Vater diese Spieler, eh, verteidige immer diese Spieler! Ich habe immer die Schulde über diese Spieler. Einer ist Mario, einer, ein anderer ist Mehmet! Strunz dagegen egal, hat nur gespielt 25 Prozent diese Spiel! Ich habe fertig!”

3. Bildgröße mit #width anpassen

Der Parameter #width=xx% definiert die Breite des dargestellten Bildes. Damit können Anpassung insbesondere bei *.svg vorgenommen werden.

Aufruf mit #width 

 ![](/images/Blume.jpg "mit width #width=25%" )
Kein Bild geladen.
 ohne width 
Kein Bild geladen.
 mit width 
Kein Bild geladen.
 Bild zentriert 
Mustertext: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Kein Bild geladen.
 rechts 
Mustertext: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Kein Bild geladen.
 Bild links 
Mustertext: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
myImage
 Bild mit Rahmen und verkleinert mit width 
Mustertext für Textlayout: Trapattonis Wutrede März 1998: “Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen: Estens - Wir haben nicht offensiv gespielt. Es gibt keine deutsche Mannschaft spielt offensiv und die Namen offensiv wie Bayern. Letzte Spiel hatten wir in Plas drei Spitzen: Elber, Jancker und dann Zickler. Wir mussen nicht vergessen Zickler. Zickler ist eine Spitzen mehr Mehmet e mehr Basler. Ist klar diese Wörter, ist möglich verstehen, was ich hab’ gesagt? Danke. Offensiv, offensiv ist wie machen in Platz. Zweite - Ich habe erklär mit diese zwei Spieler: Nach Dortmund brauchen vielleicht Halbzeit Pause. Ich habe auch andere Mannschaften gesehen in Europa nach diese Mittwoch. Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein Trainer sehen, was passieren in Platz. In diese Spiel es waren zwei, drei oder vier Spieler, die waren schwach wie eine Flasche leer! Haben Sie gesehen Mittwoch, welche Mannschaft hat gespielt Mittwoch? Hat gespielt Mehmet, oder gespielt Basler, oder gespielt Trapattoni? Diese Spieler beklagen mehr als spielen! Wissen Sie, warum die Italien-Mannschaften kaufen nicht diese Spieler? Weil wir haben gesehen viele Male solche Spiel. Haben gesagt, sind nicht Spieler für die italienische Meisters. Struuunz! Strunz ist zwei Jahre hier, hat gespielt zehn Spiele, ist immer verletzt. Was erlauben Strunz? Letzte Jahre Meister geworden mit Hamann eh… Nerlinger. Diese Spieler waren Spieler und waren Meister geworden. Ist immer verletzt! Hat gespielt 25 Spiele in diese Mannschaft, in diesem Verein! Muss respektieren die andere Kollegen! Haben viel nette Kollegen, stellen sie die Kollegen in Frage! Haben keinen Mut an Worten, aber ich weiß, was denken über diese Spieler! Mussen zeigen jetzt, ich will, Samstag, diese Spieler mussen zeigen mich eh … seine Fans, mussen allein die Spiel gewinnen, mussen allein die Spiel gewinnen. Ich bin müde jetzt Vater diese Spieler, eh, verteidige immer diese Spieler! Ich habe immer die Schulde über diese Spieler. Einer ist Mario, einer, ein anderer ist Mehmet! Strunz dagegen egal, hat nur gespielt 25 Prozent diese Spiel! Ich habe fertig!”

Creative Commons, Lizenz

Creative Comons sind vorgefertigte Standardlizenzvereinbarungen unter der ein Urheber sein Werk veröffentlichen kann. Auf den Seiten der Wikimedia Commons stehen bereits viele Bilder, Video’s und auch Audioaufzeichnungen unter der CC-lizenz zur Verfügung. Wichtig ist dabei die jeweiligen Bedinungen zur Verwendung des Materials einzuhalten.

altern. Text
 Vogt, F.A.: Bericht über die Epidemieen..., Seite 1  · Quelle BSB · NC · 
altern. Text
 Timothy Vollmer: CC 10th Birthday Celebration  · Quelle · CC BY 4.0 · 
altern. Text
 ellips. Breite  · Kkddkkdd · CC BY-SA 3.0 · 

Medienanbieter

Für die Suche nach Bildern, Clipart’s, Video- und Audioaufzeichnungen stehen z.B. folgende Seiten zur Verfügung:
Wikimedia
OpenClipArt (Wiki)
OpenVerse
Bavarikon
MDZ Münchener DigitalisierungsZentrum
flickr teilweise CC
Dresden Stadtbildfotografie Nach einem Zeitungsbericht (DNN 21.12.2023) unter CC
Stichworte (tags)