Runde Bilder sieht man mittlerweile auf vielen Websites. Sie sehen einfach etwas schöner und stimmiger aus, als Bilder, die einfach viereckig sind. Für den „Über mich“-Bereich in der Sidebar brauchte ich ein rundes Bild.
Die bereits installierten Widgets boten mir zwar eine abgerundete Möglichkeit an, allerdings war das Bild dann viel zu groß. Ein neues Plugin bzw. Widget wollte ich dafür nicht installieren, Photoshop oder ein anderes geeignetes Bildbearbeitungsprogramm hatte ich nicht auf dem aktuellen Rechner. Daher habe ich folgende einfache Lösung für runde Bilder mit HTML/CSS verwendet.
1. Runde Bilder mit CSS
Fügt folgende Codezeilen in eure CSS-Datei ein. Entweder über den Theme-Editor bei WordPress, direkt über die CSS-Datei (Down- und Upload mit einem FTP-Programm) oder über eine CSS-Implementierung, die euer Theme ggf. anbietet.
/* Runde Bilder */
.rund {
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px
}
Sobald ihr die CSS-Daten eingebaut habt, könnt ihr auch schon runde Bilder problemlos verwenden.
2. Runde Bilder mit HTML
In der Sidebar habe ich ein HTML-Widget hinzugefügt, in anderen Bereichen könnt ihr einfach den Text-Editor verwenden, um den HTML-Code für das runde Bild einzubauen.
<img class="rund" src="dein-bild.jpg" width="[Bildgröße]" alt="[Alternativtext]">
Ihr seht, runde Bilder mit HTML/CSS sind kein Hexenwerk.
Was passiert? Durch die Definition der Klasse in der CSS-Datei könnt ihr dem Bild diese Klasse im HTML zuordnen. Die CSS-Klasse wird dann für dieses Bild angewendet.
Vergesst den alt-Tag nicht, damit ihr eure Bilder entsprechend unterstützt (siehe Bilder SEO).
Hat’s geklappt?
Warum kein Plugin?
Eventuell kommt die Frage auf, weshalb ich kein einfaches Plugin installiere. Ja, das kann man natürlich machen. Ich bin jedoch sehr performancegetrieben. WordPress stellt ein super CMS für jedermann bereit, für Ladezeiten und SEO durchaus geeignet. Allerdings torpediert jedes Theme, jedes Plugin, jedes JavaScript dieses optimierte System. Viele „SEO ready“-Versprechen der Plugin- und Theme-Anbieter sind einfach nicht wahr.
Vieles ist also sehr einfach und damit ressourcenschonend mit wenigen Codezeilen umsetzbar. Probiert’s einfach!
Wenn ihr noch mehr Tipps und Tricks für WordPress lesen wollt, schaut einfach in meinen WordPress Blog.
Bei mir wird ein rechteckiges Bild verzerrt dargestellt, wenn ich es mit css rund mache. Bei quadratischen Bildern funktioniert es. Wie haben Sie es in dieser Qualität hinbekommen oder mache ich etwas falsch?