WordPress-Buch

CSS für Bilder in WordPress

In den letzten Versionen wurde u.a. auch die "Bilder einfügen"-Funktion stark erweitert und seit der Version 2.6 kann man den Bildern automatisch beim Hochladen eine Bild-Unterschrift vergeben. Daher verdient diese Funktion es, dass man ein paar erklärende Sätze verfasst.

Nach dem man ein Bild hochgeladen hat, kann man diverse Eingaben tätigen. Als erstes kann man den Text für den Mousover (title-Attribut) eingeben. Im zweiten Textfeld gibt man den Text für die Bildunterschrift, welcher gleichzeitig auch der Inhalt des alt-Attributes ist.

Weiter darunter im größeren Textfeld mit dem Namen "Beschreibung" notiert man den Text, der bei der Galerie-Funktion erscheint. Dieser Text diente in den früheren Versionen lediglich internen Zwecken. Darunter wird eine URL generiert, je nach dem wofür man sich entscheidet: keine, Link zu dem Bild oder die Adresse des Beitrages.

In den beiden letzten Punkten entscheidet man sich für die Ausrichtung des Bildes und für die Größe bzw. die Ausmaße des Bildes. Die Dimensionen von "Vorschaubild" und "Medium" kann man komfortabel in "Einstellungen" » "Verschiedenes" einstellen.

Die zuständigen CSS-Regeln

So weit, so gut. Nun geht es darum für die Ausrichtungen des Bildes und für Bildunterschrift-Funktion, die passenden CSS-Regeln zu definieren. Hier zuerst (beispielhaft) die Angaben für die Ausrichtung der Bilder:

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto; margin-right: auto;
    text-align: center;
}

.alignleft {
    float: left; margin-right: 10px;
}

.alignright {
    float: right; margin-left: 10px;
}

Der obere Code sollte klar sein. Dier erste Regel sorgt dafür, dass das Bild bzw. der umgebende div-Block znetriert ist, die zweite Regel sorgt dafür, dass das Bild links floatet und die letzte Regel sorgt dafür, dass das Bild rechts ausgerichtet wird.

.wp-caption {
    text-align: center;
    background: #e4f2fd; border: 1px solid #cde;
    padding: 11px 9px 9px 9px;
    margin-top: 3px; margin-bottom: 10px;
    /* Abgerundete Ecken fuer Browser die es koennen */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.wp-caption img {
    margin: 0; padding: 0; border: 1px solid #cde;
}

div.wp-caption a { border: none; }

.wp-caption p.wp-caption-text {
    font-size: 11px; line-height: 17px;
    margin: 0; padding-top: 5px;
}

Der obere Code besteht aus vier Regeln. Mit der ersten Regel wird eine Box definiert in der sich dann später das Bild befinden wird. Je nach dem restlichen Layout der Website, werden hier entsprechend andere Werte für Abstand, Farbe und Rahmen angegeben.

Die zweite Regel kümmert sich um das Bild innerhalb der Box. Die dritte Regel kümmert sich um den Link, welcher das Bild umschließt und die letzte Regel ist zuständig für die eigentliche Bildunterschrift. Wie das ganze ausschauen kann, sieht man in der oberen Abbildung.

Abgerundete Ecken mit CSS

Auch mit CSS kann man abgerundete Ecken realisieren, hier der Code, der schon weiter oben zum Einsatz kam:

-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

Alle vier Deklarationen tun das gleiche. Eigentlich sollte die letzte Deklaration reichen. Blöderweise unterstützt momentan kein einziger Browser auf dem Markt CSS 3 komplett und daher auch nicht die Eigenschaft border-radius. Die Eigenschaft belasse ich dennoch, falls in nahen Zukunft ein Browser doch diese Eigenschaft unterstützen sollte.

Bis dahin muss man sich proprietären Angaben begnügen: -moz für Geckos, -khtml für Konqueror & Co. und -webkit für Safari & Co.

Aktive Menüpunkte hervorheben

In meinem Weblog beschreibe ich nicht nur wie man den aktuellen bzw. den aktiven Menüpunkt visuell hervorhebt, sondern wie man auch die entsprechende übergeordnete Eltern-Seite hervorheben kann, wen man sich auf den untergeordneten Seiten befindet.

Bild im Beitrag positionieren

Neulich habe ich eine Frage bekommen, wie man innerhalb eines Beitrages, das Bild bzw. eine Grafik positioniert, so dass es von dem nachfolgenden Text umflossen wird. So wie in diesem Beitrag hier.

Da gibt es zwei Vorgehensweisen, die einfachste ist wenn man nicht im visuellen sondern im Code-Editor arbeitet. Da kann man solchen Bildern einen extra Klassen-Attribut zuweisen, hier ein Beispiel:

<img src="bild.png" alt="Positionierung" class="bild-links" />

Das Klassen-Attribut (inkl. dem Wert) ist hervorgehoben. Nun muss man diesen Attribut Eigenschaften in der CSS-Datei zuweisen:

.bild-links { float: left; margin: .2em 1em .5em 0; }

Hierbei muss man nur achten, dass nach dem Bild auch genug Inhalt bzw. Text nachkommt, damit das Bild auch wirklich umflossen wird, denn durch die Eigenschaft float, wird ein Element aus dem normalen Fluss herausgenommen und es kann dann zur Darstellungsfehlern kommen.

Um diese Möglichkeit der Bilderpositionierung zu nutzen, muss man nicht permanent in der Code-Ansicht arbeite, Es reicht wenn man bei der Eingabe der Klasse in den Code-Editor wechselt. Falls man das Plugin AddQuicktag einsetzt, dann kann man die Eingabe des Klassen-Attributs auf ein Quicktag legen und in der Zukunft muss man nur einmal Klicken um das Attribut hinzuzufügen.

Die andere Möglichkeit ist die Nutzung des visuellen Editors. Wenn man ein Bild bereits eingefügt hat, kann man das Bild anklicken und anschließend das Bild-Symbol (das kleine Baum-Icon) in der Leiste anklicken und es öffnet sich ein weiteres Fenster (siehe die Abbildung). Dort hat man dann die Möglichkeit, das Bild zu positionieren in dem man eine Auswahl bei dem Punkt Alignment trifft. Die Werte left (links) und right (rechts) sind hierbei die wichtigsten. Damit richtet man das Bild auf der linken bzw. rechten Seite aus.

Mit der Angabe von ganzen Zahlen in den Feldern Horizontal und Vertical Space bestimmt man den den vertikalen und Horizontalen Abstand des Bildes.