Wer kennt das nicht? Man möchte dem Besucher seiner Webseite Arbeitsproben zeigen, welche auch noch schick in Szene gesetzt sein sollen. In Fachkreisen nennt man so etwas Portfolio. Leider gibt es für das Content Management System Redaxo keine fertige Möglickeit ein Portfolio anzuzeigen.
Da man das ja so nicht hinnehmen möchte müssen wir auch hier wieder einmal Hand anlegen.
Denn nicht nur der Besucher hat etwas davon bzw. potentielle Kunden, sondern auch die Suchmaschine, da wir hier wieder neuen Content für unser SEO bereitstellen können. Ebenso bieten wir unserem Besucher einen Mehrwert, damit er uns auch wieder besucht. SEO ist eben nicht nur für Suchmaschinen Diesmal wird daraus eine kleine Artikelserie, bis wir zu unserer fertigen Modulsammlung kommen. Ich plane ca. 3 - 4 Postings für dieses Thema ein. Interessierte sollten also am Ball bleiben

Ein kurzer Roundup

Unser Modul soll folgende Optionen beinhalten:

• Artikelliste mit Ausgabe eines Artikelbildes (ink. Thumbnail und Zoomeffekt)
• Ausgabe als Boxen wie man es von anderen Portfolioseiten kennt
• Kurzbeschreibungen sollen mittels jQuery elegant in Szene gesetzt werden

Im heutigen Teil wenden wir uns erst einmal der normalen Ausgabe mit Thumbnail zu, wogegen wir im zweiten Teil dann schon den Zoomeffekt einbauen werden. Zum Schluß fügen wir dann noch unsere Kurzbeschreibung hinzu, damit der Besucher auch eine Vorstellung bekommt, worauf er klickt.

Vorarbeiten zu unserem SEO-Portfolio

Wir legen uns zuerst eine Ordnerstruktur an, damit wir das später auch vernünftig ausgeben können. So kann man z. B. den Ordner "Webdesign - Portfolio" anlegen. In diesem neu angelegten Ordner bereitet uns Redaxo schon einmal vorab eine Index-Datei vor. In diesem Unterordner legen wir uns für jede Referenz einen neuen Unterordner an. Das Ergebnis sollte ungefähr so aussehen:

Redaxo seo-optimiertes Portfolio

Ebenso müssen wir uns auch etwas Text bereitlegen. Im Idealfall ist dieser schon für Suchmaschinen optimiert. Denn dieser Text wird dann an zwei Stellen im Content auftreten.

• Auf der Portfolio-Index-Seite
• Als Meta-Description auf der Detailseite

Wie im letzten Quick-Tip zu Redaxo (Redaxo-Artikel mit Meta-Angaben versehen)schon gepostet, sollte man in den Unterordner die Meta-Daten der einzelnen Artikel mit den gerade ebenen vorbereiteten Daten versehen, damit das nicht untergeht. Das spart uns später jede Menge Zeit beim Fehler suchen.

Die Ausgabe von Redaxo beeinflussen

Nun kommen wir zur Ausgabe auf der Index-Seite des Portfolios. Hierzu erstellen wir uns ein Modul "Portfolio-Index" mit folgendem Inhalt:

<?
$cat = OOCategory::getCategoryById($this->getValue(category_id));
$cats = $cat->getChildren();
asort($cats);
if (is_array($cats)) {
	foreach ($cats as $cat) {

	$catId = $cat->getId();
	$catName = $cat->getName();

	$article = $cat->getArticles();

		if (is_array($article)) {
			foreach ($article as $var) {
			$articleId = $var->getId();
			$articleName = $var->getName();
			$articleDescription = $var->getDescription();

           $teaserbild = $var->_art_file;
		   $keywords = $var->_art_keywords;

           print '<div class="portf">';

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

                   print '<div class="portf_name"><a href="'.rex_getUrl($articleId).'?phpMyAdmin=fac4b407329t262ea922">'.$articleName.'</a></div>';
                   print '<div class="portf_besch"><a href="'.rex_getUrl($articleId).'?phpMyAdmin=fac4b407329t262ea922">'.$articleDescription.'</a></div>';
                   print '</div>';}
}
}
}
?>

Kurzer Codeüberblick des Redaxo-Moduls

Wir lesen zunächst alle Unterkategorien der aktuellen Kategorie aus und erstellen uns ein Array mit allen Kategorien die Redaxo gefunden hat. Mit den Daten der Kategorien erstellen wir uns nun eine Liste aus den Artikeln selber. Wir ermitteln die ID, damit wir das ganze auch verlinken können. Ebenso benötigen wir die Description und den Artikelnamen. Jetzt kommt der Punkt, an dem wir unser Bild benötigen. Dieses finden wir dann in der Variable $teaserbild. Damit unser zu großes Bild nun verkleinert wird, müssen wir sicherstellen dass image_resize von Redaxo aktiviert ist. Diese Klasse hilft uns die Bilder on-the-fly zu verkleinern und im Cache abzulegen. Dieses rufen wir im -Tag mit einer Option auf:

index.php?rex_resize=220w__'.$teaserbild'

Mit dieser Zeile geben wir an, dass Redaxo das Bild auf 220px proportional verkleinern soll. Ist es nicht schön dass unser Content Management System uns die Arbeit abnimmt? Ich weiß nicht ob es zwingen notwendig ist, aber es schadet nicht den Haken bei "Teaser" zu setzen.

Die Ausgabe

Jetzt können wir auf unserer Portfolio-Index-Seite dieses Modul hinzufügen und sehen - das System gibt unsere Liste aus. Soweit so gut.

Abschließendes

Das ist schon mal ein guter Start in unserem kleinen Redaxo-Workshop. Jetzt haben wir schon mal eine nette Auflistung der Unterkategorien.
Es liegt an Euch wie Ihr die CSS aussehen lasst, im Beispielcode habe ich schonmal einige Klassen angelegt. Je nach Gefallen könnt Ihr sie floaten lassen, hover-Effekte erstellen usw. Der Fantasie sind kaum Grenzen gesetzt. Wie es weiter geht schreibe ich im nächsten Post zum Thema "Portfolio-Seite mit Redaxo erstellen".

Weiterführende Links

• Content Management System Redaxo
• Meta-Angaben in Redaxo eingeben
• Wir gestalten unser Redaxo-Portfolio - Teil 2