Trick # 189 | Dieser Beitrag beinhaltet 1780 Wörter. – Geschätzte Lesezeit: ca. 9 Minuten.
Das Seitenverhältnis der Beitragsbilder, welche im Divi-Blog-Modul angezeigt werden lässt sich anpassen. Standardmässig bildet das Blogmodul Bilder mit 400x250px ab – was einem Seitenverhältnis von 8:5 entspricht. Die Darstellung lässt sich aber übersteuern; selbst dann, wenn das Bild auf dem Server gar nicht im gewünschten Format vorliegt. Wir zeigen Ihnen wie das geht.
Gleich 7 verschiedene Bild-Seitenverhältnisse haben wir für Sie aufbereitet. Sie funktionieren auch dann, wenn das gewünschte Format gar nicht vorliegt.
Zwei Schritte sind bei der Umsetzung vonnöten:
- Um den Trick anzuwenden, benutzen Sie eines der untenstehenden Snippets. Der Code gehört in das CSS-Stylesheet Ihrer Divi-Website – unter Design/Customizer/Zusätzliches CSS können Sie ihn einfügen.
- Ferner müssen Sie dem Divi-Blog-Modul mitteilen, welche CSS-Klasse verwendet werden soll. Sie finden diese direkt bei untenstehenden Beispielen vermerkt. Die CSS-Klasse können Sie kopieren und im Bearbeitungsmodus des Blog-Moduls unter «Erweitert», «CSS-ID & Klassen» und «CSS-Klasse» eintragen.
Wählen Sie nun ein passendes Seitenverhältnis aus. Jeweils links sehen Sie den Effekt, rechts den zugehörigen CSS-Code sowie die Klasse für Ihr Blog-Modul:
Square 1:1
CSS-Code
CSS-Klasse «blog-image-1-1»
.blog-image-1-1 .entry-featured-image-url {
padding-top: 100%;
display: block;
}.blog-image-1-1 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 16:9
CSS-Code
CSS-Klasse «blog-image-16-9»
.blog-image-16-9 .entry-featured-image-url {
padding-top: 56.25%;
display: block;
}.blog-image-16-9 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 4:3
CSS-Code
CSS-Klasse «blog-image-4-3»
.blog-image-4-3 .entry-featured-image-url {
padding-top: 75%;
display: block;
}.blog-image-4-3 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 3:2
CSS-Code
CSS-Klasse «blog-image-3-2»
.blog-image-3-2 .entry-featured-image-url {
padding-top: 66.66%;
display: block;
}.blog-image-3-2 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 9:16
CSS-Code
CSS-Klasse «blog-image-9-16»
.blog-image-9-16 .entry-featured-image-url {
padding-top: 177.77%;
display: block;
}.blog-image-9-16 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 3:4
CSS-Code
CSS-Klasse «blog-image-3-4»
.blog-image-3-4 .entry-featured-image-url {
padding-top: 133.33%;
display: block;
}.blog-image-3-4 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 2:3
CSS-Code
CSS-Klasse «blog-image-2-3»
.blog-image-2-3 .entry-featured-image-url {
padding-top: 150%;
display: block;
}.blog-image-2-3 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Viel Erfolg beim Ausprobieren.
Werbung
Werbung
