Das Gallerymodul nutzt standardmäßig immer ein Tabellenlayout, um die Thumbbilder einer Gallery zu positionieren. Das kann unter Umständen Probleme verursachen, z.B. da man maximal 12 Spalten einstellen kann. Wie man den Code des entsprechenden Templates so ändert, dass man Thumbs ohne eine Tabelle formatieren kann, möchte ich kurz erläutern.
Zunächst einmal erstellt man eine Kopie des Templates "gallery_default.tpl" und ändert den Code, wie folgt:
-
-
<div id="imageGalleryView">
-
<?php foreach ($this->body as $class=>$row): ?>
-
<?php foreach ($row as $col): ?>
-
<div class="image_container">
-
-
<?php if ($col->href): ?>
-
<a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>
-
-
<?php else: ?>
-
<?php if ($col->src): ?>
-
<img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
-
<?php endif; ?>
-
-
-
<?php endif; ?>
-
<?php if ($col->caption): ?>
-
<div class="caption"><?php echo $col->caption; ?></div>
-
<?php endif; ?>
-
</div>
-
<?php endforeach; ?>
-
<?php endforeach; ?>
-
</div>
-
Ich habe einfach alle Tabellen-relevanten Codeteile entfernt und zusätzlich eine Abfrage integriert. Diese ist eigentlich nicht notwendig, integriert man die Abfrage jedoch nicht, gibt es einen kleinen Fehler - ein zusätzliches img-Element ohne Inhalt wird am Ende erzeugt. Hier die Abfrage. Wer weiß, wie man das noch etwas schöner ohne die Abfrage machen könnte, bitte kommentieren.
-
-
<?php if ($col->src): ?>
-
<img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
-
<?php endif; ?>
-
Über die div-Elemente kann man die Thumbs beliebig formatieren und positionieren, z.B. über "float:left;"
-
-
<div style="width: 500px; height: 50px; background-color: #EBEBEB; border:1px dashed #CCCCCC; padding: 10px; margin-bottom: 30px;">
-
<div style="float:left; width: 44px; height: 50px; margin-right: 10px;">
-
<img src="/bilder/icon_contao.png" alt="Contao"/>
-
</div>
-
<p style="float: left; display:inline-block; width: 400px;">Sie möchten eine eigene Internetseite basierend auf Contao? <a href="http://www.medianetic.de/internetseiten-berlin/contao">Hier</a> gibt es weitere Infos.</p>
-
</div>
-