betrifft
TYPOlight Version	ab 2.8
Contao Version	ab 2.9

Extensions	Catalog ab 2.0beta1

Inhaltsverzeichnis

1 Templates für den Catalog bearbeiten und verändern
2 Voraussetzungen für das Tutorial
3 Grundlagen
- 3.1 Alles ein Array das entries Array
- 3.2 Die Bestandteile der meta-Arrays
  - 3.2.1 Die allgemeinen Parameter
  - 3.2.2 Die speziellen Parameter
    - 3.2.2.1 Dateien
4 Beispiel Anpassungen

Templates für den Catalog bearbeiten und verändern

Der Catalog bringt eine Menge Templates mit. Für fast jedes Modul gibt es einen eigenen Satz Templates. Zusätzlich werden Standard Templates herangezogen um zum Beispiel die Galerie oder die Filter zu generieren.

Da der Catalog aber nur ein Grundgerüst darstellt wird man nicht umhin kommen sich die Templates nach eigenen Wünschen und Vorstellungen anzupassen. Zunächst geht es hier ganz allgemein um das Vorgehen bei der Template Anpassung. Wie man an bestimmte Werte kommt und so an die Ausgaben die man möchte. Zusätzlich werden hier noch ein paar Fallbeispiele vorgestellt, welche zum Teil aus den Wünschen/Problemen im Forum entstanden sind (Vielen Dank an alle die daran im Forum gearbeitet haben!!!).

Voraussetzungen für das Tutorial

wie ein Katalog erstellt wird sollte von anderen Tutorials klar sein. Es sollte also ein Katalog vorhanden sein mit Inhalten.
der Umgang mit Contao sollte bekannt sein
wie man Templates bearbeitet sollte in Grundzügen bekannt sein.

Grundlagen

Alles ein Array das entries Array

Um sich die Ausgabe von dem Array anzuschauen braucht man nur diese Zeile in das Template bringen:

<?php print_r($this->entries); ?>

Wenn man sich das Ergebniss nun auf der neu geladenen Seite anschaut ist das nicht gerade schön anzusehen. Alles steht hintereinander und ergibt einen Code Brei. Deswegen sollte man sich das am besten immer direkt in der Quellcode Ansicht anschauen. Da bekommt man alles schön eingerückt und verschachtelt zu sehen! Oder man setzt die Ausgabe in ein <pre>-Tag.

Auszug aus einem Immoblilien Katalog:

Das ist nur ein kleiner Auszug aus der Ausgabe. In dieser Ausgabe stehten verschiedene Dinge.

Am Anfang stehen immer die Grundinformationen (id, catalog_name, parentJumpTo, tablename,showLink, class). Die werden in der Regel nicht gebraucht, sind aber gut zu wissen, damit man mal kurz schauen kann ob man überhaupt richtig ist ;)

Alle Variablen die man bekommt stehen immer in dem Array data Um an die einzelnen Werte zu kommen, braucht man nur die Arrays von dem Wert durchzugehen bis nach oben.

Beispiel: Den Titel der Immobilie als Überschrift ausgeben:

<h3><?php echo $entry['data']['immo_titel']['value']; ?></h3>

Das value 'villa in tunesien' soll ausgegeben werden, welches sich in dem Array 'immo_titel' befindet und das ist in dem Array 'data'. So einfach bekommt man einzelne Werte ausgegeben.

Die Bestandteile der meta-Arrays

Die Arrays in so einer Ausgabe sind immer gleich aufgebaut. Je nach Feldtyp etwas anders.

Die Standard Informationen

class -> die CSS-Klassen des Items (eher wichtig in einer Liste, da man dort zum Beispiel even/odd zur Verfügung hat)
link -> Die URL der Leser Seite (auch eher Listen spezifisch)
url -> enthält nur die URL von dem Link. Damit kann man seine eigenen Links bauen.
data -> Hier sind alle Felder drin.

Die allgemeinen Parameter

