Um Bilder in ihrer Darstellung noch zu verbessern, gibt es einige Klassen, die man ergänzen kann. Die Klassen werden direkt in das <img>-Tag eingetragen, bzw. dort vorhandene Klassen ergänzt: <img class=“klassenname„>
Normales Bild ohne besondere Einstellung (d.h. in der Default-Einstellung des Themes).
Via Editor mittig eingefügt:
Wenn im Customizer die Option eingestellt ist, dass die Bilder einen Schattenwurf haben („Bilder schattieren“), wird dieser entsprechend eingestellt. Es gibt jedoch Situationen, in denen man normalerweise alle Bilder schattiert haben möchte, bis auf eine Ausnahme. Bzw. gilt dies auch umgekehrt.
Bilder ohne Schattenwurf erzwingen
Wenn im Customizer eingestellt ist, das Bilder ein Schattenwurf haben, kann man die Klasse noshadow ergänzen um dies zu verhindern:
Beispiel
Code
<img class="noshadow aligncenter size-medium wp-image-29938" src="http://www.pirate-rogue.de/files/2017/04/IMG_20170319_132517-300x169.jpg" alt="" width="300" height="169" />
Bilder mit Schattenwurf erzwingen
Wenn im Customizer abgeschaltet ist, dass Bilder ein Schattenwurf haben,kann man die Klasse shadow ergänzen um dennoch das Bild mit einem Schattenwurf zu versehen:
Beispiel
Code
<img class="noshadow aligncenter size-medium wp-image-29938" src="http://www.pirate-rogue.de/files/2017/04/IMG_20170319_132517-300x169.jpg" alt="" width="300" height="169" />
Bilder mit Rahmen
Bilder können mit einem Rahmen versehen werden. Hierzu gibt es die Klasse img-border.
Beispiel
Code
<img class="img-border aligncenter size-medium wp-image-29938" src="http://www.pirate-rogue.de/files/2017/04/IMG_20170319_132517-300x169.jpg" alt="" width="300" height="169" />
Bilder mit dünnen Rahmen
Bilder können mit einem dünnen Rahmen versehen werden. Hierzu gibt es die Klasse img-border-thin.
Beispiel
Code
<img class="img-border-thin aligncenter size-medium wp-image-29938" src="http://www.pirate-rogue.de/files/2017/04/IMG_20170319_132517-300x169.jpg" alt="" width="300" height="169" />
Runde Bilder
Bilder können abgerundet werden. Hierzu gibt es die Klasse rounded.
Bei der Anwendung sollte man jedoch Bilder verwenden, die dieselbe Höhe wie Breite haben.
Beispiel
Code
<img class="rounded aligncenter size-medium wp-image-29938" src="http://www.pirate-rogue.de/files/2017/04/IMG_20170319_132517-300x169.jpg" alt="" width="300" height="169" />
Bilder mit abgerundeter Ecke
Bilder können an den Ecken abgerundet werden. Hierzu gibt es die Klasse roundedges.
Beispiel
Code
<img class="roundedges aligncenter size-medium wp-image-29938" src="http://www.pirate-rogue.de/files/2017/04/IMG_20170319_132517-300x169.jpg" alt="" width="300" height="169" />