Galerie als Liste ausgeben

[Juke]

Hallo zusammen,

ich habe ein bisschen am Galerietemplate herumgebastelt, weil man das Tabellen-Markup nicht für fluide Designs gebrauchen kann. Es ist fertig und funktioniert valide, aber nicht perfekt.

Hier zunächst einmal der Code.
(Zum Einbauen: Template-Ableger von gallery_default erstellen z.B. gallery_default_fluid und Code reinkopieren)

<ul class="fluidgallery">
<?php foreach ($this->body as $class=>$list): ?>
<?php foreach ($list as $item): ?>
<?php if ($item->addImage): ?>
<li class="item">
<div class="image_container"<?php if ($item->margin): ?> style="<?php echo $item->margin; ?>"  <?php endif; ?>>
<?php if ($item->href): ?>
<a href="<?php echo $item->href; ?>"<?php echo $item->attributes; ?> title="<?php echo $item->alt; ?>">
<img src="<?php echo $item->src; ?>"<?php echo $item->imgSize; ?> alt="<?php echo $item->alt; ?>" /></a>
<?php else: ?><img src="<?php echo $item->src; ?>"<?php echo $item->imgSize; ?> alt="<?php echo $item->alt; ?>" />
<?php if ($item->caption): ?>
<div class="caption"><?php echo $item->caption; ?></div>
<?php endif; ?>
<?php endif; ?>
</div>  
</li>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>  
</ul>

Nun zu meinen Fragen:
1. Klassen
Die li haben zur Zeit nur die Klasse "item".
Sinnvoller wäre es man würde 2 Klassen mitgeben, stelle ich mir idealerweise so vor:

<li class="item_1 even">
<li class="item_2 odd">

Nun habe ich mit meinen rudimentären Programmierkenntnissen andere Module nach einem Beispiel durchsucht und dies und das ausprobiert - Ergebnis: ich kriegs leider nicht hin. Vielleicht hat einer von euch eine Idee?


2. meta.txt
Leider zeigt das umgebaute Template die captions nicht an, wenn diese im Verzeichnis als meta.txt hinterlegt sind.

Als workaround kann man sich die Erweiterung metagallery installieren. Befüllt man im BE das hierfür vorgesehene Feld, klappt's tadellos.

Soweit so gut - es wäre aber dennoch schöner, wenn das mit der meta.txt auch ohne Erweiterung funktionieren würde. Es wäre klasse, wenn hier jemand vielleicht eine Idee hätte woran es liegen könnte.

Beste Grüße
Jutta

[wotank]

Moin,

ich habe bei einer HP die unsägliche Tabellengalerie (warum schreibt da nicht mal einer ein Ticket zu? ) mithilfe eines Beitrags hier im Forum aif eine ul umgestellt:

<ul class="ul_gallery">
<?php
    foreach ( $this->body as $class => $row )
        foreach ( $row as $col )
            if ( $col->addImage )
            {
?>
<li<?php if ( $col->margin ) { ?> style="<?= $col->margin ?>"<?php } ?>>
<?php if ( $col->href ) { ?>
<a href="<?= $col->href ?>"<?= $col->attributes ?> title="<?= $col->alt ?>"><img src="<?= $col->src ?>"<?= $col->imgSize ?> alt="<?= $col->alt ?>" /></a>
<?php } else { ?>
<img src="<?= $col->src ?>"<?= $col->imgSize ?> alt="<?= $col->alt ?>" />
<?php } ?>
</li>
<?php
}
?>
</ul>

Das ergibt eine ungeordnete Liste. Alles wird dann per css angepasst. Unter templates habe ich die gallery_default.tpl
dupliziert, die neue umbenannt und den code rein kopiert. Wenn man das Element »Galerie« anlegen will,
muss man unter Template-Einstellungen --> Galerietemplate das neue template anklicken.
Bei mir funktioniert es unter 2.9.1

Hat einwandfrei geklappt. Die li's bekommen dabei keine Klasse, aber das kann ich verschmerzen.

Warum man für gerade und ungerade thumbs ne Klasse braucht verstehe ich nicht so recht.
Wenn mit fluides Design eine Site mit %-Werten gemeint ist, eignet sich imho fluide Design nicht gut für Galerien, weil dann bei kleinerem Viewport, die Thumbs allzuleicht ineinander geschoben werden.
Ein Link zur Problemsite wäre ganz hilfreich, damit man sich das besser vorstellen kann.