Jedes Feld hat immer diese 4 Parameter:

   * [label] => Enthält das Label welches im Katalog vergeben wurde
   * [type] => Enthält den Feldtyp. Zum Beispiel: text, file, select, tags
   * [raw] => Enthält die Original Daten direkt aus der Datenbank. Hiermit kann man immer komplett eigene Ausgaben gestalten.
   * [value] => Enthält die vorformatierten Daten: 
                   Datei-Bild Feld => Bild Lightbox
                   Datei-download => den download Link
                   Text Feld => der Formatierte String (numeric, date, etc.)

Die speziellen Parameter

Dateien

[files] => Beinhaltet ein Array -> [0] .. [xxx] mit den Dateinamen
[meta] => Beinhaltet die meta-Angaben, wie oben genannt

Wenn es sich um eine Datei handelt (kein Bild) wird das meta-Array diese Werte enthalten:

[url] => die relative URL zum herunterladen
[alt] => den alt Text
[caption] => die Beschreibung in der meta.txt Datei
[size] => die größe in Byte
[sizetext] => die größe in lesbarer Form (z.B. 230.0 kB)
[icon] => das Icon (gesetzt wird der Standard vom System selber, basierend auf den Mime-Typen)

Wenn es sich um ein Bild handelt, wird das meta-Array diese Werte enthalten:

[src] => den Dateinamen von dem Bild in angepasster größe (wenn das benutzt wird im Katalog selber)
[alt] => Den alt-Text
[lb] => die einzigartige REL=lightbox ID damit die Slimbox angesteuert werden kann
[w] => Bild width
[h] => Bild height
[wh] => Bild width/height in einem String

Bei einer referenzierenden Tabelle können noch folgende Inhalte vorhanden sein:

[parentJumpTo] => die ID von dem referenzierenden Katalog (kann in Inserttags genutzt werden)
[parentLink] => Der komplette Link mit einem Standard Text "View item details"
[parentUrl] => Die relative URL zu der Detail (Leser) Seite

Beispiel Anpassungen

Einfache Überprüfung ob Inhalt vorhanden ist

Es gibt immer wieder einzelne Felder die nur optional zu befüllen sind. Wenn man die Ausgabe von einem Div nur machen möchte wenn auch Inhalte vorhanden sind, kann man das einfach mit einer if-Abfrage erledigen:

<?php if($entry['data']['immo_bildergalerie']['value']):?>
   <div class="immo_galerie"><?php echo $entry['data']['immo_bildergalerie']['value']; ?></div>
<?php endif;?>

In dem Beispiel wird die Bildergalerie mit dem umschließenden div nur dann ausgegeben wenn auch mindestens ein Bild vorhanden ist.

Wie man in eigenen Templates beim Katalog Thumbnails generieren kann

Thumbnails werden in Contao mit der Methode Controller::getImage() generiert. Wichtig dabei ist, dass nicht der ganze Code des Bildes zurückgegeben wird, sondern lediglich die URL zum Thumbnail.

Die Methode sieht wie folgt aus:

getImage($image, $width, $height, $mode='', $target=null)

Die Parameter erklären sich wie folgt:

$image (String) zwingend
- erwartet eine relative URL zum Bild, dass verkleinert werden soll (z.B. 'tl_files/meine_bilder/mein_bild.jpg')
$width (Integer) bedingt optional (Achtung: mind. eine Angabe zu Breite oder Höhe ist zwingend!)
- erwartet eine Zahl, die die Breite in Pixel angibt (z.B. 230)
$height (Integer) bedingt optional (Achtung: mind. eine Angabe zu Breite oder Höhe ist zwingend!)
- erwartet eine Zahl, die die Breite in Pixel angibt (z.B. 230)
$mode (String) optional (weitergehende Informationen auf dem offiziellen Contao-Blog)
- erwartet einen Angabe darüber, wie das Bild behandelt werden soll. Möglich sind:
  - '' (Exaktes Format) - default
  - 'proportional' (Proportional)
  - 'box' (An Rahmen anpassen)
$target (String) optional
- erwartet eine relative URL zu einem Bild, dass ersetzt werden soll (z.B. 'tl_files/meine_bilder/mein_zu_ersetzendes_bild.jpg')

Ein Beispiel für ein Template mit einem Thumbnail von 430px Breite und 300px Höhe, das proportional geparst werden soll, könnte also so aussehen:

<img src="<?php echo $this->getImage('tl_files/meine_bilder/mein_bild.jpg',430,300,'proportional'); ?>" alt="Mein alt-Text für mein Bild" />

Fortlaufende Nummerierung der einzelnen Einträge in einer Liste

Die Paginierung wurde berücksichtigt:

<?php
$perpage=3
$index=0
foreach ($this->entries as $entry):
  <$index++
  if (isset($_GET['page'])):
    $number = $index + ($perpage * ($_GET['page'] - 1))
  else:
    $number = $index
  endif;
  ...
endforeach;
?>

Wobei $perpage die Anzahl der Items enhält, die pro Seite ausgegeben werden.

Kategorien einmalig ausgeben und die Items darunter

Beispiel anhand eines modifizierten catalog_simple.tpl:

<?php
if (count($this->entries)):
   $lastcat=''; ?>
   <div class="layout_simple">
   <?php foreach ($this->entries as $entry):
      if ($lastcat!=$entry[data]['Kategorie']['value']):
         $lastcat=$entry[data]['Kategorie']['value']; ?>
         <div class="cat"><?php echo $entry[data]['Kategorie']['value']; ?></div>
      <?php endif; ?>
      <div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
      <?php foreach ($entry['data'] as $field=>$data):
         if ($field=='Kategorie') continue;
         if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
            <div class="field <?php echo $field; ?>">
            <div class="label"><?php echo $data['label']; ?></div>
            <div class="value"><?php echo $data['value']; ?></div>
            </div>
         <?php endif;
      endforeach;
      if ($entry['showLink'] && $entry['link']): ?>
         <div class="link"><?php echo $entry['link']; ?></div>
      <?php endif;
      if ($entry['linkEdit']): ?>
         <div class="linkEdit"><?php echo $entry['linkEdit']; ?></div>
      <?php endif; ?>
      </div>
   <?php endforeach; ?>
   </div>
<?php else:
   if ($this->condition): ?>
      <div class="condition"><?php echo $this->condition; ?></div>
   <?php else: ?>
      <p class="info">There are no entries matching your search.</p>
   <?php endif;
endif;
?>

Fortlaufende Nummern für die Zellen im Katalog

Am Beispiel von einem simpletable.tpl

<table class="layout_simpletable" summary="Catalog Items" cellspacing="0" cellpadding="0">
  <thead class="header">
    <tr>
      <?php list($field, $heading) = each($this->entries);
      $i = 0;
      foreach ($heading['data'] as $field=>$data):
      $i++;
        if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
          <th class="header<?php echo $i; ?>"><?php echo $data['label']; ?></th>
        <?php endif;
      endforeach; ?>
    </tr>
  </thead>
  <tbody class="body<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
    <?php foreach ($this->entries as $entry):
      $n++ ?>
      <tr class="item<?php echo $n; ?><?php echo $entry['class'] ? '  '.$entry['class'] : ''; ?>">
        <?php foreach ($entry['data'] as $field=>$data):
        $k++;
          if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
            <td class="field <?php echo $field; ?><?php echo $k; ?>">
            <?php if (strlen($data['value'])):
              if ($entry['url'] && $field == 'title'): ?><a href="<?php echo $entry['url']; ?>">
              <?php endif;
            echo $data['value'];
              if ($entry['url'] && $field == 'title'): ?></a>
              <?php endif;
            endif; ?>
            </td>
          <?php endif;
        endforeach; ?>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

Eine Bildergalerie erstellen, wo nur das 1. Bild ausgegeben wird und die anderen in der Lightbox vorhanden sind

Achtung: diese beiden Herangehensweisen sind noch ungetestet.

HTML: Die Ausgabe sollte ungefähr so aussehen: <spurce lang="php"> <a href="tl_files/image01.jpg" title="bla" rel="lightbox[lightbox_1]"><img src="tl_files/image01.jpg" alt="bla" /></a> <a href="tl_files/image02.jpg" title="bla" rel="lightbox[lightbox_1]"></a> </source>

Das 1. Bild mit Vorschaubild und die anderen Bilder nur als Link, damit diese ausgegeben werden, aber erst mal nix zu sehen ist.

Es gibt da ja im Grunde 2 Herangehensweisen: 1. Im Backend gibt man 1 Bild an und dann noch mehrere Bilder als Galerie (so hat man die volle Kontrolle darüber welches das Vorschaubild ist) 2. Man gibt nur eine Bildergalerie an.

Template (Grundüberlegung): 1. Grundüberlegung der Ausgabe allgemein:

<?php if($entry['data']['einzelbild']['meta']):?>
<div class="bilder">
     <strong><?php echo $entry['data']['einzelbild']['value']; ?></strong>
      <?php if($entry['data']['bildergalerie']['value']):?><?php echo $entry['data']['bildergalerie']['value']; ?><?php endif;?>
    </div>
<?php endif;?>

2. Grundüberlegung der Ausgabe allgemein:

<?php if($entry['data']['bildergalerie']['value']):?>
<div class="bilder">
      <?php echo $entry['data']['bildergalerie']['value']; ?>
    </div>
<?php endif;?>

Damit hat man einfach nur die normale Galerie. Das wäre für diesem Fall ja nicht passend; sei an dieser Stelle jedoch noch mal dokumentiert sein.

Um das jetzt zu verbinden, gibt es verschiedene Vorgehensweisen: 1.

<?php if($entry['data']['einzelbild']['meta']):?>
<div class="bilder">
     <strong><?php echo $entry['data']['einzelbild']['value']; ?>
<a href="<?php echo $entry['data']['einzelbild']['files']['0'];?>" title="bla" rel="lightbox[lightbox_1]"><img src="<?php echo $entry['data']['einzelbild']['meta']['0']['src'];?>" alt="bla" /></a>
</strong>
 <?php if($entry['data']['bildergalerie']['value']):?>
<?php foreach ($entry['bildergalerie']['value'] as $field=>$data): ?>
<a href="<?php echo $entry['bildergalerie']['value']['meta'][$field]['src'] ?>" title="bla" rel="lightbox[lightbox_1]" ></a>
<?php endforeach; ?>
<?php endif;?>
    </div>
<?php endif;?>

2. Für das 1. Bild (in Array ja die 0 eine andere Ausgabe machen):

<?php if($entry['data']['bildergalerie']['value']):?>
<?php foreach ($entry['bildergalerie']['value'] as $field=>$data): ?>
<?php if(($entry['bildergalerie']['value']['meta'][$field])=='0'):?>
<a href="<?php echo $entry['data']['einzelbild']['files']['0'];?>" title="bla" rel="lightbox[lightbox_1]"><img src="<?php echo $entry['bildergalerie']['value']['meta'][$field]['src'] ?>" alt="bla" /></a>
<?php else;?>
<a rel="lightbox[lightbox_1]" href="<?php echo $entry['bildergalerie']['value']['meta'][$field]['src'] ?>" title="bla"></a>
<?php endif;?>
<?php endforeach; ?>
<?php endif;?>

2 Katalog referenzieren

Hier im Forum ist die Herangehensweise beschrieben, wie man das machen kann ohne mit Referenzen aus catalog 2 zu arbeiten: [1]

Hier noch ein kurzes Beispiel wie das gehen kann:

In dem Catalog Leser von einem Autoren sollen die Bücher dargestellt werden (diese sind mit dem Feldtyp Tags referenziert). Die Bücher sind in dem Fall innerhalb des Array 'ref':

