Bilder arrangieren …
„fĂŒr Seite mit voller Breite“

Hauptseite: Standard-Bildergalerie WordPress
Teil 3 / Bilder arrangieren 
 mit Plug-in Advanced Image Styles

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:

image

Bild, mit Text umfließen

image

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 />
iPad, Safari Browser
Beispiel Twenty Fourteen, individuelle Inhaltsbreite 524px; iPad, Safari Browser

imageBild, 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 />

 

imageBild, 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://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.):

Beschriftung

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://wegerl.at/wordpress/wp-content/uploads/2016/03/image-5.png" alt="image" width="60" height="120" />pixabay.com[/caption ]
Halbwissen eben

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://wegerl.at/wordpress/wp-content/uploads/2016/03/image-5.png" alt="image" width="60" height="120" />

Darstellung ohne Bildbeschriftung mit size-top:

  1. Diese Auszeichnung eignet sich
  2. bei AufzÀhlungszeichen,
  3. weil diese hiermit mit mehr Abstand vom Bild dargestellt sind.
<img class="page-content alignleft size-top" src="https://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://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:

  1. Diese Auszeichnung eignet sich
  2. bei AufzÀhlungszeichen,
  3. 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>

– ’na 

– ’na 


– fast!

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://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://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://wegerl.at/Bildergalerie-wp-bildgroessen-bildausrichtung/">Standard-Bildergalerie WordPress ↔</a>

&nbsp;

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://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://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://wegerl.at/Bildergalerie-wp-bildgroessen-bildausrichtung/">Standard-Bildergalerie WordPress ↔</a></p>

&nbsp;

Anmerkung: Vor und nach dem Code  &nbsp; 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://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://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://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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

DSGVO: Blog Website wegerl.at bedient sich dem Dienst Gravatar der Automattic Inc. In Angabe der E-Mail-Adresse, welche deiner Nutzung von Gravatar, erfolgt der Service nach Art. 6 Abs. 1 lit. f) DSGVO. Also nachdem dein Kommentar von wegerl.at freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.

Das Tun(ING) fĂŒr die Website! 🖇

Do NOT follow this link or you will be banned from the site!