Das mit der meta.txt hat auch funktioniert, mußte dort allerdings als erstes Bild jeweils einen Dummy einbauen.
Auszug meta.txt:

blind.jpg = Blind ||
Adlerauge-sei-wachsam.jpg = Adlerauge sei wachsam ||
Versuchskatze.jpg = Versuchskatze ||
duene.jpg = Düne ||
frisch-geschluepft.jpg = Frisch geschlüpft ||
hausmaus.jpg = Hausmaus ||
frosch.jpg = Frosch || 

[Juke]

Hallo wotank,

In deinem Code fehlt aber doch die Ausgabe von caption, oder?

Galerien eignen sich nur dann nicht so gut für fluide Designs, wenn Tabellen verwendet werden. Die td können halt nicht umbrechen. Bei einer Liste schieben sich die thmbs meiner Meinung nach bei richtig angewendetem css nicht zusammen, es sei denn man hat die Zwischenräume in % angegeben oder das li selbst auch. Aber auch hier kann man was machen, wenn man mit min und max-width arbeitet.

Wenn man den li jedoch eine feste Größe gibt, passiert das nicht. Im Ergebnis ist es dann so, dass auf einem kleineren Monitor beispielsweise nur 4 in einer Reihe stehen, bei einem größerem Viewport dann 6 oder 7.

Evenodd kann Sinn machen, wenn ich den Bildern beispielsweise abwechselnd andere Border oder Hintergrundfraben geben will. Wieso denn nicht?

Beste Grüße
Jutta

[Juke]

Hachja - habe gerade festgestellt, dass die Angbaen aus der meta.txt nicht angzeigt werden, wenn die Option "Großansicht" aktiviert ist. Leider auch dann nicht, wenn ich die schöne Erweiterung metagallery benutze.

*schnief*

[wotank]

In deinem Code fehlt aber doch die Ausgabe von caption, oder?

äh...wieso caption? Das Attribut verwendet man doch nur bei Tabellen?
Das verwirrt mich jetzt etwas.

Galerien eignen sich nur dann nicht so gut für fluide Designs, wenn Tabellen verwendet werden. Die td können halt nicht umbrechen. Bei einer Liste schieben sich die thmbs meiner Meinung nach bei richtig angewendetem css nicht zusammen, es sei denn man hat die Zwischenräume in % angegeben oder das li selbst auch. Aber auch hier kann man was machen, wenn man mit min und max-width arbeitet.

okay, ohne Link zum Schauen kann ich eh nur bedingt was dazu sagen.
Das Einzige was klar ist, das eine Tabelle als Galerieausgabe ein Nogo ist.
Webdesign des letzten Jahrtausends ist halt nicht so mein Ding.
Deins ja sicher auch nicht, sonst würdest du keine Liste hernehmen wollen.

Wenn man den li jedoch eine feste Größe gibt, passiert das nicht. Im Ergebnis ist es dann so, dass auf einem kleineren Monitor beispielsweise nur 4 in einer Reihe stehen, bei einem größerem Viewport dann 6 oder 7.

Das klappt aber nur wenn die Bilder alle gleich hoch sind.

Evenodd kann Sinn machen, wenn ich den Bildern beispielsweise abwechselnd andere Border oder Hintergrundfraben geben will. Wieso denn nicht?

okay, verstanden.

[xchs]

Das Einzige was klar ist, das eine Tabelle als Galerieausgabe ein Nogo ist.

Warum schreibt da nicht mal einer ein Ticket zu?

Könntest Du das übernehmen? Vielleicht auch mit entsprechendem Template-Vorschlag?

[wotank]

Könntest Du das übernehmen? Vielleicht auch mit entsprechendem Template-Vorschlag?

das wollte ich schon mal.
Habs aber nicht geschafft mich da zu registrieren (eigene Blödheit? ).

Naja, um ein Template für Contao zu erstellen sind meine PHP-Kenntnisse zu gering.
Das müßte ich dann mit jemand zusammenarbeiten, der den PHP-Part übernimmt.

[Juke]

