Bilder mit Bildunterschrift in Wordpress 2.6
Mit der neuen Wordpress Version 2.6 gibt es die Möglichkeit, Bilder mit Bildunterschrift einzubetten.Man klickt im Editor von Wordpress das Symbol rechts neben "Multimedia einfügen" und erhält ein Formular wie folgt:
Zunächst muss ein Bild von der Festplatte hoch geladen werden.Nun kann man das Formular mit Angaben füllen. Der erste Titel erscheint später im Browser als gelber Fähnchentext, wenn man die Maus auf dem Bild stehen lässt. Der zweite Titel erscheint als Bildunterschrift. Die Beschreibung ist nur relevant für die Informationswiedergabe im Wordpress internen Multimedia-Verzeichnis, erscheint also nicht im Browser oder im Quelltext.Die Link-URL ermöglicht das Verlinken mit dem Bild, was ich aber nicht so sinnvoll finde, deshalb wähle ich hier standardmäßig Keine.
Die Ausrichtung betrifft das Verhältnis von Bild und Text. In allen vier Fällen fügt Wordpress class-Definitionen in den Quelltext ein, die aber nicht relevant werden, es sei denn, man definiert die Klassen in den style.css seines Themes. Zum Schluss: In den Artikel einfügen.
Wordpress fügt nun folgenden Quelltext ein:
<img class="size-medium wp-image-671" title="Fähnchentext" src="http://[domain-uploadeverzeichnis]/bilddatei.jpg" alt="alt-Text" width="120" height="90" />alt-Text
Bild mit Untertitel
Im Tiny-MCE-Editor sieht das schon mal ganz gut aus. Das Bild wird in einen grauen Kasten eingebettet. Der alt-Text wird als Bildunterschrift verwendet und bleibt auch dann beim Bild, wenn die Schrift im Browser vergrößert wird.
Dies kann man hier ja mal testen. Im Quelltext der endgültigen Seite sieht das dann so aus.
<div id="attachment_671" class="wp-caption alignnone" style="width: 130px"> <img class="size-medium wp-image-671" title="Fähnchentext" src="http://[domain-uploadeverzeichnis]/bilddatei.jpg" alt="alt-Text" width="120" height="90" /> <p class="wp-caption-text">alt-Text</p></div>
Das Bild wird also in einen div-Kasten eingebettet, dessen Breite 10 Pixel größer als das Bild ist. Innerhalb des div-Bereichs wird zunächst das Bild eingebaut (mit Title und alternativen Text). Dann folgt ein Absatz mit dem alternativen Text. Damit das ganze auch so aussieht wie im Editor, müssen folgende Klassen in die style.css des Themes aufgenommen werden.
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
Verwandte Artikel
(No Ratings Yet)
