Benutzer-Werkzeuge

Webseiten-Werkzeuge


webedition:tipps:tipp20

SEO-optimierte Image-News-Slider mit webEditon und bxSlider

Der webEdition listview-Tag ist eine der mächtigsten Funktionen des Content Management Systems. Ich möchte den webEditon-Fans heute anhand eines Beispiels aufzeigen, was für ein wunderschönes Paar viele jQuery-Tools im Kombination mit webEdition darstellen. Hierfür habe ich den bxSlider (responsiv und „touch-enabled“) ausgewählt, den man sehr gut auf der Homepage eines Webprojekts einsetzen kann. Der Artikel beschreibt, wie man einen SEO-optimierten Image-News-Slider mit webEditon und bxSlider aufbaut.

1. Installation des bxSlider im webEdition-System

Nach dem Download und Entpacken des bxSlider lädt man den ganzen Ordner am besten per (S)FTP direkt auf den eigenen Webserver. Dafür habe ich immer einen Ordner /import parat, der außerhalb von webEdition direkt auf dem Server generiert wurde. Über das Import-Tool (Datei > Import/Export > Import) von webEdition kann man jetzt alle Dateien des bxSlider bequem aus dem externen Ordner in einen webEdition-Ordner /bxslider importieren (Menü: Dateien vom Server importieren).

2. Integration der wichtigen bxSlider-Dateien in das Homepage-Template

Der Aufbau einer einfachen HTML5-Seite für die Homepage mit den zugehörigen bxSlider-Dateien sieht in webEdition dann in etwa so aus:

<!DOCTYPE html>
<html lang="de" class="no-js">
 <head>
 <meta charset="utf-8">
 <we:title></we:title>
 <we:description></we:description>
 <we:keywords></we:keywords>
 
 <!-- Website Styles -->
 <we:css id="1"/>
 
 <!-- bxSlider Styles -->
 <we:css id="2" comment="/bxlsider/jquery.bxslider.css"/>
 </head>
 
 <body>
 <header>
 <h1>Titel der Website oder Logo</h1>
 <header>
 
 <nav>
 <!--- Navigation -->
 </nav>
 
 <div id="wrapper">
 <div id="slider">
 
 ... Hier soll der Homepage-Slider erscheinen!
 
 </div>
 </div>
 
 <!-- Integration der JQUERY Bibliothek -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
 <!-- bxSlider Skripte -->
 <we:js id="3" comment="/js/jquery.bxslider.min.js"/>
 
 <script type="text/javascript">
 $(document).ready(function(){
 $('.bxslider').bxSlider();
 });
 </script>
 </body> 
</html>

Oft ist es auch so, dass ich Skripte oder Stylesheets ex post leicht verändere. Dann kann man den Namen der Datei zum Beispiel mit einem Datumsstempel versehen (also z.B. styles-2015-04-15.css), um zu gewährleisten, dass über den Browser-Cache keine veralteten Dateien bei wiederkehrenden Besuchern geladen werden. Mit der internen Verlinkung in webEditon (<we:css/> und <we:js/>) ist diese Anpassung kein Problem, alle Pfade werden im Quelltext automatisch sofort aktualisiert. Um ganz sicher zu gehen, kann man auch einen Rebuild des Master-Templates starten.

3. Den bxSlider-Content-Slider mit webEditon befüllen

Der Beispiel-Code für den Slider auf der bxSlider-Website sieht so aus:

<ul class="bxslider">
 <li><img src="/images/730_200/tree_root.jpg" title="Funky roots" /></li>
 <li><img src="/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
 <li><img src="/images/730_200/trees.jpg" title="Happy trees" /></li>
</ul>

Es bietet sich an, die Zusammensetzung mit einer <we:listview> aus einem Dokumententyp „News“ aufzubauen.

Die Vorlage des Dokumententyps „News“ enthält in meinem Beispiel im <body> daher folgende Felder:

<h1><we:input type="text" name="Headline" size="60"/></h1>
<h2><we:input type="date" name="Date" format="d.m.Y" /></h2>
 
<we:ifEditmode><p>Foto für Bericht und Homepage: 900 x 400 Pixel</p></we:ifEditmode>
<we:img name="Image"/>
 