@wotank
Das mit dem Zusammenschieben kommt, wenn man im BE die Anzahl der Thumbnails angibt. Werden z.B. 4 Bilder gewählt, dann wird im inline-style 25% eingetragen. Und da kann man dann via css nichts dran machen weil die inlines das normale css überschreiben. Lösung kann sein den Code für den inline-style einfach rausnehmen.

Deine leere thmbs erscheinen deswegen, weil im code folgendes steht:

<?php if (!$col->addImage): ?>
  <td class="<?php echo $col->class; ?> empty">&nbsp;</td>
<?php else: ?>

Fragt also: wenn KEIN Bild vorhanden ist, dann das, anderfalls (else) das ... Ich verstehe nun nicht warum das da drin ist und habe es einfach umgestellt. Wenn Bilder vorhanden sind (und das sind sie bei einer galerie ja sehr wahrscheinlich) dann ...
Und damit verschwinden dann auch die leeren Bilder.

@all

Es gibt von Thyon die Erweiterung gallery. Ich habe sie früher schon einmal benutzt und auch schonmal was dran gebastelt. In dieser Erweiterung gibt es eine Galerievorlage namens "gallery_fullsize_div". Im untersten Abschnitt ist dann der Code, der auch für die normale Contao-Galerie zu gebrauchen ist als auch in Verbindung mit der Erweiterung metagallery.

Ich habe die divs rausgeschmissen und durch eine Liste ersetzt. Wo es allerdings Probleme gab, war bei der im BE gewählten Anzahl der Thmbs. Gibt man z.B. 4 ein, dann macht das System nach dem 4. Bild logischerweise ein </ul>. Durch das Versetzen dieses Tags an eine andere Stelle, konnte aber auch das behoben werden. Dadurch kann man jetzt bei Anzhal eingeben was man will, es tut sich nichts mehr, aber das muss es bei einer fluiden Galerie ja auch nicht.

Und hier ist der angepasste Code, mit dem es gehen sollte.
Bei mir tut's jedenfalls - mit meta.txt, mit Lightbox, mit metagallery, mit der normalen Contao Galerie und natürlich auch mit der Thyon-Erweiterung-Gallery. Nur das mit den Klassen für die li, da muss ich leider passen, einen Zähler würde ich vielleicht mit Geduld und Spucke noch hinkriegen aber evenodd ... öhm.

<div class="fluidgallery">
<ul>

    <?php foreach ($this->body as $class=>$row): ?>
    <?php foreach ($row as $col): ?>
    <?php if ($col->addImage): ?>
    <li class="<?php echo $col->class; ?>">  
        <div class="image_container"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>>
            <?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: ?><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
            <?php endif; ?>
            <?php if ($col->caption): ?><div class="caption"><?php echo $col->caption; ?></div>
            <?php endif; ?>
        </div>
    </li>
    
    
    <?php endif; ?>
    <?php endforeach; ?>
        <?php endforeach; ?>
        
</ul>
</div>

Beste Grüße
Jutta

[wotank]

Deine leere thmbs erscheinen deswegen, weil im code folgendes steht:

<?php if (!$col->addImage): ?>
  <td class="<?php echo $col->class; ?> empty">&nbsp;</td>
<?php else: ?>

Fragt also: wenn KEIN Bild vorhanden ist, dann das, anderfalls (else) das ... Ich verstehe nun nicht warum das da drin ist und habe es einfach umgestellt. Wenn Bilder vorhanden sind (und das sind sie bei einer galerie ja sehr wahrscheinlich) dann ...
Und damit verschwinden dann auch die leeren Bilder.

jetzt bin ich noch verwirrter.

Der von dir gepostete Codeschnipsel findet sich nicht in dem Code, den ich gepostet habe.

[Juke]

stimmt - dann weiß ich leider auch nicht woher dein Leerbild kommt.

Beste Grüße
Jutta

[plastiko]

... Nur das mit den Klassen für die li, da muss ich leider passen, einen Zähler würde ich vielleicht mit Geduld und Spucke noch hinkriegen aber evenodd..

Ich wage mal meinen ersten Beitrag.
Bestimmt nicht professionell aber scheint zu funktionieren:

<div class="gallery_float block">

<ul>
<?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php $gallery_item_nr=$gallery_item_nr+1; 
if ($gallery_item_nr % 2 != 0) {
    $even_or_odd = odd;
} else {
    $even_or_odd = even;
}
$class_item = "item$gallery_item_nr $even_or_odd";
?>


