Diverse Probleme mit Galerie-Inhaltselement

[NachbarsLumpi]

Hallo,

ich versuche gerade mehrere Bilder mit dem Inhalts-Element "Galerie" in Contao darzustellen und stolpere über diverse Probleme. Als Browser nutze ich unter XP den neuesten Firefox sowie den IE8.

In der IE-Kompatibilitäts-Ansicht zerhaut es mir das Layout der Übersicht völlig. Die Reihen und Spalten werden nicht gemäß den Einstellungen umgebrochen. Aus einer Galerie mit insgesamt 9 Bildern und 3 Bildern pro Reihe wird z.B. eine Galerie mit 7 Bildern in der ersten Reihe und 2 Bildern in der Zweiten. Da ich mit der Kompatibilitäts-Ansicht nicht so viel Erfahrung habe, würde ich gerne wissen, was das nun praktisch bedeutet? Läuft die Galerie auf alten IE-Versionen nicht vernünftig?

Die Bildunterschrift in der Galerie-Übersicht sorgt schon bei wenigen Wörtern durch das rapide vertikale Wachstum der Zellen dafür, dass die Übersicht unschön aussieht. In der Groß-Ansicht wäre ja eigentlich genug Platz für eine aussagekräftige Bildunterschrift, aber hier wird die gar nicht erst angezeigt, sondern nur der Titel. Kann man die Bildunterschrift in der Groß-Ansicht anzeigen?

Mit j_colorbox habe ich das Problem, dass die Titel in der Groß-Ansicht bei zu wenig Platz(z.B. bei kleinem Browser-Fenster) zu weit nach rechts ragen, so dass sie voll in die rechts stehende automatische Index-Anzeige("image 1 of 6") reinsemmeln. Der Text, der nicht in die erste Zeile passt, wird dann leider in das Bild "gemalt". Das sieht echt bescheiden aus und wenn das Bild dann noch einen hellen Hintergrund hat, kann man den Text kaum lesen.

Mit moo_mediabox wird der Titel bei mehr als einer Zeile leider unten abgeschnitten. Die mediabox reicht also nicht weit genug nach unten und die zweite Zeile wird bei mir nur so weit angezeigt, wie der schwarze Rahmen der mediabox unter dem Bild nach unten reicht.

Dann frage ich mich, wieso die Index-Anzeige immer auf Englisch ist?
In einer Diskussion wurde empfohlen, das entsprechende Template(moo_mediabox oder j_colorbox?) zu ändern.
Allerdings habe ich ja in Contao die Möglichkeit, mehrere Sprachen zu verwenden und auch für jedes Bild die Meta-Informationen in verschiedenen Sprachen zu hinterlegen.
Ist es nicht möglich, diese Mehrsprachigkeit mit der in Contao enthaltenen Galerie zu realisieren?

Ich habe nun schon vielfach gelesen, dass die 3.1 wohl einige Probleme hat oder zumindest hatte. Sind die von mir beschriebenen Probleme auch in der 3.0 vorhanden?

Gibt es stabile Erweiterungen für die 3er-Version, mit denen man die Meta-Informationen in einer Galerie vernünftig darstellen kann?

Es grüßt...
Nachbars Lumpi

[Mike1410]

Vorab in der 3er Version wird die Galerie nicht tabellarisch (table, td) erzeugt, sondern als Aufzählung (ul, li). Nur weil du Spalten und Zeilen erwähntest. Generell sollte das aber kein Problem sein, wenn du den LayoutBuilder aktiviert hast bein den Layouts. Allerdings macht die 3.1.1 wohl im Backend und Frontend bei manchen Systemen Probleme.

Die Bezeichnungen der Bilder in der Lightbox (Metas, Pagination, etc.) ist komplett mit CSS formatierbar. Wobei ich bessere Erfahrungen gemacht habe mit der moo_mediabox.

Mit dem neusten Firefox kannst du wunderbar die CSS Bezeichnungen rausfinden, ggf. den Firebug (AddOn) in Firefox installieren.

[NachbarsLumpi]

Hallo Mike,

vielen Dank für Die Tipps. Laut Firebug waren da zahlreiche Paddings vorhanden, die ich aber weder eingegeben habe noch finden konnte (CSS durchsucht, Cache bereinigt usw...) und somit auch nicht löschen konnte. Ich habe Contao nach erfolgloser Fehlersuche dann irgendwann erneut installiert und dann waren auch die Paddings in der Galerie verschwunden. Das ist zwar die Holzhammer-Methode gewesen, hat aber zumindest geholfen! Dafür hat sich jetzt ein anderes Problem ergeben, bei dem ich nicht weiß, ob das so vom Entwickler gewollt ist oder ob ich einen Denkfehler mache:

