Liste der Anhänge anzeigen (Anzahl: 1)
Erweiterung "gallery" - Lightbox Thumbnails in einer Liste ausgeben
Wenn man in TL eine Bildergalerie außerhalb eines Artikels anzeigen lassen möchte, kann man dazu die Erweiterung Gallery von Thyon verwenden.
https://contao.org/erweiterungsliste....70009.de.html
Beispiel: eine Lightbox Thumbnail Galerie im Footer unter Verwendung des Templates gallery_fullsize.tpl
Über dieses Template wird jedoch die Bildergalerie in einer Tabelle ausgegeben, was insbesondere bei flexiblen Layouts bezüglich der Abstände nicht so gut anzupassen ist. Daher habe ich mir eine Anpassung gemacht, die die Bilder in einer Liste ausgibt. Ich möchte jedoch nicht unerwähnt lassen, dass auch ein div-Template zur Auswahl vorhanden ist, aber da fehlt es dann an der Struktur der Liste.
Die Überschrift habe ich im Unterschied zum Originaltemplate dann auch gleich mit h5 ausgezeichnet. In einem Footer ist es nicht sinnvoll die Überschrift in eine h1 zu packen. Wenn du jedoch die Galerie an einer anderen Stelle ausgeben möchtest, solltest du die Auszeichnung deinem Dokument entsprechend abändern.
BE
=> Templates
=> Neues Template anlegen
=> gallery_fullsize.tpl auswählen
Ersetze den Inhalt des Templates durch folgenden Code:
PHP-Code:
<div class="layout_fullsize block<?php echo $this->class; ?>">
<h5><?php echo $this->title; ?></h5>
<?php if ($this->hasMetaFields): ?>
<div class="info">
<?php if ($this->numberOfComments): ?>
<div class="comment_count"><?php echo $this->commentCount; ?></div>
<?php endif; ?>
<?php if ($this->date): ?>
<div class="date"><?php echo $this->date; ?></div>
<?php endif; ?>
<?php if ($this->location): ?>
<div class="location"><?php echo $this->location; ?></div>
<?php endif; ?>
<?php if ($this->photographer): ?>
<div class="photographer"><?php echo $this->photographer; ?></div>
<?php endif; ?>
<?php if ($this->description): ?>
<div class="description"><?php echo $this->description; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<ul class="gallery"><?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): if ($col['hasImage']): ?>
<li>
<div class="thumbnail"><?php if ($this->fullsize) : ?>
<a href="<?php echo $col['href']; ?>" rel="lightbox[<?php echo $this->lightboxId; ?>]" title="<?php echo $col['alt']; ?>">
<?php elseif ($col['link']) : ?><a href="<?php echo $col['link']; ?>" title="<?php echo $col['alt']; ?>"><?php endif; ?>
<img src="<?php echo $col['src']; ?>"<?php echo $col['imgSize']; ?> alt="<?php echo $col['alt']; ?>" /><?php if ($this->fullsize || $col['link']) : ?></a><?php endif; if ($col['caption']): ?><div class="caption"><?php echo $col['caption']; ?></div><?php endif; ?></div></li><?php else: ?>
<li class="<?php echo $col['class']; ?> empty"> </li><?php endif; endforeach; ?>
<?php endforeach; ?>
</ul>
<?php echo $this->pagination; ?>
</div>
Geändert wurde der Abschnitt ab dort wo im Original die Tabelle ansetzt. In dieser Anpassung alles zwischen <ul class="gallery"> und </ul>
Wenn es nur um eine Galerie geht (ich z.B. benutze es um Bilder von Webseitenentwürfen zu zeigen) könnte man den code ab ul class="gallery" noch weiter vereinfachen, wenn man weiß, dass man die Klassen nicht braucht. Aber das vielleicht später nochmal.
Und hier ein mögliches css, was eigentlich in jedem #footer funktionieren sollte:
Code:
#footer {
height: auto;
overflow: hidden;}
#footer ul.gallery li
{
float:left;
margin-right:8px;
}
#footer ul.gallery li img
{
padding:2px;
border:1px solid #ddd;
}
Wenn list-style-types (bullets) erscheinen, dann musst du diese wegnehmen.
Ich mache das immer in einem Browserreset
Code:
ul,li {
margin:0;
padding: 0;
list-style-type: none;
}
oder, wenn das nur für den footer gelten soll:
#footer ul, #footer li {
margin:0;
padding: 0;
list-style-type: none;
}
Bei mir hat das funktioniert, ich weiß aber natürlich nicht, ob es für alle erdenklichen Anwendungen problemlos zu übernehmen ist.
Probiert es einfach aus, wenn ihr die Templates über das Backend anpasst, kann eigentlich nicht viel passieren.