<?php if (!$col->addImage): ?>

  <li class="<?php echo $class_item; ?> empty">*</li>
<?php else: ?>
  <li class="<?php echo $class_item; ?>">
  <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: ?>
    <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
<?php endif; ?>
  </div>
  </li>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>

</div>

Die "Vorschaubilder pro Reihe" müssen mit der Bildanzahl übereinstimmen.

• Der Zähler: $gallery_item_nr=$gallery_item_nr+1;
• evenodd: if ($gallery_item_nr % 2 != 0) {
  $even_or_odd = odd;
  } else {
  $even_or_odd = even;
  }

[Juke]

Hallo plastiko,

erstmal: willkommen im Forum.
Tut mir Leid, dass ich erst jetzt antworte, aber ich hatte noch keine Zeit dein Template zu testen.

Aber jetzt.
Und was soll ich sagen: Super.
Genauso wie ich es mir gewünscht habe.

Du kannst aber noch die captions einfügen (vor dem </li>)

<?php if ($col->caption): ?><div class="caption"><?php echo $col->caption; ?></div>
            <?php endif; ?>

Das mit den leeren Bildern, hm.
Muss man das haben?

Wenn man 9 Bilder in die Galerie gibt, aber 12 auswählt, dann erscheinen 3 Leerbilder. das liegt an der !Abfrage (glaub ich) und ich weiß nicht ob dieses Konstrukt einfach nur dazu da ist, weil man andersum auf if kein else hätte ... ?? Ich weiß es nicht genau.

Bei einer Liste, so meine ich, ist es aber doch gar nicht nötig, dass man eine Anzahl angibt. Hab mir so überlegt, dass bei den Einstellungen im BE vielleicht nur eine Auswahl 0 oder eben -- fehlen würde.

Aber ansonsten sage ich mal herzlichen Dank.

Beste Grüße
Jutta

[plastiko]

Bei einer Liste, so meine ich, ist es aber doch gar nicht nötig, dass man eine Anzahl angibt. Hab mir so überlegt, dass bei den Einstellungen im BE vielleicht nur eine Auswahl 0 oder eben -- fehlen würde.

Diese Zelle:
<td class="<?php echo $col->class; ?> empty">*</td>
Habe ich einfach zum Listeneintrag gemacht:
<li class="<?php echo $class_item; ?> empty"></li>
Das war Unsinn.
Wenn du die Zeile löscht, spielt "Vorschaubilder pro Reihe" keine Rolle mehr.

[andreasisaak]

Ich hab das Template schon vor langer Zeit umgestellt und nie ein Problem feststellen können mit den Captions usw.

Hier ein Auszug aus meinem Template:

<ul class="gallery"> 
<?php foreach ($this->body as $class=>$row): ?>
<li class="row <?php echo $class; ?>">
<ul>
<?php foreach ($row as $col): ?>
<?php if (!$col->addImage): ?>
  <li class="<?php echo $col->class; ?> empty">&nbsp;</li>
<?php else: ?>
  <li class="<?php echo $col->class; ?>" style="width:<?php echo $col->colWidth; ?>;">
  <div class="image_container"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>>
<?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: ?>
    <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
<?php endif; ?>
<?php if ($col->caption): ?>
    <div class="caption"><?php echo $col->caption; ?></div>
<?php endif; ?>
  </div>
  </li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
</ul>

Ein Beispiel könnt ihr euch auf meiner Seite anschauen:

Oder habe ich noch etwas nicht verstanden?

[Juke]

Hallo jared,

Das mit den captions war anfangs NUR mein Problem und ist behoben.
Da hatte ich irgendwas Falsches im template und es funktionierte nicht.
Aber wie gesagt: es tut.

Mir ging es jetzt nur noch um die Klassen für die li und die Leerbilder.

Grüßle
jutta

[andreasisaak]

Könntest du denn das Template posten womit du jetzt in Zukunft arbeiten willst? Vielleicht kann ich ja noch was an meinem verbessern.

[Juke]

@plastiko

Hallo Jens - ja, das meinte ich.
Ich denke, dass es so o.k. ist - soweit *ich* das beurteilen kann. Quelltext sieht jedenfalls gut aus. Statt die Zeile wegzulassen könnte man aber auch die if-else Geschichte umstellen und einfach mit if beginnen. Aber das ist glaub Wurscht.

