Benutzer-Werkzeuge

Webseiten-Werkzeuge


webedition:tipps:tipp21

Mit webEdition-Thumbnails responsive Background-Images gestalten

Eine Erfordernis der neuen Gerätewelt von Smartphones, Tablets, Netbooks und Widescreens ist es, Grafiken in verschiedenen Größen je nach Screengröße auszugeben. Man findet derzeit z.B. auf vielen Websites breite, große Hintergrundbilder( CSS: background-image) , die sehr eindrucksvoll aussehen können. Doch welche Bordmittel stellt webEdition bereit, dieses Feature responsiv zu unterstützen? Auch Google Page Speed wird es dankbar vermerken, wenn man am Smartphone nicht ein 1.600 Pixel breites JPG-Image laden muss, das für den Widescreen gedacht ist. Es gibt sicher mehrere Wege in webEdition, aber ein sehr praktischer und einfacher Weg ist der eingebaute Thumbnail-Generator in webEdition, wie ich kürzlich entdeckte.

Denkbar ist in einem webEdition-Template folgender Aufbau im <body> für einen Hintergrundbild-Container:

<div id="wrapper>
...
<div class="bigimage"></div>
...
</div>

Der umschließende Wrapper-Container erhält dabei die CSS-Angabe

#wrapper {
margin: 0 auto;
width: 100%;
max-width: 1600px;
min-height: 600px;
overflow: auto;
}

damit er responsiv reagiert.

In dem Container mit der Klasse „bigimage“ soll nun vom webEdition-Redakteur ein maximal 1600 x 400 Pixel großes Hintergrundbild via CSS eingesetzt werden können. Er soll die Möglichkeit erhalten, dies auf jeder einzelnen Seite der Website unterschiedlich festzulegen, es wird also nicht global über ein Stylesheet gelöst. Entsprechend geht es so weiter:

<div id="wrapper">
 
<we:ifEditmode>
 <we:img name="Bild"/>
<we:else comment="Frontend"/>
 <div class="bigimage"></div>
</we:ifEditmode>
 
</div>

In den <head> des selben Seiten-Templates kann die Angabe mit webEdition leicht übernommen werden. Dafür wird der Pfad aus dem <we:img>-Feld übernommen und der Style dort direkt zusammengebaut:

<we:ifNotEditmode>
<style type="text/css">
.bigimage {
display: block;
width: 100%;
height: 350px;
margin: 0;
padding: 0;
clear: both;
background-image: url(<we:img name="Bild" only="src" showcontrol="false" showinputs="false" showthumbcontrol="false"/>);
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</we:ifNotEditmode>

Das Attribut only=“src“ übergibt dabei erfreulicherweise nur den Pfad zum Bild. Das funktioniert schon einmal sehr gut. Der bigimage-Container ist übrigens etwas weniger hoch als das Hintergrundbild selber, damit das Hintergrundfoto optimal reagiert und sich einpasst.

Und jetzt kommt der Trick mit den webEdition-Thumbnails, um auch in Bezug auf die Datengröße des Images wirklich responsiv zu werden: Zuerst muss der webEdition-Entwickler über ein vorhandenes Image im we-System Thumbnail-Formate definieren. Bei verschiedenen „Breakpoints“ könnte das also zum Beispiel 1200 x 300 Pixel sein (passend für viele Notebooks) … oder 600 x 150 Pixel für Smartphones … und so weiter (iPad etc.).

Die Pfade zu den Thumbnails können jetzt AUCH direkt in den <head> der individuellen Seite ausgelesen werden. Sie müssen dann nur mit einer CSS Media Query kombiniert werden, damit es passt:

@media only screen and (max-width: 600px)
{ .bigimage {
width: 100%;
height: 125px;
background-image: url(<we:img name="Bild" thumbnail="600x150" only="src" showcontrol="false" showinputs="false" showthumbcontrol="false"/> );
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
}

Damit das große Basis-Bild nicht doch aus Versehen am Smartphone geladen wird, muss es auch mit einer Media Query im <head> kombiniert werden, damit es mobil komplett ignoriert wird:

@media only screen and (min-width: 1201px)
{ .bigimage {
width: 100%;
height: 350px;
background-image: url(<we:img name="Bild" only="src" showcontrol="false" showinputs="false" showthumbcontrol="false" /> );
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
}

Entsprechende Styles müssten jetzt natürlich noch für die anderen möglichen Screen-Auflösungen in <head> des Templates eingebaut werden. Google Page Speed hat nichts dagegen einzuwenden, wenn im <head> direkt Styles definiert werden. Die Styles sollen zudem nur im Edit-Modus erscheinen und nur dann, wenn das Image-Feld tatsächlich befüllt wird. Die Basis-Styles für die Klasse „bigimage“ können auch voran gestellt werden.

Hier noch einmal das komplette Code-Beispiel:

<!doctype html>
 
<html>
 
<head>
<meta charset="utf-8">
<we:title></we:title>
<we:description></we:description>
<we:keywords></we:keywords>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"/>
 
<we:ifNotEmpty match="Bild">
 
<we:ifNotEditmode>
 
<style type="text/css">
 
#wrapper { 
 margin: 0 auto;
 padding: 0;
 width: 100%;
 min-height: 600px;
 max-width: 1600px;
 overflow: auto;}
 
.bigimage {
 width: 100%;
 display: block;
 margin: 0;
 padding: 0;
 clear: both;
 background-repeat: no-repeat;
 background-position: 50% 50%;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;                    
 background-size: cover;}
 
@media only screen and (min-width: 1201px)
{.bigimage {
height: 350px;
background: url (<we:img name="Bild" only="src" showcontrol="false" showinputs="false" showthumbcontrol="false" />);}
}
 
@media only screen and (min-width: 601px) and (max-width: 1200px)
{.bigimage {
height: 250px;
background: url (<we:img name="Bild" thumbnail="1200x300" only="src" showcontrol="false" showinputs="false" showthumbcontrol="false" />);}
}
 
@media only screen and (max-width: 600px)
{.bigimage {
height: 125px;
background: url (<we:img name="Bild" thumbnail="600x150" only="src" showcontrol="false" showinputs="false" showthumbcontrol="false" />);}
}
 
</style> 
 
</we:ifNotEditmode>
 
</we:ifNotEmpty>
</head>
 
<body>
 
<div id="wrapper">
 
<we:ifEditmode>
  <we:img name="Bild"/>
 <we:else comment="Frontend"/>
  <div class="bigimage"></div>
<we:ifEditmode>
 
</div>
 
</body>
</html>

Im Ergebnis muss der Redakteur nur EIN großes Bild im Edit-Modus in ein Dokument einbauen und webEdition generiert dann automatisch für verschiedene Auflösungen die passende Bildgrößen. Fazit: Wieder einmal eine genial einfache webEdition-Lösung!

Patrick Meyer

webedition/tipps/tipp21.txt · Zuletzt geändert: 2015/12/22 19:59 von Marc Krämer

Recent changes RSS feed