Ich habe 9 Bilder, die mit einer Bildbearbeitung auf den wesentlichen Teil zugeschnitten wurden. Dadurch haben diese Bilder natürlich unterschiedliche Seitenverhältnisse; mal ist die Breite länger als die Höhe und mal genau anders herum. Diese 9 Bilder würde ich nun gerne mit der Galerie in 3 Reihen zu je 3 Bildern anzeigen lassen, wobei der Platzhalter für ein Bild immer genau 150x150 Pixel betragen soll. Die Bilder sollen dabei weder beschnitten noch verzerrt werden, sondern zentriert im Platzhalter erscheinen. Irgendwie bekomme ich so eine "symmetrische" Galerie mit Contao nicht hin.

Wenn ich in der Galerie nur die Breite mit 150 Pixel definiere und "Proportional" einstelle, wächst die Höhe bei Bildern, die höher als breit sind, über 150 Pixel hinaus.
Definiere ich sowohl die Breite als auch die Höhe mit 150 Pixel, schrumpft die Breite der Platzhalter bei Bildern, die höher als 150 Pixel sind, unter die gewünschte Breite von 150 Pixel.
Irgendwie fehlt mir eine Funktion, die das Bild immer genau so in den Platzhalter von 150x150 Pixeln einpasst, dass die längste Seite(egal ob höhe oder breite) genau 150 Pixel beträgt und die kürzere Seite INNERHALB des Platzhalters proportional kleiner wird, ohne das der Platzhalter selbst verkleinert wird. Der Parameter "Proportional" verkleinert bei mir leider auch die Platzhalter, so dass die Bilder nicht symmetrisch wie in einem Setzkasten dargestellt werden können. Mein Wunsch kann eigentlich nicht sehr exotisch sein, denn ich kenne diese Darstellung von bekannten Programmen wie Picasa oder Windows Live Foto Galerie. Es sieht einfach unschön aus, wenn die Breite der Spalten oder die Höhe der Reihen variiert.

Sehe ich den Wald vor lauter Bäumen nicht bzw. wie ist so etwas mit Contao möglich?

Viele Grüße,
Nachbars Lumpi

[planepix]

Hallo,

es gelingt z:B. wenn du 150 x 150px und Skalieren auf Mitte Mitte stellst.
Dann wird aus der Bildmitte gerechnet das Vorschaubild auf diesen Bereich beschnitten.

Ohne Beschnitt und proportional geht es nur wenn auch das Ausgangsbild dieselben Proportionen besitzt. Daher ja proportional.

Diese Methoden wurde vor längerem eingeführt, aber sind als Orientierung und zum Verständnis vllt. hier in einem Blogpost von Nina gut dokumentiert:
https://contao.org/de/news/die-3-var...light-2.8.html

[NachbarsLumpi]

Hallo planepix,

vielen Dank für die Anregungen, aber ich würde schon gerne das ganze Bild in der Vorschau sehen können. Das ist aber schade, das Contao das nicht kann. Gibt es einen bestimmten Grund dafür, warum diese durchaus verbreitete Skalierungs-Möglichkeit fehlt?
Ich hatte schon überlegt, ob ich mit dem Bildbearbeitungs-Programm die Bilder in quadratische Boxen mit einem Seitenverhältnis von 1:1 setze, aber da würde ich dann in der Großansicht bei Bildern mit Breitbild-Format sehr viel Platz verschenken. Oder kann man irgendwie die Vorschaubilder manuell korrigieren bzw. für die Vorschau andere Bilder verwenden als für die in der Großansicht angezeigten Bilder?

Viele Grüße,
NachbarsLumpi

[Mike1410]

Hier hat aber planepix Recht. Denn wenn die Bilder ein unterschiedliches Seitenverhätnis haben, wie soll das System denn dann verfahren. Bei Proportional würde es sogar reichen eine Größe anzugeben, denn Rest (Höhe oder Breite) errechnet das System dann. Ich habe für Kunden schon viele Galerien realisiert, und mit Bilder mit unterschiedlichem Seitenverhältnis. Dann musst du Mitte/Mitte nehmen. Das hat immer funktioniert und noch keiner hat sich beschwert. Wie gesagt du willst nicht das sich das Bild verzerrt. Mein Frage will soll denn das System verfahren dann? Oder mache mal eine Screenshot Datei, damit wir zu 100% sciher wissen wie das ganze aussehen soll.