@jared
Ich nehm das Skript von plastiko (Jens). Das hat nämlich für die li die sinnvolleren Klassen und nicht Klassen mit row etc. die von der Ex-Tabelle und außerdem die evenodd Geschichte.

Code + Beispiel hier

CSS und noch weitere Erläuterungen dazu werde ich noch ergänzen.
Reicht das?

Viele schöne Grüße
Jutta

[andreasisaak]

Also wenn ich das richtig sehe dann unterscheidet sich dein Template von meinem nur in der Klasse die du dem li verpasst?

Ich klinke mich dann wieder aus, mein Template reicht mir so wie es ist und ist nicht voller if konstrukte...

LG

[plastiko]

Statt die Zeile wegzulassen könnte man aber auch die if-else Geschichte umstellen und einfach mit if beginnen.

Dann aber mit

<?php if ($col->addImage): ?>

und nicht mit

<?php if (!$col->addImage): ?>

beginnen.

Ich halte mein Beispiel für eine Notlösung bis es etwas besseres gibt.
Vielleicht gibt es die ja schon und wir haben sie nur nicht gefunden. Was in meinem Beispiel fehlt ist eine Klasse für den ersten und letzten Listeneintrag (first und last).

jared,
Ich verstehe dein Praxisbeispiel nicht. Du benutzt eine Verschachtelte Liste um nur zwei Bilder anzuzeigen. Funktioniert deine .tpl auch mit einer einfachen Liste?

[andreasisaak]

Ich nehme das zusätzliche Markup in Kauf weil ich so auch flexible und komplizierte Galerien darstellen kann. Auf meiner Seite sind in manchen geschützten Bereichen auch verschachtelte Galerien zu finden - da macht das zusätzliche "li" Sinn

Sonst muss ich jedesmal das Template nach dem Verwendungszweck auswählen, das macht zuviel Arbeit.

Zumindest konnte ich damit noch JEDE Galerie darstellen.

[ways2web]

falls es jemand entgangen ist, gibs seit heut nun ein schönes Tutorial, was in diese Thema passt.

Vielleicht hilft es ja den Lesern dieses threads! Und wenn nicht, vielleicht usern, die über die suche auf das Thema stossen!


Vielen Dank an planepix !

[planepix]

Mein Dank gilt allen, die hier dazu beigetragen haben

[eiko]

Die beiden Lösungen

http://www.erweiterungen.jukemedia.d...e-tabelle.html
http://www.think-contao.de/bildergal...ao-nutzen.html

geben im CSS immer feste Werte für width und height an. Wie macht ihr das denn, wenn mehrere Tabellen mit unterschiedlichen Bildgrößen verwendet werden soll? Für jede eine eigene CSS schreiben finde ich sehr unpraktisch. Produziert ja auch wieder unnötigen Code.

Mögliche Lösung
Was ich mir als Lösung sehr gut vorstellen könnte, es aber mangels PHP / Contao-Interna Kentnisse nicht umsetzen kann:

Es wird zunächst herausgesucht, wie breit das breiteste sowie wie hoch das höchste Bild in der Galerie ist. (Es könnte schließlich zum skalieren "proportional" gewählt sein, was zu unterschiedlichen Bildgrößen innerhalb der Galerie führt). Herauskommen die Werte "maxHeight" und "maxWidth".

Diese können nun als inline-style ausgegeben werden, z.B.

  <li class="<?php echo $class_item; ?>" style="height:maxHeight; width:maxWidth;">

Da diese Werte jeweils auf die konkrete Galerie bezogen sind, halte ich einen inline-style hier für angebracht bzw. die einzige (mir einfallende) korrekte Lösung.

A) Ist es möglich, dafür passenden Code ins Template zu schreiben?
B) Mag das jemand tun? ;-) ... natürlich nur, falls es
C) keine Einwände gibt

Meiner Meinung nach ist die CSS-Variante erst dann der mit Tabellen überlegen. Bei Tabellen funktioniert die "automatische" Anpassung an die Bildgröße schließlich auch.

Passendes CSS werde ich dann selbstverständlich hier posten...

Vielleicht kann man ja so ein universelles Template erstellen, was ggf. das default template ersetzen könnte in zukünftigen Versionen von Contao?

Beste Grüße

[wotank]

