Zum Inhalt

Bilder in Markdown

Formatierungen und Einbindung von Bildern in Markdown Dateien

hier folgen noch Beispiele… (z.B. für caption etc.)

Infos zu images in mkdocs-material

(durch extensions - attr_list und - md_in_html sind auch direkt in Markdown Anweisungen zu Grösse und Ausrichtung möglich)

Ausrichtung und Grösse

mit align*, width, height und style Anweisungen

center

![Bild](https://dummyimage.com/300x200/eee/aaa)
{ style="display: flex; justify-content: center" }

Bild

Achtung: Hier funktioniert center nur, wenn die Anweisung { style="display: flex; justify-content: center" } in der nächsten Zeile steht - wie in der Ansicht oben…!

align*

![Bild](https://dummyimage.com/300x200/eee/aaa){ align=right }

Bild

![Bild](https://dummyimage.com/300x200/eee/aaa){ align=left }

Bild

*align bitte vermeiden!

Bitte align wenn möglich vermeiden - ist veraltet (wird zwar von den meisten Browsern noch unterstützt) Hier ist es sinnvoller CSS zu verwenden! (Darum nur als Übergangslösung nutzen!)

Fehlerhafte Darstellung bei DuckDuckGo (nur unter Android) bei Verwendung von align

Danke an Christian für’s geduldige Testen…!!! 😉

width

![Bild](https://dummyimage.com/300x200/eee/aaa){ width=100% }

Bild

![Bild](https://dummyimage.com/300x200/eee/aaa){ width=200 }

Bild

height

![Bild](https://dummyimage.com/300x200/eee/aaa){ style="height:250px" }

Bild

height funktioniert nur mit { style="height:250px" }

scale

![Image title](https://dummyimage.com/600x400/eee/aaa){ style="transform: scale(0.5);" }

Image title

HTML

<div style="display: flex; justify-content: center;">
<img src="https://dummyimage.com/600x400/eee/aaa" width="250">
</div>

Bilder direkt mit HTML einbinden - sollte vermieden werden…!

(natürlich gibt es hier wieder Ausnahmen - siehe Infobox mit Bild)

mkdocs übernimmt beim Build keine Inhalte mit falschen Pfaden - eine unnötige Fehlerquelle 😄

Im GitLab (Online) Editor werden die Bilder richtig angezeigt - nach dem Build dann keine Bilder mehr durch falsch gesetzte Pfade…

Beim Build werden entsprechende Fehlermeldungen angezeigt - z.B. Fehler bei der Navigation oder fehlende Daten bzw. Bilder…

Deshalb besser mit VS Code und Vorschau im Browser durch livereload arbeiten…!

Im GitLab Online-Editor:

Nach dem Build falsche Pfade

Pfade anpassen

Infobox mit Bild

Test für Infobox (details) - ausklappbarer Hinweis - kann auch ein Bild enthalten

Beispieltext - Beispieltext - Beispieltext

??? Note "Test für Infobox (details) - ausklappbarer Hinweis - kann auch ein Bild enthalten"

    === "Beschreibung"

    Beispieltext - Beispieltext - Beispieltext

    === "Screenshot"

    <div style="display: flex; justify-content: center;">
    <img src="./images/screenshot-standortaktualisierung-android-01.webp" width="250">
    </div>

    === "Code"

(funktioniert nur mit Bildeinbindung über html mit <img src="">)

Bilder für light/dark mode

Beispiel: für light und dark mode angepasste Bilder - werden automatisch gewählt

[jeweils #only-light oder #only-dark an den Dateinamen anhängen]

Schema POISuite

hier: schema-poisuite-100.svg#only-light

Schema POISuite

hier: schema-poisuite-grau-100.svg#only-dark

Grafik Geoidhöhe

hier: grafik-geoid-height-de-01.svg [Originaldatei]

Grafik Geoidhöhe

hier: grafik-geoid-hoehe-bg-grau-dark.svg [mit grauem Hintergrund]

Grafik Geoidhöhe

hier: grafik-geoid-hoehe-transparent.svg#only-light [für light mode neu erstellt]

Grafik Geoidhöhe

hier: grafik-geoid-hoehe-transparent-dark.svg#only-dark [für dark mode neu erstellt]

Image captions

<figure markdown="span">
  ![Image title](https://dummyimage.com/600x400/eee/aaa){ width=300 }
  <figcaption>Image caption</figcaption>
</figure>

Image title
Image caption

However, Caption provides an alternative syntax to add captions to any Markdown block element, including images:

![Image title](https://dummyimage.com/600x400/eee/aaa){ width=300 }
/// caption
Image caption
///

Image title

Image caption

Image lazy-loading

![Image title](https://dummyimage.com/600x400/eee/aaa){ loading=lazy }

Image title