Aus Erfahrung weiss ich das Contao hier sogar sehr gut mit Galerievorschaubildern verfährt.

[NachbarsLumpi]

Hallo Mike,

ich habe mal einen Screenshot angehängt, damit klar wird, was ich meine. Die grauen Quadrate sollen die Platzhalter für die Bilder darstellen, immer exakt 150x150 Pixel groß. Die roten Rechtecke sollen die Bilder darstellen, die sehr unterschiedliche Seitenverhältnisse haben können. Das Bild wird logischer weise nur so lange skaliert, bis eine Seite 150 Pixel erreicht hat. Aber dennoch soll der Platzhalter in beide Dimensionen 150 Pixel breit sein. Genau so verfahren wie gesagt bekannte Programme wie Picasa & Co. Dort sind die Reihen und Spalten symmetrisch, auch wenn die Bilder selbst unterschiedliche Seitenverhältnisse haben.

Ich habe jetzt testweise mal der Galerie eine ID zugewiesen und per CSS die Maße der einzelnen Container auf eine einheitliche Größe gesetzt und das Ganze dann zentriert:

#galerieplatzhalter img {
    vertical-align:middle;
        max-width:100%;
        max-height:100%;
}

#galerieplatzhalter .image_container {
    width:150px;
    height:150px;
    overflow: hidden;
    display:inline-block;
    text-align: center;
    line-height: 147px;
}

Auf den ersten Blick scheint das zu funktionieren. Ist das eurer Meinung nach so OK?

Viele Grüße,
NachbarsLumpi

[Mike1410]

Was ist mit "An Rahmen anpassen", und per CSS das Bild im Container zentrieren.

[NachbarsLumpi]

Hallo Mike,

wenn ich "An Rahmen anpassen" wähle, schrumpfen meine Portrait-Bilder genau wie mit der Einstellung "Proportional" in der Breite und damit auch die umgebende image_box. Da ich für Bildbreite und Bildhöhe identische Werte angegeben habe(Quadrat mit 150 Pixel Seitenlänge), macht es rechnerisch glaube ich auch keinen Unterschied, ob ich Proportional oder An Rahmen anpassen wähle. Wenn ich z.B. ein Bild mit 300 pixel breite und 600 pixel höhe habe, wird das Vorschaubild bei beiden Skalierungs-Methoden in der Höhe auf 150 Pixel begrenzt und in der Breite auf 75 Pixel. Die image_box ist dann aber ebenfalls nur 75 Pixel breit. Wenn das nächste Bild nun im Landscape-Format vorliegt(z.B. 600 Pixel breit und 300 Pixel hoch), wird das Vorschaubild 150 Pixel breit und 75 Pixel hoch. Die image_box ist dann 150 Pixel breit und so erhalte ich unterschiedlich breite Reihen, was dann die Spalten asymmetrisch aussehen lässt. Bei meiner Variante sollten die image_boxen in jedem Fall 150x150 Pixel groß und das Vorschaubild darin zentriert werden.

Wenn es einen besseren Weg als den gibt, den ich momentan verwende, wäre ich für ein CSS-Beispiel sehr dankbar.

Viele Grüße,
NachbarsLumpi

[Mike1410]

Wenn du evtl. das Galerie Template modifizierst, in dem du um den .image_container einen div machst den du per CSS auf 150 / 150 px skalierst. Und wählst dann Proportional, gibts bei Querformat die nur die Breite mit 150 an, und bei Hochformat nur die Höhe mit 150.

Wie wäre das ?

[NachbarsLumpi]

Hallo Mike,

das hört sich vielversprechend an, ich schau mir das Template heute abend mal an und werde dann berichten...vielen Dank!

Viele Grüße,
NachbarsLumpi

[danielboller]

Guten Abend

Arbeite noch nicht sehr lange mit Contao, würde aber auch gerne die Bilder in meiner Galerie so ausrichten, wie von NachbarsLumpi beschrieben. Falls ihr eine Lösung findet wäre ich sehr an einer kurzen Beschreibung dieser oder am Template und CSS interessiert.

Vielen Dank!

[Spooky]

