Teil 3 / 3. Bilder arrangieren …mit Plug-in Advanced Image Styles

Hauptseite, Teil 1 / Standard-Bildergalerie WordPress
Teil 2 / Bilder arrangieren … „für Seite mit voller Breite"

Inhaltsverzeichnis

Die Standard Bildergalerie WP
… gefolgt von Advanced Image Styles

Dabei geht es hier vorrangig um ein Gespür zur Positionierung insbesondere der Funktionalität des Floaten der Bilder.

Das Plug-in Advanced Image Styles (Kommentar von David K.) ist für Positionierung auch Umrandung der Bilder erst mal praktisch.

Aufrufs Bearbeitung eines Bildes unter Bild-Details erfolgt über Erweiterte Optionen „Image Border“ und „Image Margins“ die Positionierung des Bildes.

Nachfolgend Beispiele, je nach Gebrauch anzuwenden.

Ein Bild individuell anordnen und mit Text umfließen

Ein Bild mit Ausrichtung, wie hier Bild rechts, über style="margin-right: -60px"; und mit Text umfließen funktioniert wie von selbst. Dies ist nur als ein bspw., da dies hier über den Rand gar nicht responsive ist.

… mit zwei Bildern

Das hier ist nur ein Übungszettel. Dabei geht es hier vorrangig um ein Gespür zur Positionierung insbesondere der Funktionalität des Floaten der Bilder.

Beispiels Beschreibung

Das erste Bild ist mit margin-leftetwas nach links gesetzt. Das gefloatet zweite Bild ergibt geringfügigen Höhenunterschied zum ersten Bild und ist mit margin-top ausgeglichen. Die Reihenfolge ergibt sich aus alignleft und floatleft.
Darauf, das gefloatete Bild mit Text umfließen ist gleich darunter beschrieben. Auch das sich ergebende Missfallen der unkonformen Ausrichtung folgenden Überschrift ist gelöst.

<div>

<img class="alignleft wp-image-1934 size-medium" style="border: 2px solid red; margin-left: -60px;" src="http://die bilddatei" />

<img class="floatleft links wp-image-1934 size-medium" style="border: 2px solid yellow; margin-top: 6px;" src="http://die bilddatei" />

</div>

Nachfolgend (weiter unten) die Beschreibung zur obigen Auszeichnung <img class="floatleft links…, also zum CSS, class="links"

Text um das Bild floaten:

<div style="margin-right: -60px;">Text, Text, Text.</div>

Abstand zum Bild der nächster Überschrift hindurch weiteres CSS, `class="clear"`

<div class="clear"></div>
 <h4>Mehrere Bilder nebeneinander anordnen</h4>

Die Definitionen
class="links" und class="clear"

www.ohne-css.gehts-gar.net
- Die Auszeichnung links für Text umfließen.
s. 4.1. Lösungen, um Floating zu verhindern
- Die Auszeichnung clear für Abstand zum Bild der nächsten Überschrift bzw. nächsten Text.

CSS Stylesheet Editor (Customizer):

/*Gefloatet Bild mit Text umfl., img class="links"*/
.links {
 float: left;
 margin-right: 25px;
}

/*Abstand zum Bild od. Text, div class="clear"*/
.clear {
 clear: both;
}

Darstellung z. B.:

Duch CSS Auszeichnung links mit Textumfluß, wie ohne CSS Auszeichnung links, ebd. ohne Textumfluss.

Mehrere Bilder nebeneinander anordnen

Beispiels w. o., anstatt Text drittes Bild floaten

Die Definitionen
class="box" + box:last-child

Elemente nebeneinander anordnen

Im CSS Stylesheet Editor:

 .box {
 float: left;
 width: 32%;
 margin-right: 2%;
/*padding: 20px;
 background: #eee;*/
 box-sizing: border-box;
}

.box:last-child {
 float: left;
 width: 32%;
 margin-right: 0;
/*padding: 20px;
 background: #eee;*/
 box-sizing: border-box;
}

^{Danksagung dem Autor obigen Hinweises}

Folgendes …

<div class="box"><img class="alignnone wp-image-1934" style="border: 2px solid red; margin: 25px;" src="http://die bilddatei" /></div>
<div class="box"><img class="wp-image-1934 size-medium" style="border: 2px solid yellow; margin: 25px;" src="http://die bilddatei" /></div>
<div class="box:last-child"><img class="wp-image-1934 size-medium" style="border: 2px solid blue; margin: 25px;" src="http://die bilddatei" /></div>

… Beispiel, illustriert

Beispiel oben: Mit Beschriftung aller Bilder, also mit [ caption ], wie üblich, spricht div class="box" nicht an: das dritte Element wird nicht gefloatet.

Das zweite und nachfolgende Bild ohne Bildbeschriftung funktioniert das Floaten:

↑ Inhalsverz.