Wenn Sie Beitragsbilder als Header in einem besonderen Zuschnitt (etwa im Letterbox-Style mit 1500x500px) anzeigen wollen, stossen Sie mit WordPress an Grenzen. Zwar lassen sich dynamische Beitragsbilder durchaus als Hintergrund verwenden – jedoch stets nur in der Originalabmessung, was selten Freude macht. Mit unserem Trick gelingt das Vorhaben aber trotzdem.
Bei einem meiner Webprojekte war es der Wunsch, auf jeder Beitragsseite das Beitragsbild als Header auf der ganzen Seitenbreite darzustellen. Jedoch nicht mal ein hoch- und mal ein querformatiges Bild, sondern immer ein spezieller Zuschnitt, der in den Image-Sizes bereits existiert. WordPress lässt einen hier alleine. Man kann wohl Beitragsbilder als Hintergrundbilder einrichten, diese werden entweder willkürlich beschnitten dargestellt oder aber sie müssen auch in exakt dem gewünschten Format in der Mediathek gespeichert sein. Beides wollte ich nicht. Mit dem folgenden Hack war ich erfolgreich.
Eingriffe sind nötig im entsprechenden Seitentemplate und – je nach Gusto auch im CSS-Stylesheet. Doch der Reihe nach:
1. Template ergänzen
In meinem Fall sollten die Letterbox-Banner nur auf den Divi-Projects angezeigt werden. Hierfür habe ich in meinem Childtheme die Datei single-project.php erstellt.
Das klingt wilder als es ist:
- Suchen Sie via FTP den Ordner wo Ihr Divi-Theme liegt. Meist wird dies in einem Unterordner Ihrer WordPress-Installation zu finden sein: wp-content/themes/Divi.
- Hier suchen Sie nach der Template-Datei. Ich möchte die Projects anpassen, also ist es bei mir single-project.php. Für Beiträge und Custom-Posts wäre es single.php
- Diese Datei kopieren Sie in den Ordner Ihres Child-Themes – z.B: wp-content/themes/Divi-Child-Theme
- Nun gehen Sie ins Backend Ihrer WordPress-Website und öffnen (via Design/Theme-Editor) die soeben kopierte Datei – in meinem Fall eben single-project.php.
Suchen Sie den Passus «the_content();». In meinem Fall liegt der auf Zeile 53 – in der single.php ist er auf Zeile 20 zu finden.- Uns interessieren nun vor allem die Zeilen unmittelbar davor: <div class=»entry-content»> und <?php
- Genau zwischen diesen beiden Zeilen fügen Sie nun folgenden Code ein:
<div class="header-image">
<?php
echo the_post_thumbnail('banner_big');
?>
</div>
Der Block müsste dann so aussehen:
- weiss unterlegt: der bisherige Code
- blau unterlegt: der neue Code
Gewisse Teile des Codes können Sie nun anpassen
- In Zeile 52: header-image
Hier können Sie eine CSS-Klasse eingeben, die Ihren Bedürfnissen entspricht. Bei mir ist es ein Seitenbanner, da passt header-image gut. - In Zeile 54: banner_big
Das Bildformat (1500x500px), welches ich als Banner darstellen will, hat die Formatbezeichnung banner_big. Diese mag bei Ihnen nicht passen; da müssten Sie jene Formatbezeichnung eingeben, die Ihre WordPress-Installation auch kennt.
Speichern Sie nun das Template. Ab sofort werden die Anpassungen in Ihren Beiträgen oder Projects sichtbar sein.
Aber es geht noch mehr. Hier ein Supplement für gestaltungsfreudige ZeitgenossInnen.
2. Banner-Bild mit CSS stylen
Dank der CSS-Klasse, die Sie im Code gesetzt haben (in obigem Beispiel «header-image») haben Sie nun noch die Möglichkeit, die Anzeige des Banners optisch anzupassen.
Dafür benötigen Sie etwas CSS-Code, den Sie unter Design/Customizer/Zusätzliches CSS ins Stylesheet Ihrer Website einfügen können:
@media all and (min-width: 981px) {
.header-image img {
opacity: 0.5;
-moz-opacity:0.5;
width: 100% !important;
max-width: 1920px;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);}
}
@media all and (max-width: 980px) {
.header-image {display: none;}
}Dieser Code hat gleich mehrere Aufgaben zu erfüllen: Er sorgt dafür, dass der Banner nur auf Anzeigen > 980 Pixel erscheint. Auf Anzeigen bis 980 Pixel (Zeilen 14-16) hingegen wird der Banner ausgeblendet. Falls Sie den Banner auf allen Gerätegrössen anzeigen möchten, benötigen Sie aus obigem Snippet bloss die Zeilen 2 bis 12.
Das Bild wird auf diesen Zeilen auf halbtransparent (opacity 0.5) eingestellt. Ferner wird es mit dem Filter grayscale(100%) vollständig in schwarz-weiss dargestellt. Selbstverständlich können Sie den Code nach Gusto anpassen und variieren.
Um den Effekt der obigen CSS-Kombination zu zeigen, hinterlegen wir das folgende Beispiel mit grünem Hintergrund:
Bild gemäss Original
Bild gemäss PHP- und CSS-Code (verkleinert)
Beide Bilder © Jörg Blanke/pixelio.de
Gar nicht mal so schwierig. Oder?
Werbung
Werbung