Beispiel ohne zusätzliches markup, davon ausgehend, dass die Bilder mit einer Größe von maximal 150x150 ausgegeben werden:

.ce_gallery ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

.ce_gallery li {
    display:inline-block;
}

.ce_gallery figure {
    margin:0;
    width:150px;
    height:150px;
    line-height:147px;
    text-align:center;
}

.ce_gallery img {
    vertical-align:middle;
} 

Allerdings ist es etwas unschön, dass man line-height:147px; verwenden muss. Etwas besseres bringe ich momentan aber auch nicht zusammen (und gibt es evt. auch gar nicht, da die Höhe des img Elements ja ungewiss ist).

[danielboller]

Vielen Dank für die Hilfe! Mit einigen kleineren Anpassungen, die sogar ich als Laie machen konnte, sieht die Galerie nun einigermassen so aus wie ich es mir gewünscht habe.

[Spooky]

Aus aktuellem Anlass - hier eine andere Lösung mit dieser "Absolute Center" Methode: http://coding.smashingmagazine.com/2...centering-css/ (und diesmal mit float:left + clearfix statt inline-block)

.ce_gallery ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

.ce_gallery ul:after {
    content:"";
    display:block;
    clear:both;
}

.ce_gallery li {
    margin:0;
    padding:0;
    float:left;
}

.ce_gallery figure {
    margin:0;
    width:150px;
    height:150px;
    position:relative;
}

.ce_gallery img {
    display:block;
    margin:auto;
    position:absolute;
    left:0; right:0; top:0; bottom:0;   
} 

Beispiel: https://dl.dropbox.com/s/x69juzgs737so40/v1.html

[Futzie 2]

Hallo Community

Erstmal vorweg - Vielen Dank für dieses CMS! Ich bin immer wieder begeistert wie flexibel und leistungsstakr dieses ist. Danke Leo mach weiter so!

Zum Thema:
Ich habe ein Projekt laufen unter Contao 3.1.1. Ich vermute aber mal das es schon ab 3.x so war. Ob ich der erste bin dem es aufgefallen ist oder ob ich einfach nur auf'm Schlauch stehe weiß ich noch nicht. Aber dafür frage ich Euch.

Wenn ich eine Inhaltselement (in diesem Fall natürlich die Galerie) in einem Artikel anlege und als Quelldatei einen Ordner angebe, damit die Bilder als dessen Inhalt ausgegeben werden sollen, passiert nichts! Ich muss jedes Bild einzeln anhaken, damit es geladen wird. Problem: wenn ich jetzt als Uploader ein weiteres Bild in den Ordner lege, wird dieses natürlich nicht in der Galerie gezeigt, da die Funktion "Ordnerinhalt" eben nicht funzt!

In der Onlinedemo ist das nicht nachzustellen, da man keinen Ordner anlegen bzw. keine weitere Grafik hochladen darf. Witzigerweise klappt es nämlich in der Onlinedemo, da der Inhalt des Ordners laut Datenbank bekannt ist! Das Problem tritt immer dann auf, wenn neue Ordner ausgelesen werden sollen, sobald man eine Galerie anleget!

Ich bin wahrlich ein Anfänger was PHP und Konsorten betrifft, aber ich kann mir nicht vorstellen, das ich der Einzige bin der damit zu kämpfen hat.

Weiß jemand Rat? Muss das BE Modul angepasst werden? Wenn ja wie?

Danke im Voraus.

Greetz Thorsten

[Spooky]

Funktioniert es, wenn du den Ordner vorher aufklappst, bevor du das Häkchen setzt?

[Futzie 2]

Alles soweit in Ordnung. Wenn die Datenverwaltung sich öffnet, kann ich den Inhalt sehen und einzeln anklicken. Aber wenn ich nur den betreffenden Ordner anklicke, um dem System zu befehlen einfach nur den ganzen Inhalt zu nutzen zeigt er mir nicht den Pfad des Ordners, wie es bei Weiterleitungen z.B. abläuft. Es passiert einfach nix. Das Fenster schließt sich und das wars.

Kein reinladen der Bilder geschweige denn die Anzeige des Pfades zum Ordner.

Greetz
Thorsten

[Spooky]

Alles soweit in Ordnung. Wenn die Datenverwaltung sich öffnet, kann ich den Inhalt sehen und einzeln anklicken. Aber wenn ich nur den betreffenden Ordner anklicke, um dem System zu befehlen einfach nur den ganzen Inhalt zu nutzen zeigt er mir nicht den Pfad des Ordners, wie es bei Weiterleitungen z.B. abläuft. Es passiert einfach nix. Das Fenster schließt sich und das wars.

