Bildlink mit Markdown in Pico

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

home » pico » bildlink mit markdown parser in pico cms realisiert

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.

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

WordPress 6 - Das umfassende Handbuch. Über 1.000 Seiten zu WordPress inkl. Themes, Plug-ins, WooCommerce, SEO und mehr - Mit WordPress mehr als nur ein Blog betreiben - es ist auch ein weit verbreitetes Content-Management-System. Im Buch finden Sie das Rundumpaket für jedes Anwendungsszenario: alle Installationen, Entwicklung und Administration eigener Themes und Plugins und Einstieg in HTML und CSS. Als Fortgeschrittener in Sachen WordPress werden Sie viele wertvolle Tipps und Hilfe finden, etwa bei Themen wie Custom Post Types oder Programmieren von Erweiterungen. So sind Sie schnell in der Lage, Ihr Webprojekt zum Erfolg zu bringen.

Wir können mit so genannten Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Impressum


CMSWorkbench ist ein Tec- und Entwickler-Seite, rund um die Webtechniken der Content Management Systeme.

Datenschutz


Diese Webseite nutzt keine Cookies oder sonstige Speichermechanismen, die einen Rückschluss auf das Leserverhalten zulassen.

Kontakt


Sie können mit der Redaktion oder dem Administrator via eMail unter der Adresse: Kontakt@Oliver-Lohse.de aufnehmen.