Meiner Meinung nach ist die CSS-Variante erst dann der mit Tabellen überlegen. Bei Tabellen funktioniert die "automatische" Anpassung an die Bildgröße schließlich auch.

es geht nicht darum was hier überlegen ist sondern um die Trennung von Inhalt und Gestaltung und um semantischen Code.

Wenn du unbedingt tabellenartige Darstellung willst arbeite mit dem CSS-Tabellenmodell, das ist genau dafür gedacht.

Dein Vorschlag mit dem min-height, max-height hört sich für mich nach: von hinten durch die Brust ins Bein geschossen an.

Sind die Bilder gleichgroß kann li floaten.

Sind sie alle unterschiedlich bekommt li einfach display:inline; und text-align:center;, dann sind die Thumbs immer schön horizontal zentriert.
Das hat den Nachteil das vertikale margins nicht mehr recht funktionieren, da man bei inline-Elementen vertikal nur durch line-height und/oder font-size Einfluß nehmen kann.
Abhilfe würde hier für jede Thumbreihe eine ul schaffen.

[eiko]

es geht nicht darum was hier überlegen ist sondern um die Trennung von Inhalt und Gestaltung und um semantischen Code.

Das "überlegen" war auch in der Hinsicht "gleiches Layout-Ergebnis, bessere Semantik" gemeint.

Wenn du unbedingt tabellenartige Darstellung willst arbeite mit dem CSS-Tabellenmodell, das ist genau dafür gedacht.

Ich habe mich da mal eingelesen und die Verwendung von display:inline-table führt ca. zu dem von mir gewünschten Ergebnis. Danke für den Hinweis, manchmal braucht es nur den Anstoß in die richtige Richtung.

Leider interpretiert Opera das anders als Firefox und der IE bis 7 kennt es offenbar garnicht (oder zeigt es jedenfalls nicht).

Dein Vorschlag mit dem min-height, max-height hört sich für mich nach: von hinten durch die Brust ins Bein geschossen an.

Sind die Bilder gleichgroß kann li floaten.

Sobald die Bildunterschriften jedoch unterschiedlich groß sind, geht es schon wieder nicht mehr.

Sind sie alle unterschiedlich bekommt li einfach display:inline; und text-align:center;, dann sind die Thumbs immer schön horizontal zentriert. Das hat den Nachteil das vertikale margins nicht mehr recht funktionieren, da man bei inline-Elementen vertikal nur durch line-height und/oder font-size Einfluß nehmen kann. Abhilfe würde hier für jede Thumbreihe eine ul schaffen.

Das ist sicherlich möglich und auch recht einfach umzusetzen im Template, daraus mehrere ul Listen zu machen. Semantisch ist das aber dann auch wieder nicht ganz korrekt, weil es sich schließlich nur um eine Bildergalerie und nicht mehrere handelt. Abgesehen davon funktioniert das so wieder nur mit statischen Layouts.

[wotank]

Ich habe mich da mal eingelesen und die Verwendung von display:inline-table führt ca. zu dem von mir gewünschten Ergebnis. Danke für den Hinweis, manchmal braucht es nur den Anstoß in die richtige Richtung.

display:inline-table??
darauf wäre ich ja ne gekommen.
Ich mach das immer (horizontale navi) mit display:table; für das umgebende div, display:table-row; für ul und display:table:cell; für li.
Man sollte ja immer die ganze Tabelle per CSS ausgeben.

IE6/7 brauchen per Cond.Comment display:inline und zoom:1; entweder für ul oder für ul und li.
Außerdem braucht a da oft ne Breite und muss Floaten und die ul braucht white-space:no-wrap;.
Ach ich poste einfach mal den entsprechenden Ausschnitt des Cond. Comments meiner letzten Website:

* html #topnavi ul,
* html #topnavi ul li  {
        display:inline;
        zoom:1;
}
*+html #topnavi ul,
*+html #topnavi ul li  {
        display:inline;
        zoom:1;

}
* html #topnavi a,
* html #topnavi strong  {
        float:left;
        width:180px;
}
*+html #topnavi a,
*+html #topnavi strong  {
        float:left;
        width:180px;
}
* html #topnavi ul  {
        white-space:no-wrap;
}
*+html #topnavi ul  {
        white-space:no-wrap;
} 

