Textpattern - Beschriftete Bilder mit Textile und CSS

Wie lassen sich in Textile Beschriftungen zu Bildern hinzufügen? Bei der Erstellung von Texten sollen auch Grafiken inklusive Beschriftung eingebunden werden. Die gängigen CMS verwenden typischerweise minimalisierte Eingabesprachen wie markdown oder textile. Die in diesem Artikel verwendeten Beispielen nutzen textile als Sprache, eine entsprechende Umsetzung in markdown ist ebenso möglich.

Die Herausforderung

Textpattern nutzt als Auszeichnungssprache textile. Dies bietet Vorteile, da die Syntax einfach ist, und Autoren sich so auf das wesentliche, das Schreiben ihres Textes konzentrieren können. Allerdings kommt textile auch mit einigen Einschränkungen daher. So hat es sich bewährt, in HTML5 Dokumenten die Beschriftungen von Bildern mittels des <figure> Elements umzusetzen.

<figure>
    <image src="image.png" alt="..."/>
    <figcaption>
        Beschriftung des Bildes
    </figcaption>
</figure>

Leider wird <figure> durch textile nicht nativ unterstüzt (Stand Februar, 2018).

Entsprechend habe ich nach einer Möglichkeit gesucht auch ohne Verwendung von <figure> Beschriftungen zu Bildern hinzuzufügen.

Lösungsansätze

Zwei Ansätze habe ich für nützlich befunden.

• Verwendung von Tabellen und CSS
• Verwendung von <p> und <span> mit CSS

In Textpattern kann das CSS in der Admin-Konsole als Style eingefügt werden.

Verwendung von Tabellen

Der Ansatz zur Verwendung von Tabellen und CSS nutzt die Integration von <table> in textile.

|(image). !(img-fluid) image.png!|
|(caption). Beschriftung des Bildes |

Textile erzeugt aus diesem Code eine Tabelle in HTML.

<table>
    <tr>
        <td class="image">
            <img alt="" class="img-fluid" src="image.png" /> 
        </td>
    </tr>
    <tr>
        <td class="caption">Beschriftung des Bildes</td>
    </tr>
</table>

Diese Tabelle kann mittels CSS angepasst werden.

td.image {
	border:0;
}
td.caption {
	border:0;
	padding-left:0.5em;
	padding-top:4pt;
	padding-bottom:4pt;
	font-size:0.75em;
	line-height:1.5em;
	font-style:italic;
	color:#424242;
	text-align:center;
}

Verwendung von <p> und <span>

Dieser Ansatz nutzt die Integration von <p> und <span> in textile.

p(img). !(img-fluid)image.png! 
%Beschriftung des Bildes%

Textile erzeugt aus diesem Code HTML

<p class="img">
    <img alt="..." class="img-fluid" src="image.png" /> 
    <br />
    <span>
        Beschriftung des Bildes
    </span>
</p>

Dieses kann mittels CSS angepasst werden.

p.img {
	display: table;
	margin: 1em auto 1em auto;
	text-align:center;
	padding:1pt;
	border:#f0f0f0 solid 1pt;
}
p.img > img {
	display: inline-block;
}
p.img > img ~ span {
	display:block;
	border:0;
	padding-top:4pt;
	padding-bottom:4pt;
	background-color:#f0f0f0;
	font-size:0.75em;
	line-height:1.5em;
	font-style:italic;
	color:#424242;
}
p.img > br {
	display:none;
}

Zusammenfassung und Ausblick

Auch wenn textile die Verwendung von <figure> nativ nicht unterstützt (Stand Februar 2018), lassen sich Bilder dennoch mittels passender Verwendung der textile Syntax und CSS beschriften.

Beschriftetes Bild in Textile mit <p> und <span>

Die Version mit <p> und <span> erscheint als die flexiblere Variante, da bei der Verwendung von Tabellen das umfassende <table> Element nicht über CSS3 Selektoren adressierbar ist. Dies wird sich potentiell über CSS4 Selektoren und die Verwendung von table:has(td.image) ändern, jedoch ist :has() aktuell (Februar 2018) in den gängigen Browsern noch nicht umgesetzt.