Zeilenumbruch in der Contao-Bildunterschrift via JavaScript erzeugen

von Oliver Richter (Kommentare: 0)

Contao erlaubt in Version 3 bei der Angabe der Standard-Bildunterschrift leider nur die Eingabe von Text über ein einzeiliges Eingabefeld (<input type="text" />). Dort ist die Eingabe z.B. eines Zeilenumbruchs (leider) nicht vorgesehen.

Für den Fall, dass eine saubere Lösung (via Backend) nicht möglich und weiterhin auf das <figcaption>-Element für den Text mit Zeilenumbruch im Frontend zurück gegriffen werden muss, hier eine "quick'n dirty"-Variante, die ich auch, trotz geäußerter Bedenken, bei einem meiner Kunden anwenden musste.

 

jQuery(document).ready(function () {
 
	// create line break: replace '--'
	$('figure.image_container figcaption.caption').each( function(index) {
		if (  $(this).text().length > 0  ) {
			$(this).html( $(this).text().replace(/--/g,'<br />') );
		}
	});
});

Immerhin wird der Zeilenumbruch zuverlässig bei allen sehenden JavaScript-Nutzern erzeugt. Wie Screenreader damit umgehen, habe ich nicht getestet. Grundsätzlich empfehle ich jedoch, die bestehenden Funktionalitäten von Contao in ihrer Form zu nutzen und z.B. Text mit Absätzen in den dafür vorgesehenen Elementen z.B. unterhalb des Bildes zu platzieren.

Zum Einbinden des Code-Fragments stellen Sie bitte zuvor sicher, dass Sie die JQuery-Bibliothek eingebunden haben. Fügen Sie das Code-Fragment dann beispielsweise am Ende Ihres Inhaltes hinzu innerhalb eines <script>-Tags. 

Zurück

Einen Kommentar schreiben

Bitte addieren Sie 1 und 9.

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.