Contao-Camp 2024
Ergebnis 1 bis 11 von 11

Thema: Galerie und Bootstrap und Responsive Image

  1. #1
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard Galerie und Bootstrap und Responsive Image

    Hallo Zusammen,

    ich probiere nun seit einiger Zeit mit Bootstrap für Contao herum, was eine extrem mühsame Angelegenheit ist, da man nirgends eine Anleitung für die einzelnen Teile finden kann.

    So bin ich gerade auf das Problem gestoßen, dass ich eine Bildergalerie erstellen möchte (3 Bilder pro Reihe, die Anzahl der Bilder gibt die Anzahl der Reihen vor) und dachte, dass ich hier einfach das Inhaltselement Galerie nehme und dem dann ein Spaltenset zuordne. Pustekuchen. Hier wird eine einfache Galerie erstellt, die nicht responsive ist.
    Ich habe nun mit dem Inhaltselement Spaltenset rumprobiert und auch sonst eine Lösungsansätze versucht, aber nichts funktioniert so, dass die Galerie dann responsive wird. Und in Verbindung mit dem Reponsive Image von Contao hört es dann komplett auf.

    Übersehe ich was oder gibt es für Bootstrap keine Galerie? Oder wurde diese bei der Contao Version nicht mit umgesetzt?
    Muss ich eine Galerie mit html bauen und in ein html-Inhaltselement kopieren (z.B. mit Codes von Bootsnipp)?

    Für Tipps und Tricks bin ich euch dankbar.

    Schöne Grüße
    Jan-Dirk

  2. #2
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Bevor du eigenes HTML schreibst: probiere doch mal eines der responsiven Templates für die Galerie, beispielsweise gallery_grid.


    Gesendet von iPhone mit Tapatalk

  3. #3
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Normalerweise werden von bootstrap doch ein paar eigene Templates mitgeliefert für die Gallerie. Davon eins auswählen und schon geht die Reise los. Oder hab ich es falsch verstanden?

    Ansonsten kannst Du ja jederzeit in der Gallery noch zusätzliche Klassen vergeben, die bootstrap-Klassen bieten sich da ja förmlich an, bei drei Bildern nebeneinander z.B. "col-sm-3 offset-sm-1" (ich hoffe es war offset...).

  4. #4
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    So, nun bin ich dabei, mich noch einmal mit den Gallerien zu beschäftigen. Leider funktioniert dies nicht responsive mit der Bootstrap-Erweiterung. Allerdings wohl auch nicht wirklich gut mit Bootstrap an sich, hier scheint Foundation die Nase vorn zu haben.

    Zitat Zitat von lucina Beitrag anzeigen
    Bevor du eigenes HTML schreibst: probiere doch mal eines der responsiven Templates für die Galerie, beispielsweise gallery_grid.
    Leider funktionieren die responsiven Grids für die Gallerie überhaupt nicht, keine Ahnung warum.
    Auf jeden Fall muss man bei der Gallerie angeben, wie viele Bilder in einer Reihe sein sollen. Dies ändert sich auch in den verschiedenen Viewports nicht, d.h. auf dem iPhone sind ebenfalls 3 Bilder nebeneinander. Das macht natürlich für responsive Design keinen Sinn.
    Leider habe ich hier nichts hinbekommen, was funktionieren kann.

    Zitat Zitat von PaddySD
    Ansonsten kannst Du ja jederzeit in der Gallery noch zusätzliche Klassen vergeben, die bootstrap-Klassen bieten sich da ja förmlich an, bei drei Bildern nebeneinander z.B. "col-sm-3 offset-sm-1" (ich hoffe es war offset...).
    Ja, dies ist der Ansatz, den ich nun verfolgt habe.

    Ich habe eine neue Spaltenvorlage mit 12 (!) Spalten angelegt, die ich dann im Menü Spaltensets so eingestellt habe, dass die einzelnen Bilder in verschiedenen Viewports unterschiedliche Breite annehmen (Bildschirmfoto 2017-03-22 um 12.29.37.png).
    Nun kann ich bis zu 12 Bilder einladen (leider alle einzeln) und diese verhalten sich dann responsive, d.h. bei großen Viewports 3 nebeneinander, bei mittleren 2, bei kleinen alle untereinander.

    Leider sind nun einige schöne Funktionen der Gallerie nicht mehr vorhanden, z.B. das fortlaufende vergrößerte Ansehen über eine Lightbox. Hier müssen alle Bilder immer einzeln angeklickt werden. Gibt es dafür eigentlich eine Lösung (also ein Bild und bei Klick wird eine Gallerie in eine Lightbox geöffnet)?

    Ich habe leider keine andere Lösung gefunden, aber vielleicht hilft mein Ansatz ja jemanden. Oder vielleicht gibt es noch eine bessere Lösung?

    Viele Grüße
    Jan-Dirk

  5. #5
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    Hallo,

    leider bin ich nun doch wieder an dem oben beschriebenen Problem angelangt und hoffe, dass Ihr mir einen Tipp geben könnt.

    Ich baue gerade eine Seite um, auf der es schon etliche Bildergalerien gibt und auf der jeden Monat eine neue dazukommt.
    Die Redakteurin hat Ihre Bilder hochgeladen und dann über die Galeriefunktion von Contao eine 4-spaltige Galerie erstellt. Hat prima funktioniert.

    Wenn ich nun auf Bootstrap umstelle, dann wird auch eine 4-spaltige Galerie erzeugt (mit gallery_grid), die leider auch auf kleinen Geräten vierspaltig ist. Leider werden auch die Vorschaubilder insgesamt skaliert, so dass sie auf kleinen Geräten nicht mehr zu erkennen sind.
    Für lg sieht es dann so aus Bildschirmfoto 2017-09-26 um 16.33.10.png
    Für md sieht es so aus Bildschirmfoto 2017-09-26 um 16.33.21.png
    Für sm sieht es so aus Bildschirmfoto 2017-09-26 um 16.33.29.png

    Meine Einstellungen für die Galerie selbst sind folgende:
    Bildschirmfoto 2017-09-26 um 16.34.12.png

    Das Einstellen der Bildgrößen bring leider keine Änderungen. Auch sonst konnte ich leider keine Lösungen finden.

    Mir wäre am liebsten, wenn sich die Bildgrößen wenig bis kaum verändern würden, wenn der Viewport kleiner wird. Gerne auch von 4- auf 3- auf 2-spaltig.
    Aber das bekomme ich mit der Galerie nicht hin.
    Es soll aber weiterhin das Galerie-Modul sein, weil die Redakteurin dieses beherrscht und gut anwenden kann.

    Habt Ihr eine Lösung für mich?

    Viele Grüße
    Jan-Dirk

  6. #6
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    526

    Standard

    Welche Versionen benutzt Du?
    Contao 3 oder 4?
    Bootstrap Modul installiert?
    Welches Template wird in der Gallerie benutzt?

    contao-bootstrap/bundle bringt da auch Templates für die Contao Gallerie mit.

  7. #7
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Das mitgelieferte Galerie-Template gallery_grid setzt die Grid-Klassen (xs) statisch im Template. Hierbei wird die ausgewählte Spaltenanzahl angewandt. Wenn man etwas individuelles möchte, muss man das Template anpassen.

    Voraussichtlich wird es für Contao 4 und BS 4 dann ein eigenes Galerie-Element geben, was auf die definierten Spaltensets zurückgreifen kann.

  8. #8
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    Danke für Eure Antworten.

    Zitat Zitat von swinde Beitrag anzeigen
    Welche Versionen benutzt Du?
    Contao 3 oder 4?
    Bootstrap Modul installiert?
    Welches Template wird in der Gallerie benutzt?

    contao-bootstrap/bundle bringt da auch Templates für die Contao Gallerie mit.
    Sorry, ich benutze aktuelle Contao 3.5.28 und Bootstrap 3.3.5.

    Das bootstrap-bundle ist installiert und wie im Screenshot zu sehen auch das Grid eingesetzt.


    Das mitgelieferte Galerie-Template gallery_grid setzt die Grid-Klassen (xs) statisch im Template. Hierbei wird die ausgewählte Spaltenanzahl angewandt. Wenn man etwas individuelles möchte, muss man das Template anpassen.
    Voraussichtlich wird es für Contao 4 und BS 4 dann ein eigenes Galerie-Element geben, was auf die definierten Spaltensets zurückgreifen kann.
    Leider habe ich noch nicht mit Contao 4 gearbeitet, auch weil die Installation wohl tricky sein soll. Dabei hätte Bootstrap 4 ein paar wirklich schöne Dinge, die ich brauchen könnte (z.B. Flexboxen).
    Aber ich arbeite lieber mit Contao 3 weiter, für das es aber leider kein Bootstrap 4 geben wird.

    Ich kann Templates nur in seeeeehr geringen Umfang anpassen, php kann ich gar nicht. Daher ist das leider keine wirkliche Option für mich. Schade.

    Gibt es sonst noch eine Möglichkeit oder muss ich damit leben?

    Grüße, Jan-Dirk

  9. #9
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Ist es wirklich so schwierig mal den Quelltext zu lesen, zu suchen wo die Grid-Klassen gesetzt werden und dort die gewünschten einzutragen?

    https://github.com/contao-bootstrap/...id_34.html5#L7

  10. #10
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    Zitat Zitat von webstar Beitrag anzeigen
    Ist es wirklich so schwierig mal den Quelltext zu lesen, zu suchen wo die Grid-Klassen gesetzt werden und dort die gewünschten einzutragen?

    https://github.com/contao-bootstrap/...id_34.html5#L7
    Mann, das ist es. Danke!

  11. #11
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Jan-Dirk Beitrag anzeigen
    Mann, das ist es. Danke!
    Nur keine Scheu haben mal in den Quellcode reinzuschauen. Ist oft leichter als erwartet.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •