Catalog Templates anpassen
Aus Contao Community Documentation
Unvollständiger Artikel: dieser Artikel ist noch nicht sauber bearbeitet.
Bitte erweitere ihn und entferne erst anschliessend diesen Hinweis. |
betrifft | |
---|---|
TYPOlight Version | ab 2.8 |
Extensions | TYPOlight Core, |
Inhaltsverzeichnis
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 im Forum entnommen sind.
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 TYPOlight 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 er 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 dein <pre>-Tag.
Auszug aus von einem Immoblilien Katalog:
Array ( [0] => Array ( [id] => 33 [catalog_name] => Immobilien [parentJumpTo] => 27 [tablename] => immo_immobilien_alle [showLink] => 1 [class] => first last even [data] => Array ( [immo_titel] => Array ( [label] => Titel [type] => text [raw] => villa in tunesien [value] => villa in tunesien ) [immo_gebiet] => Array ( [label] => Gebiet [type] => select [raw] => 141 [value] => Beja [ref] => Array ( [0] => Array ( [id] => 141 [pid] => 130 [tstamp] => 1273353133 [sorting] => 112 [type] => [alias] => beja [name] => Beja ) ) ) ... [immo_bild] => Array ( [label] => Bild - nur für das erste Bild (Ein Bild für die Vorschau / maximale Dateigröße: 2MB / maximale Maße in px: 800x600) [type] => file [raw] => tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/bild_01.jpg [value] => <a href="immobilien-leser/items/miethaus-1.html" title="Die Details des Eintrags ansehen"><span class="image first even"><a rel="lightbox[lbimmo_immobilien_allecatalogrelated0]" href="tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/bild_01.jpg" title="Bild 01"><img src="system/html/bild_01-0ec9b6d1.jpg" alt="Bild 01" width="200" height="100" /></a></span></a> [files] => Array ( [0] => tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/bild_01.jpg ) [meta] => Array ( [0] => Array ( [src] => system/html/bild_01-0ec9b6d1.jpg [alt] => Bild 01 [lb] => lbcatalogrelated0 [w] => 200 [h] => 100 [wh] => width="200" height="100" [caption] => [metafile] => ) ) ) [immo_bildergalerie] => Array ( [label] => Bildergalerie - alle anderen Bilder (für die Detail Ansicht / maximale Dateigröße: 2MB / maximale Maße in px: 800x600) [type] => file [raw] => a:4:{i:0;s:103:"tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/how 2 rubbeldiekatz.jpg";i:1;s:89:"tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/image.png";i:2;s:99:"tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/institut-aussen.jpg";i:3;s:96:"tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/james-wilson.jpg";} [value] => <span class="image first even"><a rel="lightbox[lbimmo_immobilien_allecatalogreader0]" href="tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/how 2 rubbeldiekatz.jpg" title="How 2 rubbeldiekatz"><img src="system/html/how 2 rubbeldiekatz-0d26e104.jpg" alt="How 2 rubbeldiekatz" width="50" height="50" /></a></span><span class="image odd"><a rel="lightbox[lbimmo_immobilien_allecatalogreader0]" href="tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/image.png" title="Image"><img src="system/html/image-6a4159ed.png" alt="Image" width="50" height="50" /></a></span><span class="image even"><a rel="lightbox[lbimmo_immobilien_allecatalogreader0]" href="tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/institut-aussen.jpg" title="Institut-aussen"><img src="system/html/institut-aussen-538b1b35.jpg" alt="Institut-aussen" width="50" height="50" /></a></span><span class="image odd"><a rel="lightbox[lbimmo_immobilien_allecatalogreader0]" href="tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/james-wilson.jpg" title="James-wilson"><img src="system/html/james-wilson-379f0b97.jpg" alt="James-wilson" width="50" height="50" /></a></span> [files] => Array ( [0] => tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/how 2 rubbeldiekatz.jpg [1] => tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/image.png [2] => tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/institut-aussen.jpg [3] => tl_files/usertreffen2010/immo/tunesien-immobilie_cat_items/immo_immobilien_alle/james-wilson.jpg ) [meta] => Array ( [0] => Array ( [src] => system/html/how 2 rubbeldiekatz-0d26e104.jpg [alt] => How 2 rubbeldiekatz [lb] => lbcatalogreader0 [w] => 50 [h] => 50 [wh] => width="50" height="50" [caption] => [metafile] => ) [1] => Array ( [src] => system/html/image-6a4159ed.png [alt] => Image [lb] => lbcatalogreader0 [w] => 50 [h] => 50 [wh] => width="50" height="50" [caption] => [metafile] => ) [2] => Array ( [src] => system/html/institut-aussen-538b1b35.jpg [alt] => Institut-aussen [lb] => lbcatalogreader0 [w] => 50 [h] => 50 [wh] => width="50" height="50" [caption] => [metafile] => ) [3] => Array ( [src] => system/html/james-wilson-379f0b97.jpg [alt] => James-wilson [lb] => lbcatalogreader0 [w] => 50 [h] => 50 [wh] => width="50" height="50" [caption] => [metafile] => ) ) ) ... [immo_sterne] => Array ( [label] => Sterne (Wie viele Sterne hat das Hotel) [type] => number [raw] => [value] => ) ...
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 Standart 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 drinn.
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
If this field is a file field (not image), the meta array will contain the following parameters:
* [url] => the relative download URL (when clicked this will download the file) * [alt] => the ALT text for your down load link (based on the filename) * [caption] => the caption, should it set in your meta.txt (see TL basics) * [size] => the size in bytes * [sizetext] => the size in readable text, e.g. (39.0 kB) * [icon] => the icon is automatically set from TL's standard file-type icons
If this field is an image field, the meta array will will contain the following parameters:
* [src] => the filename of the resized image (if resized using catalog or module overrides) to use in your own IMG tag * [alt] => The ALT text you can use in your IMG tag * [lb] => a unique REL= lightbox id to be used with slimbox (the default TL lightbox pop-up) * [w] => image width * [h] => image height * [wh] => IMG width/height compact string
Inspecting the Select/Tags field In addition to the standard fields, a select and tags field will also contain the array called ref which will contain all the fields from the remote or referenced table. In our sample above the fields are:
* id, pid, tstamp, sorting, type, alias, name (directly from the reference database)
If the remote/referenced table used in your select/tags field is another defined Catalog, the array additionally contains the following parameters:
* [parentJumpTo] => the ID of the referenced catalog reader page (if defined, usable in TL inserttags) * [parentLink] => the link containing the URL wrapped in the default jumpTo text "View item details" * [parentUrl] => the relative URL to the referenced catalog reader page
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.
--MacKP 21:44, 21. Mai 2010 (UTC)