Bilder mit Beschriftung

Der TinyMCE bietet eine Funktion für Bilder mit Bildbeschriftungen. Voraussetzung für die Verwendung sind die Aktivierung dieser Funktion in der entsprechenden init.js und ein paar sinnvolle Einträge in der stylesheet.css des Templates.

Hier sehen Sie ein rechts ausgerichtetes Bild mit einer Bildbeschriftung. Als html Elemente setzt der TinyMCE <figure> und <figcaption>.

Zur Ausrichtung kann man die zur Textausrichtung vorgesehen Buttons der Editor Toolbar verwenden, wenn die vom Editor erzeugten CSS-Klassen in der stylesheet.css des Templates definiert sind.

Der CSS Code

/* TinyMCE image descriptions */
figure.image {
display: table;
background: #333;
border: 0px solid #999;
border-radius: 0;
padding: 0;
margin: 10px auto 20px auto;
}

figure.align-left {
max-width: 40%;
float: left;
margin: 10px 20px 20px 0;
}

figure.align-right {
max-width: 40%;
float: right;
margin: 10px 0 20px 20px;
}

figure.align-center {
float: none;
margin: 20px auto;
}

figure.image img {
display: block;
padding: 0;
margin: 0 auto;
}

figure.image figcaption {
background: #ddd;
color: #222;
text-align: center;
font-size: 16px;
line-height: 1.2em;
padding: 9px 12px;
}

@media (max-width: 580px) {
figure.image {
   width: auto!important;
   max-width: 100%!important;
   float: none;
   margin: 10px auto;
   }
}

Die Aktivierung im TinyMCE

Prüfen Sie zuerst, ob die Funktion Bildbeschriftung aktiviert ist, indem Sie per Rechtsklick auf das Bild klicken und "Image" auswählen. Wenn Sie unten im Dialogfenster die Möglichkeit haben, "Beschriftung" (en: "Caption") anzuhaken, dann ist die Funktion bereits aktiviert.

Wenn nicht, dann müssen Sie die von Ihnen aktivierte init Datei (Standard: init_full.js) im Verzeichnis ./plugins/tinymce/inits/ per ftp herunterladen und wie folgt erweitern.

Suchen nach:

    image_description: true,
    image_title: true,
    image_dimensions: false,
    image_advtab: true,

Erweitern zu (letzte Zeile neu):

    image_description: true,
    image_title: true,
    image_dimensions: false,
    image_advtab: true,
    image_caption: true,

Dann laden Sie die erweiterte Datei wieder hoch, dann sollte die Funktion aktiv sein.

In den Downloads von CMSimple ab Version 5.6 sind neue init-Dateien für den TinyMCE bereits enthalten.

Anwendung

1. Fügen Sie wie gewohnt  ein Bild in den Inhalt ein, in der Regel am Anfang eines Absatzes.
2. Markieren Sie das Bild, klicken Sie per Rechtsklick auf das Bild und wählen Sie "Image". Alternativ kann nach dem markieren des Bildes auch die Toolbar des Editors genutzt werden.
3. Aktivieren Sie "Beschriftung" (durch anhaken)
4. Klicken Sie auf das Bild und richten Sie es mittels der zur Textausrichtung vorgesehen Buttons der Editor Toolbar links oder rechts aus oder zentrieren Sie es.
5. Bearbeiten Sie die Bildbeschriftung nach Ihren Wünschen

Sie können nun das Bild jederzeit anklicken und nach links oder rechts verschieben oder zentrieren. Das Bild selbst sollte nicht formatiert werden, formatiert (per CSS Klasse) wird das umgebende <figure>:

<figure class="image align-right">
<img src="userfiles/images/kirche800.jpg" alt="Kirche in der Dämmerung">
<figcaption>Die Bildbeschriftung</figcaption>
</figure>