Bilder mit Rahmen in den Thesis Theme Blog Artikeln erstellen und ausrichten

thesis

Das Einbinden eines Bildes im Thesis Blog ist das Einfachste und Effektivste, um die Aufmerksamkeit auf deinen Beitrag zu lenken und das Interesse deiner Leser zu wecken. Mit diesem Gedanken im Hinterkopf wollen wir uns einmal ein paar Möglichkeiten und Techniken ansehen, die du nutzen kannst, um Bilder in deinen Thesis Theme WordPress Blog einzufügen.

Verwende CSS-Klassen anstatt des Attributs align!

Wenn jemand ein Bild auf seiner Seite einbindet, dann erfolgt dies meistens über das Attribut align, damit es genau an der Stelle ist, an der er es haben möchte. Wenn du ein Bild beispielsweise rechtsbündig ausrichten willst, dann wirst du mit aller Wahrscheinlichkeit das folgende Attribut verwenden, um das gewünschte Ergebnis zu erhalten:

<img src="http://your_image_path" align="right" />

Leider ist das Attribut align veraltet und das W3C empfiehlt nur noch CSS zur Erstellung und Positionierung von Bildern.

Du denkst, das ist schade? Im Gegenteil – das Erstellen von Bildern mit CSS bietet eigentlich viel mehr Flexibilität als ihre HTML-Vorgänger und die Umsetzung ist genauso einfach. Es geht sogar noch besser damit, denn WordPress 2.5 erledigt die Ausrichtung jetzt ganz automatisch, sodass du nicht einmal den Code bearbeiten musst, um das Bild richtig darzustellen.

Hinweis: Moderne Browser unterstützen das Attribut align noch aus Kompatibilitätsgründen, aber der Punkt ist doch: Wenn du noch immer align verwendest, dann lebst du in der Vergangenheit.

In Thesis Bilder mit CSS-Klassen erstellen

Wenn du ein Bild in WordPress 2.5+ hochlädst, kannst du zwischen einigen Möglichkeiten wählen, wie dein Bild letztendlich dargestellt werden soll. Genau genommen musst du beides für dein Bild auswählen: Ausrichtung und Größe. Siehe dazu Abbildung 1 unten. (Wähle die geeignete Ausrichtung und Größe für dein Bild, bevor du es in deinen Beitrag einbindest.)

thesis

Meistens wirst du wahrscheinlich „Full size“ als Bildgröße auswählen. Bei der Ausrichtung bedarf es jedoch einer ausführlicheren Erklärung.

Wenn du bei der Ausrichtung Keine auswählst, wird dein Bild linksbündig angezeigt und der Text steht nicht direkt daneben und umläuft das Bild. WordPress verwendet dann automatisch die Klasse alignnone und das Ergebnis sieht dann so aus:

thesis

thesisWenn du Links als Ausrichtung wählst, erscheint dein Bild linksbündig und der Text steht direkt rechts neben dem Bild. WordPress verwendet dann automatisch die Klasse alignleft und dein Bild erscheint dann so, wie unser kleiner Erdmännchen-Freund hier. Ich finde jedoch, dass der Text etwas komisch aussieht, wenn er neben einem linkssbündig ausgerichteten Bild steht. Wenn du also diese Ausrichtung verwendest, geh sicher, dass dein Bild klein und nicht so aufdringlich ist, wie dieses.

thesisWenn du Rechts als Ausrichtung wählst, erscheint dein Bild rechtsbündig und der Text steht direkt links neben dem Bild. WordPress verwendet dann automatisch die Klasse alignright und sobald du deinen Beitrag veröffentlichst, hast du ein Bild, das rechts vom Text ist. Ich mache es generell so, dass wenn ich ein Bild einfüge, das halb so groß ist wie die Spaltenbreite, ich es rechtsbündig ausrichte.

Hinweis: Wenn der Text rechts neben dem Bild steht, entsteht ein schöner Textfluss, der sich gut liest. Steht der Text hingegen links neben dem Bild kann das Auge manchmal etwas schwerer folgen.