Kein reinladen der Bilder geschweige denn die Anzeige des Pfades zum Ordner.

Greetz
Thorsten

Schon klar, aber ich bin mir nicht sicher ob du jetzt meine Frage beantwortet hast . Soweit ich weiß gibt es ein Problem, wenn du einen Ordner selektierst, dessen Inhalt noch nicht synchronisiert wurde. Die Synchronisation findet statt, wenn du den Ordner aufklappst. Daher die Frage ob alles in Ordnung ist, wenn du den Ordner einfach vorher aufklappst, bevor du das Häkchen dort setzt.

[Andreas]

Das Problem ist bekannt, da gibt es ein Ticket zu. Ich meine, das wäre in der aktuellen Version behoben.

[Futzie 2]

Also nu bin ich voll durch den Wind

Folgendes habe ich gemacht:
1. In einem anderen Projekt funzt es! Also an der Version kann es nicht liegen. Hier ist zu sagen, dass dort der Immomanager von FruitMedia installiert ist (eventuell beeinflusst diese Erweiterung das System?).
2. Auf dem aktuellen Projekt, welches bei mir lokal läuft funktioniert es auch nach dem Aufklappen nicht! Erst als ich eines der Bilder umbenannt hatte, wurde zumindest dieses eingelesen!

"OK" dachte ich... Also hatte ich die anderen auch umbenannt und...?
NIX nur das eine Bild! Die anderen wurden trotzdem nicht eingelesen!
Also alles wieder zurück und auch das Bild das ich umbenannt hatte, änderte ich wieder in den ursprünglichen Titel. (Jedesmal habe ich den Cache gelöscht! Sowie im Browser als auch im Contao selbst!)

Nu ist es so, wenn ich wieder versuche das Element zu erstellen, das beim Anwählen des Ordners ein | gezeigt wird als Platzhalter des eben noch erkannten Bildes, das jetzt anscheinend nicht mehr existiert!
Dabei ist es nur umbenannt worden

Greetz

[Futzie 2]

Das Problem ist bekannt, da gibt es ein Ticket zu. Ich meine, das wäre in der aktuellen Version behoben.

Kannst Du mir den Link zum Ticket nennen?

[Andreas]

Puh, ne, hätte ich hier gepostet, wenn ich das Ticket wüsste. Versuche bitte selber mal zu suchen: galerie, gallery, vorschaubild, thumb. Ist gefühlte 2 Monate her. Bestimmt gibt es auch einen Thread hier im Forum.

[Futzie 2]

Puh, ne, hätte ich hier gepostet, wenn ich das Ticket wüsste. Versuche bitte selber mal zu suchen: galerie, gallery, vorschaubild, thumb. Ist gefühlte 2 Monate her. Bestimmt gibt es auch einen Thread hier im Forum.

Danke - ich werd mal gucken ob ich was finde.

Greetz
Thorsten

[Futzie 2]

Also...
Folgendes habe ich mittlerweile raus:
Da das Galeriesystem ja ab Contao 3 Datenbankgestützt ist, habe ich mir mal die Datenbank angesehen.
Ich hatte mich nämlich gewundert, das im BE beim speichern des Inhaltelementes, in der Vorschau nicht das | Symbol sondern sogar den Titel des abgeänderten Bildes aufgetaucht war
Witzigerweise existiert dieses Bild nicht mehr im Ordner!
Das ließ mich vermuten das die Datenbank nicht aktualisiert wird, beim anhaken eines Ordners anstatt eines Bildes.
In der Datenbank war auch dieser verweißte Eintrag drin und wurde nicht gelöscht, obwohl ich das Inhaltselement, Bild, Bildangabe und Änderung/Löschung der Bilddatei wieder entfernt hatte.
Also scheint das System sich jedesmal auf verweiste Einträge zu berufen und ich kann anklicken was ich will, es sei denn ich wechsel vom Ordner auf eine Datei direkt.

Ich habe es jetzt im Moment so gelöst das jedes Bild einzeln angewählt werden muss.
Sobald ich Weiteres in Erfahrung bringen kann melde ich mich an dieser Stelle nochmal.

Bis dahin danke Jungs und bis demnächst.

Greetz Thorsten