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;
}
Ganz nettes Feature wie ich finde.
Toll, dieser Tipp kommt mir sehr gelegen! Allerdings meckert mein Editor, dass da “nicht unterstützte Eigenschafen” enthalten sind, die in einer ganzen Reihe von Browsern Probleme verursachen könnten/sollen. Da ich nicht die Möglichkeit habe, das hier zu überprüfen: Haben Sie praktische Erfahrungen gemacht mit den border-radius Eigenschaften? Wie könnte eine Alternative aussehen?
Unbekannte Eigenschaften werden vom Browser ignoriert. Das kann sogar der IE.
LG
Dominik
Ansonsten einfach alle Eigenschaften mit einem “-” weglassen..
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
Das ist alles was bei mir im Frontend ankommt!?
Weder die CSS-Klassen für die Ausrichtung, noch .wp-caption wird ausgegeben. An was könnte das liegen?
Ich versuche seit Tagen die Captions zum laufen zu kriegen.
WP 2.6 wurde ganz frisch installiert, keine Updates!
Oder noch besser: Den Editor wechseln. Wenn mir ein Programm erzählen will, dass es diese Datei nicht speichert, weil da Dinge drin vorkommen, die andere evtl. nicht gut finden könnten, dann zeige ich diesem Programm gerne den Weg ins Datennirvana…
LG
Dominik
(Anders sähe es natürlich aus, wenn es zwar Hinweise gäbe, die Datei trotzdem abspeicherbar ist.)
[...] dem Dr. Web Weblog wurden gestern ein paar CSS-Codeschnipsel präsentiert, mit denen man die Bilder und deren [...]
Ich hatte noch nie einen Editor, der sich weigerte, eine Datei abzuspeichern (und habe das auch nicht behauptet – oder?). Gibt´s so was!? Wäre dann wohl so was wie ein “100%-Verhüterli” für fehlerhaftes Design… ;-)
Habe bisher keine Erfahrung mit diesen Eigenschaften und wollte nur wissen, wie sie sich auswirken. Dass es zu IE mit seinen diversen Unfähigkeiten verschiedene Meinungen gibt, ist mir klar (aber kein Grund, sie in jeder Antwort zu einer browerthematischen Frage unterzubringen…). Michael, danke!
[...] noch mehr Information zur Bildunterschrift wünscht, der liest den Beitrag „Bilder mit Bildunterschrift in WordPress 2.6“. Dort gibt es eine Reihe an Infos zu HTML und [...]
Wird dann unter alle Fotos (auch unter alten) der Alt-Tag als Bildunterzeile gesetzt? Das wäre ja furchtbar, weil bei mir in den Alt-Tags entweder die Beschreibung des Abgebildeten (aber das sieht man ja) oder bei Screenshots der entsprechende Text stehen.
Ich dachte, die hätten eine zusätzliche Funktion für Bildunterschriften eingefügt …
[...] und spannend findet und von Berührungsängsten geplagt wird, findet drüben bei Dr. Web eine kleine [...]
Das [caption]-Tag wird bei mir nicht ausgewertet. Es erscheint im Quelltext des Artikels keine Beschreibung, und die Ausrichtung des Bildes stimmt demnach auch nicht.
Diese Erfahrung habe ich schon mal gemacht, seitdem entferne ich dieses Tag direkt und definiere die Ausrichtung des Bildes wie bisher im
img-Tag.[...] Bilder mit Bildunterschrift in WordPress 2.6 – [...]
[...] Bilder mit Bildunterschrift in WordPress 2.6 – [...]
[...] Bilder mit Bildunterschrift in WordPress 2.6 – [...]
[...] Bilder mit Bildunterschrift in WordPress 2.6 | Blogs | Dr. Web Weblog … muss ich mir mal näher ansehen … (tags: wordpress) Artikelansicht: Artikel anzeigen Blog-Tags: Abgelegt unter: Links Trackback-Link: TrackBack URI Artikel-Adresse: Permalink-URI Keine Kommentare – jetzt Kommentar schreiben » Noch keine Kommentare. RSS-Feed für Kommentare zu diesem Artikel. Einen Kommentar hinterlassen [...]
interessant.
sogar sehr interessant.
gut, man könnte jetzt sagen dass die konkurrenz das schon seit ein paar jährchen kann, aber ich finde es ist doch ein recht interessantes “neues” feature für wordpress…
[...] WordPress Backend gibt es seit Version 2.6 die Möglichkeit, Fotos mit Bildunterzeilen (Captions) zu versehen. Die entsprechenden [...]
Danke für den Hinweis – hatte genau danach gesucht.