Hauptseite: Standard-Bildergalerie WordPress
Teil 3 / Bilder arrangieren … mit Plug-in Advanced Image Styles. Mit dem Plug-in Advanced Image Styles lassen sich die Bilder weitgehend beliebig positionieren, s. code-bude.net.
Nachfolgende Auszeichnungen gelten grundlegendem einfachen Modus.
Das Kapitel zeigt nur eine Möglichkeit zur Bildausrichtung, wie ich es mir auf meiner Website beigebracht habe. Im Beispiel für „Seiten“/Attribute/Template/“Seite mit voller Breite“.
Die Beispiele im Titel „Bild mit Text umfließen, Bild am Rand“ und „Bild mit Bildbeschriftung, mehr Abstand zum Rand und mit Text umfließen“, zeigen sich nur in Desktopansicht. Allerdings mit „Bild am Rand“ kommt es in Mobilansicht auf die individuelle Inhaltsbreite ⇔ des Themes an, ob das Bild noch im konformen Bereich oder abgeschnitten ist.
Ein Bild über Editor „Dateien hizufügen“, z. B. folgender Code:
<img class="wp-image-123 size-full alignnone" src="http://www.usw />
Bild, nicht mit Text umfließen
Bild, nicht mit Text umfließen, d. h. alignnone (oder zentriert aligncenter), Bild ’normaler‘ Platzierung:
Bild, mit Text umfließen
Bild, mit Text umfließen, Bild am Rand:
Class size-full kann mit selben Auswirkung anders heißen , wie size-medium.
<img class="size-full wp-image-456 alignleft" src="http://www.usw />
Bild, mit Text umfließen, Class size-full ersetzt mit size-top, Bild normaler Platzierung:
<img class="wp-image-789 size-top alignleft" src="http://www.usw />
Bild, mit Überschrift umfließen
Beispiels mit Überschrif <h4> voran und size-top, Bild normaler Platzierung:
<h4><img class="alignleft size-top wp-image-1012" src="https://simpel.wegerl.at/wordpress/wp-content/uploads/2015/08/image-4-a1.png" alt="image" width="60" height="120" />Bild mit Überschrift umfließen,</h4> ...
Bild mit Bildbeschriftung
Bild mit Bildbeschriftung, die Ausrichtung entweder „Keine“ oder „Zentriert“ (anders, mit Textumfluss wäre das Bild am Rand w. o.):
Bild mit Bildbeschriftung, mehr Abstand zum Rand und mit Text umfließen
der Auszeichnung durch class="page-content":
[ caption id="attachment_321" align="alignleft" width="60" class="page-content"]<img class="wp-image-321" src="https://simpel.wegerl.at/wordpress/wp-content/uploads/2016/03/image-5.png" alt="image" width="60" height="120" />pixabay.com[/caption ]
Also ähnlich „Bild mit Text umfließen, Bild am Rand“: Dieser Art das Bild (Template/Seite mit voller Breite) etwas eingerückt ist, aber sich konkret zur Seitenbreite (normale Platzierung) so nicht einrichtet, aber als Styling (Beispiel) gut sein kann.
(Ohne Bildbeispiel) Dieselbe Darstellung ohne Bildbeschriftung mit size-full oder size-medium:
<img class="page-content alignleft wp-image-321 size-medium" src="https://simpel.wegerl.at/wordpress/wp-content/uploads/2016/03/image-5.png" alt="image" width="60" height="120" />
Darstellung ohne Bildbeschriftung mit size-top:
- Diese Auszeichnung eignet sich
- bei Aufzählungszeichen,
- weil diese hiermit mit mehr Abstand vom Bild dargestellt sind.
<img class="page-content alignleft size-top" src="https://simpel.wegerl.at/wordpress/wp-content/uploads/2016/03/image-5.png" alt="image" width="60" height="120" />
Wenn es nicht passt, d.h. die Aufzählungszeichen links vom Bild dargestellt sind, möchte die Website neu geladen werden 😉 kann sein oder auch nicht.
… darum ist für solcherart Auszeichnung:
<img class="wp-image-6639 alignleft" style="margin-right: 45px;" src="https://simpel.wegerl.at/wp-content/uploads/2016/03/image-5.png" alt="" width="60" height="120" />
<ol style="list-style-type: lower-alpha;">
<li>Diese Auszeichnung eignet sich</li>
<li>bei Aufzählungszeichen,</li>
<li>weil diese hiermit mit mehr Abstand vom Bild dargestellt sind.</li>
</ol>
Konform und passend:
- Diese Auszeichnung eignet sich
- bei Aufzählungszeichen,
- weil diese hiermit mit mehr Abstand vom Bild dargestellt sind.
Bilder nebeneinander mit Bildbeschriftung
Wenn auf Seite mit voller Breite zwei oder mehrere Bilder mit Bildbeschriftung nebeneinander platziert sein sollen, stellen sie sich je nach Fall zu weit nach links oder rechts dar. Um diesen Umstand zu entgegnen, eine Tabelle erstellen und in diese die Bilder jeweilig der Ausrichtung „Zentriert“ einfügen. Die Tabellenlinien werden mit <table style="border: 0px;"> und jeweils <td style="border: 0px;"> unsichtbar:
<table style="border: 0px;"> <tbody> <tr> <td style="border: 0px;"> <img class="wp-image-2780" src="/wp-content/uploads/2015/08/image-1.png" alt="– ’na …" width="60" height="120" /> – ’na …</td> <td style="border: 0px;"><img class="wp-image-1506" src="/wp-content/uploads/2015/08/image.png" alt="" width="191" height="170" /> – fast!</td> </tr> </tbody> </table>
|
|
|
Obiges, zwei Bilder nebeneinander mit Bildbeschriftung funktioniert ebenso mit „floaten“, s. Beitrag Teil 3 Bilder arrangieren.
Einfache Gestaltungsmöglichkeit
Wenn’s zur Gestalung gereicht, den Randeffekt nützen durch links/rechts. Beispiel size-medium (richtung Rand) und size-top (’normale‘ Platzierung) und verwenden des Codes <br class="clear" />
<img class="alignright size-top wp-image-123" src="https://simpel.wegerl.at/wordpress/wp-content/uploads/2016/03/image-300x202.jpg" alt="image" width="300" height="202" /> <br class="clear" /><br class="clear" /><img class="alignleft size-medium wp-image-456" src="https://simpel.wegerl.at/wordpress/wp-content/uploads/2016/03/image-1-300x173.jpg" alt="image" width="250" height="144" /> <br class="clear" /><br class="clear" /><br class="clear" /><br class="clear" /><br class="clear" /><br class="clear" /><br class="clear" /> Zurück zum Beitrag <a href="https://simpel.wegerl.at/Bildergalerie-wp-bildgroessen-bildausrichtung/">Standard-Bildergalerie WordPress ↵</a>
oder ähliche Darstellung, mit den Tags, Attributen und -Werten sowohl <br class="clear: both" /> auch clear: both; und line-height: 100px;
<img class="alignright size-top wp-image-123" src="https://simpel.wegerl.at/wordpress/wp-content/uploads/2016/03/image-300x202.jpg" alt="image" width="300" height="202" /> <br class="clear: both" /><img class="alignleft size-medium wp-image-456" src="https://simpel.wegerl.at/wordpress/wp-content/uploads/2016/03/image-1-300x173.jpg" alt="image" width="250" height="144" /> <p style="clear: both; line-height:100px; text-align: left;">Zurück zum Beitrag <a href="https://simpel.wegerl.at/Bildergalerie-wp-bildgroessen-bildausrichtung/">Standard-Bildergalerie WordPress ↵</a></p>
Anmerkung: Vor und nach dem Code muss im Textmodus eine Leerzeile eingefügt sein, weil dieser sonst nach umschalten in den Visuellmodus gelöscht wird.
Die Auszeichnungen folgender Darstellung:
<br class="clear: both" /> <img class="size-top wp-image-6689 alignright" src="https://simpel.wegerl.at/wordpress/wp-content/uploads/2016/03/image-6-300x150.png" alt="strichmännchen" width="300" height="150" /> <img class="page-content alignleft wp-image-6688" src="https://simpel.wegerl.at/wordpress/wp-content/uploads/2016/03/image-3.png" alt="imagedomino" width="50" height="100" /> <p style="clear: both; text-align: left;">Zurück zum Beitrag <a href="https://simpel.wegerl.at/Bildergalerie-wp-bildgroessen-bildausrichtung/">Standard-Bildergalerie WordPress ↵</a></p>
Hauptseite Standard-Bildergalerie WordPress
Teil 3 / Bilder arrangieren … mit Plug-in Advanced Image Styles
Hinweise:
Tipps und Tricks beim Ausrichten von Text und Bildern
Text um Bilder fließen lassen
Abstand unter Bildern