Bildlink mit Markdown Parser in Pico CMS realisiert

Mit der Markdown Syntax können Sie auch einen klickbaren Bildlink im Text eintragen. Es ist eine Schachtelung verschiedener bekannter Markdown Format-Befehle.

Bild mit Markdown in Pico 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]

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]: http://buystars.de/assets-cmsworkbench/bildname-1.png "Beschreibung-1"
[Bild 2]: http://buystars.de/assets-cmsworkbench/bildname-2.png "Beschreibung-2"
[Bild 3]: http://buystars.de/assets-cmsworkbench/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]

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

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

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