<we:textarea name="Content"  ...  />

Auf Basis dieses Dokuments soll also auf der Homepage ein Slider aufgebaut werden.

In einem ersten Schritt könnte dann das <we:listview>-Listing für den Slider im Homepage-Template so aussehen:

<we:listview type="document" name="Home"  doctype="News" order="Date" desc="true">
 <we:ifFound>
 <ul class="bxslider">
 <we:repeat>
 <li>
 <we:field type="img" name="Image" hyperlink="on"/>
 <h2><we:field type="text" name="Headline" hyperlink="on"/></h2>
 </li>
 </we:repeat>
 </ul>
 </we:ifFound>
</we:listview>

Über das Stylesheet könnte man jetzt das Bild und die Überschrift als Voransicht auf die verlinkte News optimieren. Allerdings gib es hier einen gravierenden Nachteil: webEdition würde ZWEI Links auf EINE News setzen (einmal auf dem Bild und einmal über die Headline). Das ist unschön und Google mag das auch nicht besonders. Ich baue daher das Slider-Listenelement mit Bild und Headline daher SEO-optimiert besser einzeln zusammen:

desc="true">
 <we:ifFound>
 <ul class="bxslider">
 <we:repeat>
 <li>
 <a href="<we:field name="we_path" />">
 <img src="<we:field type="img" name="Image" only="src"/>" width="900" height="400" alt="<we:field type="text" name="Description" />" title="<we:field type="text" name="Headline" />" />
 <h2><we:field type="text" name="Headline"/></h2>
 </a>
 </li>
 </we:repeat>
 </ul>
 </we:ifFound>
</we:listview>

Was passiert hier?

Über den Befehl <we:field name=“we_path“ /> kann ich innerhalb einer Listview nur den Pfad auf die News auslesen. Diesen Pfad schreibe ich in einen <a href>-Link der Bild und Überschrift umfasst. Seit HTML5 ist dies erlaubt.

Auch für das Bild lese ich nur den Pfad aus (<we:field type=“img“ name=“Image“ only=“src“/>), um dann alle Elemente des Bildes wieder einzeln zusammenzubauen. Man kann so sinnvoller das ALT-Feld und TITLE-Feld des Bildelements aus anderen Feldern der News-Datei im Slider befüllen (hier im Beispiel aus der Meta-Beschreibung und Überschrift der News). Man könnte so zum Beispiel auch schon einen Copyright-Hinweis aus einem definierten Feld der News-Seite ergänzen.

4. CSS-Klassen einzelnen Listenelementen hinzufügen

Eine weitere Möglichkeit eröffnet sich in Kombination mit den Kategorien von webEdition. Die Idee wäre es, jedem Slider-Listenelement eine eigene Hintergrundfarbe zuzuweisen. Dafür werden zunächst im webEdition-Kategoriensystem die Kategorien rot, blau und gelb generiert. Natürlich könnte man diese Kategorien auch inhaltlich logisch aufbauen und als Pressemitteilung, Bericht und Tagungsankündigung benennen und dann den einzelnen News zuweisen. Eine entsprechende Untermenge von News könnte dann auch an anderer Stelle auf der Website gelistet werden.

Man kann dann mittels einer webEditon-Abfrage die Kategorie in eine CSS-Klasse „verwandeln“. Die Einbindung in das Listenelement sieht dann so aus:

<li class="<we:category delimiter=" " doc="listview"/>" > ... (siehe oben) ... </li>

Jetzt muss man im Stylesheet nur noch die entsprechenden Styles definieren:

