Image TV erstellen

ModX Tutorial

Changing the net, one site at a time…

Image TV erstellen
home-icon
1. Elemente > Elementverwaltung aufrufen
   
image-tv01
   
2. "Neue Template-Variable" anlegen
   
Im folgenden wollen wir nun eine Image-TV anlegen. Dazu klicken wir in die Option "Neue Template-Variable" und wählen im nächsten Fenster aus dem Auswahlmenü den Eintrag: "Image". Nun müssen die Eingabefelder zu Bezeichnung, Beschreibung etc. ausgefüllt werden.
   
image-als-typ-auswaehlen
   
Nun muss unter Eingabetyp die Option "image" gewählt werden. Wichtig ist es auch, den Wert für die Objektauswahl ebenfalls auf "image" zu setzen. 

Wir sichern nun unsere Eingaben und schauen nach, ob alles vollständig kategorisiert und benannt worden ist. 
   

Wie man sieht ist die TV schon vollständig benannt und kategorisiert werden:

Name der Variablen header-image [ *header-image*]
Bezeichnung Fügt dem Template ein Header-Image hinzu.
Beschreibung  
Eingabetyp "Image"
Eingabeoptionswerte Hier kann die Url eines Bildes eingefügt werden, das dann standardmäßig erscheint, wenn die TV aufgerufen wird.
   
3. Template-Berechtigung / Zugriffsberechtiung festlegen

top-icon

Als letztes unten im Fenster die Template-Berechtigungen festlegen und die TV dann noch in der Dialog-Box darunter einer User-Group zuordnen.

 
4. Neue Ressource erstelen, Image-TV Optionsfeld testen

 

Sind alle Eingaben richtig vorgenommen worden, erscheint dann im Backend am Seitenende die Eingabemaske für unsere Image TV.


TV-Optionsfeld
 
   
5. Header-Image durch Variable ersetzen
 

Header Image mit TV
<div id="header" style="background: url('[ *header-image* ]') !important;"></div>

Um diese Modifikation vorzunehmen, klicken wir auf "Elemente" und wählen dort die Option "Elementeverwaltung". Unter dem Tab "Template-Verwaltung" suchen wir nun das für die Gestaltung der Site verantworltliche Template aus, öffnen es und suchen dort im HTML nach dem div, der das header-image beinhaltet. Dieser div hat meistens schon eine irgendwie benannte id: "class-whatever-it-may-be". In unserem Beispiel oben heißt diese id= "header".

Um die Informationen für id= "header" aus dem zugehörigen Style-Sheet zu "übergehen", weisen wir dem div das Header-Image enthält, den style "Background" zu. Die url verweist nach unserer Änderung nicht mehr auf einen Pfad zu einer Bilddatei, sondern beinhaltet die TV [ *header-image* ]. Der Befehl "!important" bewirkt, dass der Div von nun an nicht mehr von dem dafür verantwortlichen Stylesheet formatiert wird.

 

 top-icon