Ditto Template-Tuning

ModX Tutorial

Changing the net, one site at a time…

Ditto Template-Tuning
home-iconwarning-icon
1. Verbesserung des Layouts:
  
Im ersten Schritt haben wir unserem Template durch die entsprechenden "Platzhalter"
[ +pagetitle+] / [ +introtext+] / sowie [ +url+] einige nützliche Funktionalitäten verliehen, doch das Design ist nicht überwältigend. Alle Angaben sind direkt aneindergeklatscht und das Layout wirkt nicht sehr gekonnt.
  
 layout-alt
 

Um das zu ändern, rufen wir nun unter Elemente > Elemente-Verwaltung > Chunks den Chunk auf, der unser Template formatiert und im Moment noch so aussieht und ändern das HTML.

 

code-alt

 

Wir fügen einige neue Tags ein, um Abstände zwischen den Elementen zu schaffen und wollen, dass die Überschrift ein wenig größer wird und setzen eine Formatierung ein, sodass der "read more..."-Text  rechtsbündig unter dem Introtext sitzt.
 
code-neu
 
Die Browser-Vorschau dürfte eigentlich schon das gewünschte Ergebnis zeigen ...
 top-icon
ditto-screenshot-neu
 
2. Anzeige der Blog-Einträge festlegen:
Sinn eines Blogs ist es, Einträge zu sammeln und wiederzugeben.
Das hat den Vorteil, dass man viele sach- und themenspezifische Informationen abrufen kann, doch hat den Nachteil, dass die Blog-Seite mit wachsendem Content rasch zu lang und zu unübersichtlich wird.

Deswegen wollen wir nun die Zahl der Einträge, die Ditto reflektiert, begrenzen und eine Navigation innerhalb der Einträge hinzufügen.

Dazu rufen wir den Ditto-Call im Content-Bereich unserer Blog-Seite mit der ID 51 auf:
 

[ !Ditto? &parents=`52` &tpl=`DittoTemplate`&display=`2`! ]

Der "Platzhalter" `&display= ''2`legt fest, dass Ditto nur zwei Blog-Einträge auf der Seite anzeigt.

 
3. Anzeige der Blog-Einträge festlegen
 
  
Um unseren Lesern eine Navigation zu den nicht dargestellten Blog-Einträgen zu gewährleisten, erweitern wir den Ditto-Call um einen weiteren "Platzhalter", der eine Paginierung ermöglicht.
Dazu setzen wir unter den erweiterten Ditto-Call einfach folgende "Platzhalter":
 
   
[ !Ditto? &parents=`52` &tpl=`DittoTemplate`&display=`2`&paginate=`1` &paginateAlwaysShowLinks=`0`! ]

[ +previous+] [ +pages+] [ +next+]
 
   
 call-in-resousrce  
 top-icon  
ditto-layout-final  
   
Wie der Screenshot oben zeigt, waren unsere Bemühungen erflogreich:

  • der Blog zeigt nur zwei Einträge
  • unten auf der Seite werden die weiteren Blog-einträge angezeigt, zu denen man nun navigieren kann
 
top-icon  
warning-icon Download des Htmls für das Styling des Blog-Chunks