.rot (background: #ff0000; overflow: auto; padding: 1em;)
.blau (background: #0000ff; overflow: auto; padding: 1em;)
.gelb (background: #ffcc00; overflow: auto; padding: 1em;)

Damit das Bild nicht aus dem Slider herausläuft, natürlich nicht vergessen:

.bxslider {box-sizing: border-box; }
img (max-width: 100%; height: auto; border: 0)

In Kombination mit dem oben genannten Beispiel würde jedes Listenelement einen unterschiedlichen farbigen Rand erhalten.

Wenn man diesen Weg über die Kategorien nicht gehen möchte, kann man auch einfach ein Feld <we:input type=“text“ name=“CSS“ size=“7″/> im Template der News definieren (hier müsste dann später einfach eine hexadezimale Farbe eingegeben) und dieses Feld als Inline-Style des <li>-Elements ausgeben.

5. Kein Bild vorhanden? Mit webEdition abfragen.

Öfter als geplant, hat man kein Bild für eine News parat. Um ein unschönes „leeres“ Slider-Listenelement zu vermeiden, ist es daher ratsam, eine <we:ifFieldNotEmpty>-Abfrage in die Listview einzubauen. News, die kein Bild haben, werden somit gar nicht erst im Slider gezeigt. Zudem soll der Slider maximal fünf News darstellen, um die Ladezeit der Homepage nicht zu groß werden zu lassen. Im Ergebnis sieht dann der Slider mit den webEdition-Befehlen so aus:

<we:listview type="document" name="Home"  doctype="News" order="Date" desc="true">
 <we:ifFound>
 <ul class="bxslider">
 <we:repeat>
 <we:ifFieldNotEmpty match="Image" type="img">
 <li class="<we:category delimiter=" " doc="listview"/>">
 <a href="<we:field name="we_path" />">
 <img src="<we:field type="img" name="Image" only="src"/>" width="900" height="400" alt="<we:field type="text" name="Description" />" title="<we:field type="text" name="Headline" />" />
 <h2><we:field type="text" name="Headline"/></h2>
 </a>
 </li>
 </we:ifFieldNotEmpty>
 </we:repeat>
 </ul>
 </we:ifFound>
</we:listview>

Anstatt nach Datum zu sortieren, kann man den Slider auch immer zufallsgeneriert zusammensetzen, um einen interessanten Wechsel auf der Homepage bei erneutem Aufruf der Homepage zu erhalten. Dafür einfach order=“random()“ einbauen. Das bietet sich z.B. für die Präsentation eines Portfolio an.

6. Stylesheet des bxSlider optimieren

Im Stylesheet des bxSlider kann man diverse Anpassungen vornehmen. Es wird definiert, wie der Slider im Detail aussieht. Wichtig ist aber zu ergänzen, dass die ausgelesene <h2>-Headline transparent auf dem Bild erscheint und so einen Block bildet. Das kann so in CSS definiert werden:

.bxslider h2 {
 text-align: center;
 font-size: 1.4em;
 line-height: 1.8em;
 margin: 0;
 letter-spacing: 1px;
 font-weight: normal;
 position: absolute;
 bottom: 40%;
 width:100%;
 padding: 0.5em 0;
 font-weight: normal;
 color: #990000;
 background: #fff;
 opacity: 0.9;
 z-index: 10;
}

Das kann man dann natürlich noch anpassen wie gewünscht.

7. Ergebnis und weitere Ideen

Als Ergebnis erhält man mit webEditon einen sehr ansprechenden Content-Slider, der sich automatisch aus den in webEditon generierten News aufbaut. Google wird es sehr schätzen, wenn eine Homepage immer aktuell sowie die Links und Bilder SEO-optimiert sind. Mit webEditon kann man den Aufbau jedes einzelnen Elements optimal gestalten.

Für die Umsetzung auf Smartphones könne man sich auch noch andere Lösungen ausdenken. So wissen einige webEdition-Nutzer vielleicht noch nicht, dass man auch im <head> der HTML-Seite mit webEditon-Listviews arbeiten kann (indem man z.B. Ergebnisse aus einer Listview in eine dynamische PHP-Datei umleitet und diese dann im <head> einbettet). So wäre es z.B. denkbar, in der News im Edit-Modus ein großes Bild einzubauen, aus dem für verschiedene Endgeräte-Auflösungen verschiedene Thumbnail-Varianten ausgegeben werden. Diese könnte man als CSS-Background-Image in Kombination mit Media Queries in einzelnen Styles im <head> definieren, die dann später im Content-Slider wieder auftauchen. Hier bin ich noch am Tüfteln, wie das am besten aussehen könnte.

Wenn Euch das Tutorial gefallen hat, freue ich mich auf Feedback und Verbesserungsvorschläge.

Patrick Meyer

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

Recent changes RSS feed