Webdesign, SEO, Drupal, Joomla für Trier, Luxemburg: NETZATELIER

In diesem Tutorial wird gezeigt, wie man mit Drupal und dem iWebkit eine Appstore List gestalten kann.

Hier das Resultat, am Beispiel unserer Kunden- und Referenzenliste.

Vorbereitung: Ein unverzichtbares Werkzeug für die Entwicklung ist der Safari-Browser. Über Entwickler > User Agent kann man den Safari dazu bringen, die Webseiten als iPhone-Safari zu rendern.

iWebkit für Drupal und Mobile tools installieren und konfigurieren. Infos zum iWebkit.

1. Schritt: Eine View für die Ausgabe der Liste erstellen

2. Schritt: Die Theme Information aufrufen, den Dateinamen raussuchen, der die Standard-Template-Datei für das Reihen Theming überschreibt raussuchen und diese Datei im Stammverzeichnis des iWebkit-Templates anlegen.

3. Schritt: Das eigentliche Row-Theming. Ein brillantes Tutorial findet man hier: http://mustardseedmedia.com/podcast/episode30

In unserem Fall sieht das so aus, wobei der Inhalt der Felder der oben angelegten View über $fields['feldname']->content ausgegeben werden. Wichtig für die Appstore Liste ist, daß man ein Bild hat, einen Namen/Titel, einen kurzen Kommentar. Standardmäßig wird der Pfeil fürs weiterblättern generiert. Für die Logos wurde mit ImageCache in eigenes Preset erstellt. Für die Appstore-Liste vorgesehen sind Bilder mit 90x90 Pixeln.

<li class="store">
    <a href="<?php print $fields['path']->content; ?>" class="noeffect">
        <span class="image" style="background: url(<?php print #ffff00;">$fields['field_logo_fid']->content; ?>)"></span>
        <span class="name"><?php #ffff00;">print $fields['title']->content; ?></span>
        <span class="comment"><?php print #ffff00;">$fields['field_beschreibung_value']->content; ?></span>
        <span class="arrow"></span>
    </a>
</li>

In der für die ganze View zuständigen Template-Datei sollte irgendwie noch so etwas stehen (den Inhalt der View in eine Liste mit der CSS-Klasse "pageitem" packen:

<?php if ($rows): ?>
    <div class="view-content">
#ffff00;">        <ul class="pageitem">
              <?php print $rows; ?>
        </ul>
    </div>
  <?php elseif ($empty): ?>
    <div class="view-empty">
      <?php print $empty; ?>
    </div>
  <?php endif; ?>

Danach sollte es dann in etwa so aussehen wie oben :-)