Insgesamt eine ziemliches Gefummel, aber hinzubekommen.
Hier auch noch ein Link zu einem entspr. Tut.
Daran siehst du auch das man immer etwas Fummeln muss, weil es keine einheitliche Lösung gibt.

inline-table ist mir spontan nicht so sympatisch, weil ich es lieber nur mit Blockelementen zu tun habe.

Leider interpretiert Opera das anders als Firefox und der IE bis 7 kennt es offenbar garnicht (oder zeigt es jedenfalls nicht).

Vielleicht liegt das an dem unseligen overflow:hidden aus der contao.css.
Schau mal hier,da war es die Ursache für einen scheinbar sehr seltsamen Darstellungsfehler.
Ich vermute mal blind, das könnte auch bei dir die Ursache sein.

Sobald die Bildunterschriften jedoch unterschiedlich groß sind, geht es schon wieder nicht mehr.

Ja wenn du Bildunterschriften brauchst und keine lightbox hernimmst, muss man es anders lösen (display:table;?? )

Das ist sicherlich möglich und auch recht einfach umzusetzen im Template, daraus mehrere ul Listen zu machen. Semantisch ist das aber dann auch wieder nicht ganz korrekt, weil es sich schließlich nur um eine Bildergalerie und nicht mehrere handelt.

Okay, so ganz unrecht hast du da nicht.

[wiese]

Offtopic: IE6 beachte ich gar nicht mehr Es kommt eine Meldung am Bildschirmrand, der Browser ist 10 Jahre alt, bitte Update.

Sonst sehr interessante Diskussion hier - wäre schön wenn es Einzug in die Standardgalerie findet.

[hkn]

Zuerst vielen Dank. Bin auf diesen Thread durch http://www.think-contao.de/bildergal...ao-nutzen.html gestoßen.

Ich stehe ja noch ziemlich am Anfang mit Contao und dachte mir ich lege brav einen Ordner unterhalb vom Templates an und speichere dort meine geänderten/angepassten Template-Dateien.

Das hat bis jetzt auch eigentlich gut geklappt, nur mit dem Galerie-Template klappt das nicht so und ich frage mich nun warum das denn so ist.

Speichere ich das geänderte Galerie Template z.B. mit dem Namen gallery_CSSbased in meinem angelegten Templates Ordner "Website_templates" erscheint, wenn ich dann eine Galerie anlegen möchte, unter "Galerietemplate" nicht dieses geänderte Template.

Speichere ich es aber direkt in Templates funktioniert es.

Mache ich etwas falsch oder werden manche Templates einfach nicht aus Unterordnern eingelesen. Ich habe es mit verschiedenen Ordnernamen ausprobiert.

[Grete Gräte]

Angenommen, man hat diese Galerie über mehrere Seiten - dann gibts unterm Bild die Paginierung (Zurück/1/2/3/Vorwärts).
Ich hätte die aber gern über dem Bild... Könnte da jemand den Code posten?
Wahrscheinlich muss man nur 2,3 Zeilen austauschen, ich bin am probieren, es funktioniert aber nicht.

Grüße,
Grete

[rezico]

Hat das zufällig schon jemand für Contao 2.11 angepasst?
Bekomme den Fehler:

Warning: Invalid argument supplied for foreach() in /ce_gallery.html5 on line 4

Ich verwende folgenden Code:

<div class="fluidgallery block">
 
<ul>
<?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php $gallery_item_nr=$gallery_item_nr+1; 
if ($gallery_item_nr % 2 != 0) {
    $even_or_odd = odd;
} else {
    $even_or_odd = even;
}
$class_item = "item$gallery_item_nr $even_or_odd";
?>
 
 
<?php if ($col->addImage): ?>
  <li class="<?php echo $class_item; ?>">
  <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: ?>
    <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
<?php endif; ?>
  </div>
   
  <?php if ($col->caption): ?><div class="caption"><?php echo $col->caption; ?></div>
            <?php endif; ?>
  </li>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
 
</div>

Ich weis leider nicht, welche Auswirkungen es gab. Vielleicht hat ja jemand ne Ahnung.
Danke!

[plastiko]

Bekomme den Fehler:

Warning: Invalid argument supplied for foreach() in /ce_gallery.html5 on line 4

Ich vermute, du hast ce_gallery.html5/xhtml bearbeitet. Der Code ist aber für gallery_default.html5/xhtml (Galerietemplate) gedacht.