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;
}
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
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.)
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!
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 …
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.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…
Danke für den Hinweis – hatte genau danach gesucht.
„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“
Das stimmt so leider nicht. In modernen Browsern wie Safari, Firefox, Chrome trifft es zu, Im Internet Explorer (5.5 bis 9) hat diese nicht per css-File definierte Klasse trotzdem Auswirkungen. Ich nutze bei mir anders angelegte Bildunterschriften und diese landen im Explorer wegen der automatisch erzeugten class-Definition wie z.B. „class=”alignright size-medium wp-image-317“ dann nicht unter einem Bild, sondern daneben, weil das „align“-Attribut vom Explorer bescheuerterweise berücksichtigt wird und andere Inhalte somit um das Bild fliessen. Man muss die class komplett rausschmeissen oder zumindest „alignright“ bzw. „alignleft“ löschen.