<?php foreach ($data['ref'] as $id=>$ref): ?>
 
		<div class="row_<?php echo $id; ?> buch <?php if($ref['bilder_buch']) echo "buch_mitbild";?>">
....
<?php endforeach; ?>

Alle Werte ausgeben und nur einen Anpassen (als Beispiel Bilder mit eigner Beschreibung)

Hier ein Auszug wie bei dem Feld beispiel_bild der gewünschte Code ausgegeben wird und ansonsten die Werte einfach normal vom Catalog ausgegeben werden.

<?php foreach ($entry['data'] as $field=>$data): ?>
<div class="field <?php echo $field; ?>">
 <?php if($field=='beispiel_bild'):?>
{{image::<?php echo $data['files']['0']; ?>?width=<?php echo $data['meta']['0']['w']; ?>&height=<?php echo $data['meta']['0']['h']; ?>&alt=<?php echo $data['value']; ?>&mode=crop&rel=lightbox}}
<?php elseif(!in_array($field, array('catalog_name','parentJumpTo'))):?>
    <div class="label"><?php echo $data['label']; ?></div>
    <div class="value"><?php echo $data['value']; ?></div>
<?php endif; ?>
</div>
<?php endforeach; ?>

Weitere Beispiele finden sich im engl. Wiki vom Catalog

http://code.google.com/p/typolight-catalog/wiki/EN_CatalogTemplatesTutorial

Beispiele im Forum:

Zwei Kataloge im Template verbinden

--MacKP 21:44, 21. Mai 2010 (UTC)

Alle Werte ausgeben und nur einen anpassen und als Bild ausgeben (Taxonomie mit verlinkten Icons)

Ähnlich wie im obrigen Beispiel, wird hier eine Spalte so angepasst, dass die Taxonomie IDs gegen Icons getauscht werden (auch ideal für Immobilien, Ferienwohnungen).

Zunächst wird abgefragt, welches Katalogfeld seperat behandelt wird <?php if($field=='tags'):?> . Zwischen den Kommentaren wird zunächst zum einfacheren Vorgehen die (verlinkten) Icons in eine Variable gespeichert ($icons) und darunter mittels foreach das Puffer-Array angesprochen und ausgegeben. Dadurch lassen sich auch Tageinträge größer eins verarbeiten:

<?php foreach ($entry['data'] as $field=>$data): ?>
<td class="field <?php echo $field; ?>">
 <?php if($field=='tags'):?>
<!------------------ ANFANG ------------------>
<?php
$icons=array(
  // Schema: 'id' => 'zu generierender html code',
  '2' => '<a href="#" title="eins"><img src="tl_files/eins.gif" alt="eins" /></a>',
  '3' => '<a href="#" title="eins"><img src="tl_files/zwei.gif" alt="zwei" /></a>',
  '4' => '<a href="#" title="eins"><img src="tl_files/drei.gif" alt="drei" /></a>'
);
foreach($data['ref'] as $info)
  echo $icons[$info['id']];
?>
<!------------------ ENDE ------------------>
 <?php elseif(!in_array($field, array('catalog_name','parentJumpTo'))):?>
     <div class="value"><?php echo $data['value']; ?></div>
 <?php endif; ?>
 </td>
 <?php endforeach; ?>

--carino 10:30, 24. Juli 2010 (UTC)

Zeilenumbruch im textarea Feld des Backend als HTML ausgeben

Ist ein Feld vom Typ textarea, kann man dort Zeilenumbrüche eingeben und speichern. Diese werden im Frontend aber nicht angezeigt. Mit folgendem Befehl werden die Umbrüche in HTML umgewandelt und damit im Frontend sichtbar. Den Code einfach vor der Ausgabe des description Feldes einfügen.

// replace new line feed \n (0x0A) in description field by HTML line break <br/>
$entry['data']['description']['value'] = str_replace("\xa", "<br/>", $entry['data']['description']['value']);

Catalog Templates anpassen

Aus Contao Community Documentation