Wenn du Zentriert als Ausrichtung wählst, verwendet WordPress automatisch die Klasse alignright und du erhältst ein zentriert ausgerichtetes Bild (natürlich ohne nebenstehenden Text) wie dieses:

thesis

Wie du im Thesis Theme einen Rahmen um dein Bild erstellst

Ich finde, dass die oben geposteten Bilder mit einem Rahmen professioneller aussehen und besser in das Gesamtlayout eingebunden sind. Du kannst jedes Bild mit einem Rahmen versehen, indem du die Klasse frame verwendest. Leider macht WordPress das jedoch nicht automatisch. Aber keine Sorge, wenn du die untenstehende Anleitung befolgst, kannst du alles in Sekundenschnelle mit einem Rahmen versehen.

Wenn du einem bestimmten Bild einen Rahmen geben möchtest, musst du als erstes den HTML-Editor, wie in Abbildung 2 gezeigt, auswählen.

WordPress HTML Editor

Ermittel als nächstes das Tag img, das dem Bild entspricht, das du gerade eingebunden hast und füge die Klasse frame hinzu. Sobald dein Bild veröffentlich ist, hat es einen schönen Rahmen wie dieses hier:

thesis

Um genau zu verdeutlichen, wie die Klassenstruktur aussehen sollte, wenn du einen Rahmen erzeugst, sieh dir den Code an, mit dem das obige Bild erstellt wurde:

&lt;<strong>img</strong> class="alignnone frame size-full wp-image-14" src="..." /&gt;

Normale Bildgröße und Praxisbeispiele für das Thesis Theme

Die besten Ergebnisse erreichst du, wenn du dich an die folgenden Bildgrößenhinweise hältst:

Die Grundeinstellung der Spaltenbreite ist beim Thesis Theme 480px. Bilder die entweder mit alignnone oder aligncenter erstellt werden, dürfen eine maximale Breite von 480px haben und du kannst keinen Rahmen dazu erstellen. Wenn du dennoch einen Rahmen verwenden und die ganze Spaltenbreite füllen möchtest, komprimiere dein Bild auf eine maximale Breite von 458px.

Die Spitzfindigen unter euch werden feststellen, dass der Spalteninhalt rechtsbündig ist. Wenn du die Klasse alignnone anstatt aligncenter verwendest, kannst du das Design auf der linken Seite erhalten, auch wenn die Größe verändert wird.

Wenn du die Klasse alignright oder alignleft verwendest, sollte dein Bild eine maximale Bildbreite von 229px haben. Möchtest du auch hier einen Rahmen verwenden, sollte die Breite 207px betragen. Damit erreichst du eine perfekte horizontale Balance beim Spalteninhalt und beeindruckst deine Freunde.

Alternative Bildklassen

Ich weiß, dass einige von euch ihre Beiträge lieber im HTML-Editor anstatt im Bild-Editor erstellen und ich muss sagen: Ich stimme euch zu. Wenn ihr zu dieser kleinen Minderheit gehört, werdet ihr sicher mit Freude hören, dass ihr einige Tastenanschläge sparen könnt, wenn ihr die kürzeren Klassennamen, die immer noch das gleiche Ergebnis bringen, verwendet. Hier findet ihr einen kleinen Überblick:

block = alignnone
left = alignleft
right = alignright
center = aligncenter

Cool? Dann ab ans Werk zum Thesis Theme!

DIYthemes.com
How to Style Images in Blog Posts

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)
Bilder mit Rahmen in den Thesis Theme Blog Artikeln erstellen und ausrichten, 10.0 out of 10 based on 1 rating

{ 1 comment… read it below or add one }

Thomas August 7, 2012 at 16:43

super. schön wäre, wenn du noch erklärt hättest, wie das ganze mit den thesis bildeinstellungen und vorschaubildern genau funktioniert.
ist meines erachtens insbesondere mit den featured artikeln nicht ganz so einfach. entweder hast du das gleiche bild wie im beitrag oder du musst das vorschaubild selbst verkleinern.
das hier ist auf jeden fall einfacher, da hast du recht.

Reply

Cancel reply

Leave a Comment

*

Previous post:

Next post: