Design der Ausgabe verändern

Verfasst von Hagen Graf am 28. July 2008 - 19:33

Jetzt sieht das alles ganz hübsch aus, aber meistens soll ja doch noch eine Kleinigkeit anders sein als im Standard. Also werden wir die Ansicht der Einzeldarstellung verändern.

11.7.1 Ein anderes Layout erstellen – direkt im PHP

Wie Sie bereits im Kapitel 10 gesehen haben, können Sie die Node-Ansicht einfach überschreiben und dann Ihre eigenen Designvorstellungen umsetzen. Kopieren Sie dazu die Datei /sites/all/themes/fourseasons/node.tpl.php und nennen die neue Datei /sites/all/themes/fourseasons/node-fahrzeug.tpl.php. Der Inhalt dieser Datei sieht so aus wie in Listing 11.1:

<?php phptemplate_comment_wrapper(NULL, $node->type); ?>
<div id="node-<?php print $node->nid; ?>"
class="node<?php if ($sticky) { print ' sticky'; } ?>
<?php if (!$status) { print ' node-unpublished'; } ?>
<?php if ($page == 0) { print ' teaser'; } ?>">
<?php print $picture ?>
<?php if ($page == 0): ?>
<h2><a href="<?php print $node_url ?>"
title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php if ($submitted): ?>
<span class="submitted"><?php print t('!date — !username',

array('!username' => theme('username', $node),
'!date' => format_date($node->created))); ?></span>
<?php endif; ?>
<div class="content">
<?php print $content ?>
</div>
<div class="clear-block clear">
<div class="meta">
<?php if ($taxonomy): ?>
<div class="terms"><?php print $terms ?></div>
<?php endif;?>
</div>
<?php if ($links): ?>
<div class="links"><?php print $links; ?></div>
<?php endif; ?>
</div>
</div>

Listing 11.1: node-fahrzeug.tpl.php

Sie können jetzt die Datei nach Ihren Wünschen anpassen. Sie merken allerdings schnell, dass alle wichtigen Informationen in einem großen Klumpen mit dem Namen $content liegen, auf dessen einzelne Felder Sie nicht direkt zugreifen können. Eine Lösung für PHP-erfahrene Benutzer wäre die Inhaltsanzeige des $node-Objekts:

<pre><?php print_r($node) ?></pre>

Das Ergebnis ist eine Anzeige aller Elemente dieses Arrays in dieser Form:

stdClass Object(

[nid] => 32

[type] => fahrzeug

[language] => de

[uid] => 1

[status] => 1

[created] => 1213205471

[changed] => 1213263292

...

)

Die Anzeige ist sehr hilfreich, es ist jedoch als Anfänger nicht ganz einfach, die richtige Schreibweise für einen Zugriff auf die einzelnen Elemente zu finden. Aber Drupal wäre nicht Drupal, wenn es dafür keine komfortablere Möglichkeit geben würde :-).

11.7.2 Installation des Hilfsmoduls Content Template

Das Modul Content Template ist eine echte Hilfe, wenn es um das Design eines Inhalts geht. Laden Sie die Datei contemplate-6.x-0.13.tar.gz von der Projektseite2 oder der CD, entpacken Sie sie in den Ordner /sites/all/modules und aktivieren Sie das Modul (Abbildung 11.9).

Modul Content Template aktivieren
Abbildung 11.9: Modul Content Template aktivieren

Danach finden Sie unter Verwalten – Inhaltsverwaltung – Content Templates eine Auflistung aller Inhaltstypen mit der Möglichkeit, Templates zu erzeugen (Abbildung 11.10).

Übersicht der Templates
Abbildung 11.10: Übersicht der Templates

Klicken Sie neben Fahrzeug auf den Link create template. Im Formularbereich Textkörper – Body Variables finden Sie alle zur Verfügung stehenden Variablen des Inhaltstyps in korrekter PHP-Schreibweise, beispielsweise die Variable für das zweite Fahrzeugbild $node->field_fahrzeugbild[1]['imceimage_path'] und ihr Wert /sites/default/files/u1/nissan_bild2.jpg (Abbildung 11.11).

Variablen im Inhaltstyp Fahrzeug
Abbildung 11.11: Variablen im Inhaltstyp Fahrzeug

Ausgerüstet mit diesen Kenntnissen, können Sie jetzt die Darstellung des Fahrzeuginhaltes mit chirurgischer Präzision vornehmen.

Die Variable

$node->field_fahrzeugbild[1]['imceimage_path']

enthält den Pfad zum zweiten zugeordneten Bild. Arrays fangen in PHP mit einer 0 an, daher die 1. Wenn Sie im Template den PHP-Befehl

<?php
echo $node->field_fahrzeugbild[1]['imceimage_path'];
?>

eingeben wird der Pfad ausgegeben. Da Sie vermutlich nicht den Pfad, sondern das Bild sehen wollen, müssen Sie die Variable in das entsprechende HTML-Tag bauen, beispielsweise so:

<?php
echo '<img src=“'.$node->field_fahrzeugbild[1]
.'“'.['imceimage_path'].'>';
?>


Jetzt sieht das alles ganz hübsch aus, aber meistens soll ja doch noch eine Kleinigkeit anders sein als im Standard. Also werden wir die Ansicht der Einzeldarstellung verändern.11.7.1 Ein anderes Layout erstellen – direkt im PHPWie Sie bereits im Kapitel 10 gesehen haben, können Sie die Node-Ansicht einfach überschreiben und dann Ihre eigenen Designvorstellungen umsetzen. Kopieren Sie dazu die Datei /sites/all/themes/fourseasons/node.tpl.php und nennen die neue Datei /sites/all/themes/fourseasons/node-fahrzeug.tpl.php. Der Inhalt dieser Datei sieht so aus wie in Listing 11.1:&lt;?php phptemplate_comment_wrapper(NULL, $node-&gt;type); ?&gt;&lt;div id="node-&lt;?php print $node-&gt;nid; ?&gt;"class="node&lt;?php if ($sticky) { print ' sticky'; } ?&gt;&lt;?php if (!$status) { print ' node-unpublished'; } ?&gt;&lt;?php if ($page == 0) { print ' teaser'; } ?&gt;"&gt;&lt;?php print $picture ?&gt;&lt;?php if ($page == 0): ?&gt;&lt;h2&gt;&lt;a href="&lt;?php print $node_url ?&gt;"title="&lt;?php print $title ?&gt;"&gt;&lt;?php print $title ?&gt;&lt;/a&gt;&lt;/h2&gt;&lt;?php endif; ?&gt;&lt;?php if ($submitted): ?&gt;&lt;span class="submitted"&gt;&lt;?php print t('!date — !username',array('!username' =&gt; theme('username', $node),'!date' =&gt; format_date($node-&gt;created))); ?&gt;&lt;/span&gt;&lt;?php endif; ?&gt;&lt;div class="content"&gt;&lt;?php print $content ?&gt;&lt;/div&gt;&lt;div class="clear-block clear"&gt;&lt;div class="meta"&gt;&lt;?php if ($taxonomy): ?&gt;&lt;div class="terms"&gt;&lt;?php print $terms ?&gt;&lt;/div&gt;&lt;?php endif;?&gt;&lt;/div&gt;&lt;?php if ($links): ?&gt;&lt;div class="links"&gt;&lt;?php print $links; ?&gt;&lt;/div&gt;&lt;?php endif; ?&gt;&lt;/div&gt;&lt;/div&gt;Listing 11.1: node-fahrzeug.tpl.phpSie können jetzt die Datei nach Ihren Wünschen anpassen. Sie merken allerdings schnell, dass alle wichtigen Informationen in einem großen Klumpen mit dem Namen $content liegen, auf dessen einzelne Felder Sie nicht direkt zugreifen können. Eine Lösung für PHP-erfahrene Benutzer wäre die Inhaltsanzeige des $node-Objekts:&lt;pre&gt;&lt;?php print_r($node) ?&gt;&lt;/pre&gt; Das Ergebnis ist eine Anzeige aller Elemente dieses Arrays in dieser Form:stdClass Object([nid] =&gt; 32[type] =&gt; fahrzeug[language] =&gt; de[uid] =&gt; 1[status] =&gt; 1[created] =&gt; 1213205471[changed] =&gt; 1213263292...)Die Anzeige ist sehr hilfreich, es ist jedoch als Anfänger nicht ganz einfach, die richtige Schreibweise für einen Zugriff auf die einzelnen Elemente zu finden. Aber Drupal wäre nicht Drupal, wenn es dafür keine komfortablere Möglichkeit geben würde :-).11.7.2 Installation des Hilfsmoduls Content TemplateDas Modul Content Template ist eine echte Hilfe, wenn es um das Design eines Inhalts geht. Laden Sie die Datei contemplate-6.x-0.13.tar.gz von der Projektseite2 oder der CD, entpacken Sie sie in den Ordner /sites/all/modules und aktivieren Sie das Modul (Abbildung 11.9).Abbildung 11.9: Modul Content Template aktivierenDanach finden Sie unter Verwalten – Inhaltsverwaltung – Content Templates eine Auflistung aller Inhaltstypen mit der Möglichkeit, Templates zu erzeugen (Abbildung 11.10).Abbildung 11.10: Übersicht der TemplatesKlicken Sie neben Fahrzeug auf den Link create template. Im Formularbereich Textkörper – Body Variables finden Sie alle zur Verfügung stehenden Variablen des Inhaltstyps in korrekter PHP-Schreibweise, beispielsweise die Variable für das zweite Fahrzeugbild $node-&gt;field_fahrzeugbild[1]['imceimage_path'] und ihr Wert /sites/default/files/u1/nissan_bild2.jpg (Abbildung 11.11).Abbildung 11.11: Variablen im Inhaltstyp FahrzeugAusgerüstet mit diesen Kenntnissen, können Sie jetzt die Darstellung des Fahrzeuginhaltes mit chirurgischer Präzision vornehmen.Die Variable$node-&gt;field_fahrzeugbild[1]['imceimage_path']enthält den Pfad zum zweiten zugeordneten Bild. Arrays fangen in PHP mit einer 0 an, daher die 1. Wenn Sie im Template den PHP-Befehl&lt;?phpecho $node-&gt;field_fahrzeugbild[1]['imceimage_path'];?&gt;eingeben wird der Pfad ausgegeben. Da Sie vermutlich nicht den Pfad, sondern das Bild sehen wollen, müssen Sie die Variable in das entsprechende HTML-Tag bauen, beispielsweise so:&lt;?phpecho '&lt;img src=“'.$node-&gt;field_fahrzeugbild[1].'“'.['imceimage_path'].'&gt;';?&gt;2 http://drupal.org/project/contemplate

0 Kommentare

Kommentar hinzufügen

  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <br><pre>
  • Zeilen und Absätze werden automatisch erzeugt.

Weitere Informationen über Formatierungsoptionen