Joomla! fit fürs iPhone machen - Mit eigenem Template und IUI

Um eine Website iPhone-gerecht darzustellen kann man auf die Javascript-Bibliothek iui von Joe Hewitt zurückgreifen. Wolfgang Disch von jfoobar hat diese Bibliothek in ein Joomla!-Template gepackt, ein Modul dazu geschrieben und stellt alles unter dem Titel „Joomla! goes iPhone“ auf seiner Website bereit. Mit diesen Erweiterungen lassen sich ganz leicht Beiträge von Joomla! auf dem iPhone anzeigen.

Websites treten auf mobilen Endgeräten anderen Anforderungen entgegen als auf dem Laptop oder Desktop. Die begrenzte Breite des Displays läßt eine Seite auf das Wesentliche reduzieren: Den Content. Doch niemand möchte Inhalte für mehrere Endgeräte kopieren. Wolfgang Disch schreibt: „Ich möchte hier eine Lösung vorstellen, die aus einem Template für das iPhone und einem Modul besteht, das Joomla!-Beiträge auf dem iPhone anzeigt.“

iPhone Downloads

In seinem Download-Bereich stellt Wolfgang das Modul mod_iphone_article (5.44 kB) und das Template iPhone One (213.82 kB) bereit.

Installation und Konfiguration

Im Backend lassen sich beide Erweiterungen bequem über „Erweiterungen > Installieren/Deinstallieren“ installieren. Joomla! erlaubt es uns Templates unterschiedlichen Menüpunkten zuzuweisen. So können wir einer einzelne Seite eine andere Optik geben. Dazu erstellen wir einen neuen Eintrag im Menü unserer Wahl, wechseln zum Template-Manager und weisen „iPhoneOne“ dem neuen Menüpunkt zu. Jetzt öffnen wir das Modul unter „Erweiterungen > Module“ und veröffentlichen es auf der Position „iphone“ und unter dem neuen Menüpunkt. Die Zuweisung entspricht hier der gleichen wie beim Template. Dann stellen wir die Parameter auf unsere Wünsche ein. Speichern. Fertig.

iPhone-Icon und Startup-Image

Eine Website läßt sich im iPhone auf den Home-Bildschirm legen. So öffnet man eine Website wie eine App. für das Icon und das Startup-Image liegen im Template „iPhoneOne“ zwei Bilder bereit: apple-touch-icon.png und startup.png.

Beide Bilder liegen im Joomla!-Root-Verzeichnis unter „templates/iphoneone/images“ und können nach Belieben ausgetauscht werden. Die Dateinamen und die -größen (Breite und Höhre) müssen dabei bestehen bleiben. Das apple-touch-icon.png hat eine Größe von 57x57 und das startup.png eine von 320x460 Pixeln. Das Icon kann ruhig eckig sein, denn die Abrundungen werden vom iPhone übernommen.

Automatische Weiterleitung

Damit ein Besucher der Website nicht auf den Menüpunkt klicken muss, wenn er die Seite mit dem iPhone betritt, leiten wir ihn automatisch weiter. Das geschieht per PHP im Standard-Template. Folgende Zeile in der index.php bewirkt die Weiterleitung:

if(eregi('iPhone|iPod', $_SERVER['HTTP_USER_AGENT'])) {Header('Location: index.php...');}

index.php... ersetzen wir mit den relativen Pfad zum neuen Menüpunkt. Der Code selbst kann ganz am Anfang des Indexes stehen. Zum Schluss verstecken wir den Punkt im Cascading Stylesheet (CSS) mit:

li.item23 {display:none;}

item23 einfach mit der Itemid des neuen Menüpunkts ersetzen und schon ist die eigene Joomla!-Website fit fürs iPhone.

Test der Darstellung

Mit dem iphone Browser Simulator iPhoney läßt sich die Darstellung unterm Mac gut testen. Unter Sourceforge findet Ihr das aktuelle Paket iPhoney als Download.