Bildlink mit Markdown in Pico

Bild mit Markdown in Pico einfügen ## {#Bild-MD-einfügen}

Markdown hat sich zum Standard im Internet etabliert. Mit der folgenden Schreibweise erstellen Sie einen Bildlink in der Markdown-Syntax:

[Bild 1]: bild.png "Beschreibung"
![Alt.Beschreibung][Bild 1]

Code

Für die Einbindung in das CMS Pico müssen Sie auch die Template-Konstante %aessets_url%/ dem Bildpfad voranstellen (sofern Sie das assets-Verzeichnis zum speichern der Bilder in Pico nutzen).

Zeile 001 des Beispiels oben, ist unsichtbar und wird vom Markdownparser nicht zu Anzeige intepretiert.

Eine Bildsammlung am Beginn oder Ende des Beitrags

Diese spezielle Syntax macht es möglich, das Sie am Beginn oder auch am Ende eines Beitrags, alle Bilder zusammenfassen, um dann innerhalb des Textes darauf zu referenzieren. Geben Sie:

[Bild 1]: %assets_url%/bildname-1.png "Beschreibung-1"
[Bild 2]: %assets_url%/bildname-2.png "Beschreibung-2"
[Bild 3]: %assets_url%/bildname-3.png "Beschreibung-3"
...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
voluptua.
...
![Alt-Text][Bild 1]
...
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.
...
![Alt-Text][Bild 2]
...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
voluptua.
...
![Alt-Text][Bild 3]

Code

ein, um den Text besser mit Bildern zu strukturieren. Sie behalten bei größeren Texten einen besseren Überblick über alle im Text verwendeten Bildsourcen.

Klickbarer Bildlink mit Markdown in Pico CMS

Wollen Sie das Bild auch klickbar machen, dann können Sie natürlich gerne die folgende Systax ausprobieren:

[ ![alternativer Text][Bild 1] ][Bild 1] auf das Bild klicken zum vergrößern

Code

Damit können Sie das Bild auch zum vergrößern mit der Maus anklicken.

FlightCMS
2024-01-28
PHP8
post
0