Joomla dynamische Modulpositionen

Aus revampedia
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Anpassungen am Template

index.php

Um Modulpostitionen mittels eines ImageMaps einzufügen muss in der index.php des gewählten Templates innerhalb des <body>-Tags hinter den bereits vorhandenen Modulpostitionen folgender Code eingetragen werden:


<map name="imagemap1">
   <div id="imagemap_modul1">
     <jdoc:include type="modules" name="imagemap_modul1" />
   </div>
   <div id="imagemap_modul2">
     <jdoc:include type="modules" name="imagemap_modul2" />
   </div>
</map>

Dabei können beliebig viele Module hintereinander aufgelistet werden, wenn jedes Modul einen eigenen Namen bekommt.

Es ist auch möglich für mehrere Seiten unterschiedliche Image-Maps zu definieren. Dazu werden einfach noch weitere <map>-Tags angefügt, wobei jedes >map>-Tag einen eigenen Namen bekommen muss.

templateDetails.xml

Die Datei templateDetails.xml des verwendeten Templates in einem Texteditor bearbeiten:

Im Bereich <postitions> hinter den bestehenden Postitionen eine Zeile für jedes ImageMap und eine Zeile für jedes Modul einfügen:


<position>imagemap1</position>
<position>imagemap_modul1</position>
<position>imagemap_modul1</position>

template.css

In der Datei template.css (im Template meist innerhalb des Ordners css zu finden), können die Postitionen für Popup-Tooltips zu den einzelnen Modulen festgelegt werden über die Namen, die den <div> -Tags bei den jeweiligen Modulen gegeben wurden.

Also z.B. für das Module mit Namen "imagemap_modul1":
/* imagemap_modul1 */
a.tooltip > span.imagemap1 {
   position: absolute;
   width: 400px;
   height: 200px;
   left: 900px;
   top: 650px;
   background-color: white;
   z-index: 1;
   padding: 10px;
}

Module erstellen und bearbeiten

Mit "Erweiterungen -> Module -> Neu -> Eigene Inhalte (Leeres Modul)" wird ein neuen Modul erzeugt.

Für das Modul "imagemap_modul1", das zum Image-Map "imagemap1" gehört werden folgende Einträge gemacht:

Bei "Titel" und bei "Postition" wird der im Template festgelegte Modulname verwendet, also: imagemap_modul1

Bei der Benutzerdefinierten Ausgabe muss der Editor in den Quellcode-Modul geschaltet werden.
Dort wird dann folgender Code eingetragen:


<p>
<a class="tooltip" href="index.php/pfad_zu_einem_Inhaltsbeitrag_mit_dem_Text_der_im_Popup_angezeigt_werden_soll">
<area coords="742,940,723,890,577,893,598" href="index.php/pfad_zum_Inhaltsbeitrag_der_beim_Anklicken_des_Links_geoeffnet_werden_soll" shape="poly" />
<span class="imagemap1">
Text der auf der Website im Popup erscheint
</span>
</a>
</p>

Die Koordinaten für den Eintrag unter <area>können zum Beispiel mit dem Programm Gimp erstellt werden, indem das verwendete Hintergrundbild als Imagemap editiert wird.