Bilder arrangieren …
mit Plug-in Advanced Image Styles

Hauptseite: Standard-Bildergalerie WordPress
Teil 2 / Bilder arrangieren … „für Seite mit voller Breite“

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

image

Ein Bild mit Ausrichtung, wie hier Bild rechts, über style="margin-right: -60px"; mit Text umfließen funktioniert wie von selbst.

 

 

… mit zwei Bildern

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 alignleftund 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“
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.:

image

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
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
Bildbeschriftung
Bildbeschriftung
Bildbeschriftung

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:

Bildbeschriftung

 

↑ Inhalsverz. 

Hauptseite: Standard-Bildergalerie WordPress
Teil 2 / Bilder arrangieren … „für Seite mit voller Breite“

WP-Galerie

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