Nachdem wir im letzten Beitrag über Redaxo und Portfolio-Design uns Gedanken um den Ausgangspunkt gemacht haben, betrachten wir heute eine erste nette kleine Erweiterung.

Die Grundidee ist wie so häufig der Blog von Chris Coyier - CSS Tricks. In einem seiner bisherigen Screencasts ging es um das Thema, dass Titel (in diesem Fall H2 - also auch seo-tauglich) nett und elegant das Bild überlagern und somit besser in Szene gesetzt sind, als ein öder Text unterhalb vom Bild.

Usability wie SEO optimierte Index-Seite für ein Redaxo Portfolio

Vorab sage ich, die Änderung wird nur wenige Minuten in Anspruch nehmen, da das Skript von Chris Coyier zum Download angeboten wird und somit auch sofort eingesetzt werden kann. Im Grunde wird unser Gerüst weiter ausgebaut.

Anmerkung: Schaut aber dennoch den Screencast einmal an, dieser geht ca. eine halbe Stunde und vertieft was Ihr gleich machen werdet.

Die Vorbereitung unserer Redaxo-Portfolio-Erweiterung

Nachdem das Demo-Paket von der jQuery-Seite heruntergeladen wurde, entpacken wir diese zunächst lokal da wir nur wenige Dateien aus dem jQuery Plugin benötigen.

Nun wird die Datei "jquery.titleblock.min.js" aus dem js-Ordner in unser Redaxo Content Management System transferiert. Wo am besten muss man selber wissen. Ich z. B. arbeite lokal im files-Ordner - für Kundenprojekte lege ich einen seperaten Template-Ordner an.

Daneben benötigen wir aus der style.css lediglich die paar Zeilen Code, damit wir eine gute Ausgangslage haben um den Titel an unsere Wünsche anzupassen.

Die Arbeitsweise des jQuery Plugins "titleblock"

Die Funktionsweise ist relativ einfach wie auch genial. Da wir ja unsere Shops, Blogs oder sonstige Seiten immer gern barrierefrei und seo-mäßig perfekt aufbauen nutzt das Plugin das title-Tag eines Bildes. Wir werden also gezwungen alle Tags zu verwenden. (link zu usability). Anhand dieses Titles wird nach dem <img-Tag> ein Span mit einem darauf folgendem H2 eingefügt, also eine Überschrift. Ob H2 oder H3 kann man selber in der js-Datei definieren, ich denke das benötigt keine weitere Erklärung. Falls doch werde ich dies gerne nachschieben.

Der Einstaz des jQuery Plugins

Zum Glück ist auch die Handhabung des Plugins sehr simpel gehalten. Wir laden wie gewohnt jQuery in unser Template - bevorzugt über das Google CDN, damit unsere Seite dann auch etwas schneller aufgebaut ist. Danach laden wir nur noch unseren Code hinein und fügen ein wenig Script mit bei. Danach ist der größte Zauber schon vorbei. In der Praxis sieht das folgendermaßen aus:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script src="<?php echo $REX['HTDOCS_PATH'] ?>files/jquery.titleblock.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("img").titleBlock({
removeTitle: false,
thefontSize: "24px"
});
});
</script>

In diesem Teil des Quelltextes geben wir an, dass der Titel nicht gelöscht werden soll, und die Schritgröße auf 24px gesetzt wird.

Anpassen unseres Redaxo-Portfolio-Moduls

Jetzt darf nicht vergessen werden unser Modul von letztem Mal anzupassen. Beim <img>-Tag muss noch ein title-Attribut hinzufügt werden, womit die Zeile dann folgendermaßen aussieht:

print '<div class="portf_pic"><a href="'.rex_getUrl($articleId).'?phpMyAdmin=fac4b407329t262ea922"><img src="index.php?rex_resize=220w__'.$teaserbild.'" alt="'.$keywords.'" title="'.$articleName.'"/></a></div>';

Anpassen des CSS-Codes von Redaxo

Wenn man jetzt das Portfolio Modul neu lädt, sieht man meistens dass das h2-Tag viel zu weit unter dem Bild ist. Sollte dies der Fall sein, müssen wir den top-Wert von h2 (in der CSS - Datei) so anpassen, dass dieser höher ist. In meiner Test-Installation sah der Code dann folgendermaßen aus:

/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
.image              { position: relative; margin-bottom: 20px; width: 100%; }
h2                  { position: absolute; top: 100px; left: 0; width: 100%; }
h2 span             { color: white; font: bold 24px/45px Helvetica, Sans-Serif; letter-spacing: -1px;
background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding: 10px; }
h2 span.spacer      { padding: 0 2px; background: none; }

Wer schon häufiger auf einer Seite mit H2 arbeitet, kann hierfür in der javascript-Datei auch eine andere Klasse anlegen, z. B. <h2 class="portfolioh2">. Das ist aber nur eine von vielen Möglichkeiten.

Abschließendes

Das soll es für heute wieder gewesen sein. Man sieht es braucht nicht viel um nette Gimmicks und Effekte einzubauen. Beim nächsten Mal gehen wir mit der Usability noch einen Schritt weiter und werfen dem Besucher große Bilder um die Ohren. Bis dahin - Viel Spaß beim basteln.

Weiterführende Links

• Screencast zum vertiefen der Methode auf css-tricks.com
• Wir erstellen ein Portfolio in Redaxo - Teil 1