[gelöst] Slick View - Colorbox funktioniert NUR mit meinem Theme nicht

am 22.03.2018 - 22:09 Uhr in
Hallo zusammen,
ich habe eine Bildergallerie, in der ich mit dem Slick Modul einen 4 auf 3 Grid erstellt habe, um damit die Bilder als Vorschau darzustellen.
Auf Klick werden sie dann mit dem Colorbox Modul groß dargestellt und man kann weiter durchblättern.
Mein Problem ist, es funktioniert auf jedem Theme, nur leider nicht auf dem Theme, dass ich selbst erstellt habe.
Ich sehe nur die "LadeQuadrate" und das hover-Kreuz auf der Seite. Auch das Grid wird nicht dargestellt, sondern einfach alle Fotos auf der Seite.
Auf Klick öffnet sich dann das Originalbild, allerdings ohne die Colorbox und dessen Funktionen.
Ich bin ratlos, was da überhaupt Einfluss nehmen könnte. Denn eigentlich liegen die libraries etc ja gar nicht im Theme Bereich.
Hatte das Problem schonmal jemand?
Oder hat sonst jemand einen Tipp, wo ich noch nach Fehlern forschen könnte?
- Anmelden oder Registrieren um Kommentare zu schreiben
Welche Drupal Version hast du
am 23.03.2018 - 23:15 Uhr
Welche Drupal Version hast du im Einsatz und welches Basis Theme?
Grüße Jenna
Ich benutze 8.4.4 und habe
am 23.03.2018 - 23:44 Uhr
Ich benutze 8.4.4 und habe ein eigenes Theme erstellt.
Basis is quasi cassy vom Core.
Da fehlt offenbar ein Java-Script
am 24.03.2018 - 07:28 Uhr
die Darstellung und Effekte werden mit Java-Script bzw. JQuery realisiert.
Diese müssen natürlich im Template geladen werden.
Grüße
Ronald
Kannst du mir einen genaueren
am 24.03.2018 - 07:36 Uhr
Kannst du mir einen genaueren Tipp geben, was ich im Theme template laden muss?
Ich hatte extra bei den Modul Beschreibungen noch mal nachgeguckt und dachte eigentlich, dass alle nötigen Dateien in /libraries bzw /modules liegen. Also außerhalb des Theme.
Sorry - die Datei kann ich dir nicht nennen
am 24.03.2018 - 07:55 Uhr
aber wenn du die Templates vergleichst, solltest du den Unterschied finden.
Grüße
Ronald
Hm. Aber ich hab doch die
am 24.03.2018 - 08:06 Uhr
Hm. Aber ich hab doch die Templates nur kopiert und das Design über CSS realisiert für diesen Bereich.
Aber dennoch danke für deinen Tipp.
Ich werde auf jeden Fall nochmals genau vergleichen.
Vielleicht ist da irgendwo ja ein Pfad eingetragen, der jetzt Probleme macht, weil die Templates nicht mehr in core liegen.
Hilft dir dieser Link
am 24.03.2018 - 10:52 Uhr
Hilft dir dieser Link vielleicht weiter um Unterschiede zu finden? Hast du das Basis Theme korrekt angegeben?
Also dein eigenes Theme auch wirklich vom Basis Theme abgeleitet?
Wenn du es einfach nur kopierst ist das der falsche Weg, weil der Bezug nicht mehr gegeben ist.
https://waldbeek.com/blog/drupal-8-theme-erstellen
Grüße Jenna
ergänzt:
https://www.drupal.org/docs/8/theming
annst du mir einen genaueren
am 24.03.2018 - 11:24 Uhr
Ja dass kann ich. Steht nämlich in der Moduldokumentation astrein formuliert:
https://github.com/kenwheeler/slick/
Ach eins hab ich noch vergessen. Der Code muss slebstverständlich in die entsprechenden .yml-Dateien deines Themes
https://drupal-tv.de
Drupal sehen und lernen
so... ich habe es jetzt
am 24.03.2018 - 13:31 Uhr
so... ich habe es jetzt nochmal von vorne getestet.
Wie ich ein Theme erstelle (und in einem Tutorial gelernt habe):
- Ich habe einen Ordner in themes/custom erstellt mit Namen testing
- Ich habe eine testing.info.yml Datei erstellt + eine testing.libraries,yml beides mit den Basisdaten die man eben so braucht
- in der libraries Datei ist lediglich als dependencies auf - core/jquery verlinkt
- Dazu eine css Datei, die ebenfalls in der libraries Datei verlinkt ist
Dann habe ich den core/themes/stable/templates Ordner in meinen Theme Ordner testing kopiert. (ich hatte vorher fälschlicherweise Classy geschrieben hier)
>>> damit funktioniert die Bildgallerie in der erstellten Website OHNE Probleme!
Fazit: Es braucht also keinerlei weitere Einbindung von irgendwas
Bedeutet allerdings auch, dass das, was mir in meinem echten Design Probleme macht, irgendwie in der CSS Datei liegen muss oder aber mit den wenigen Veränderungen in den Templates zu tun hat, die ich vorgenommen habe.
warum auch immer, aber so geht es
am 24.03.2018 - 17:40 Uhr
Nach ewigem Debugging habe ich jetzt die Stelle gefunden, die das Problem auslöst.
Allerdings erscheint es mir völlig abstrus, dass diese Module offenbar auf das header setting reagieren.
So sah mein Header in der page.html.twig aus:
<div class="container">
<div class="main-header">
<div>{{ page.header }}</div>
</div>
</div>
<div class="container">
<header class="header-bild" role="banner"></header>
</div>
Und das ist die Lösung:
<div class="container">
<header class="main-header">
<div>{{ page.header }}</div>
</header>
</div>
<div class="container">
<div class="header-bild" role="banner"></div>
</div>
Die Ausgabe von {{ page.header }} muss dafür offenbar zwingend in einem header-tag erscheinen.
Warum leuchtet mir allerdings nicht im Geringsten ein.
Das liegt daran, dass der
am 24.03.2018 - 21:59 Uhr
Das liegt daran, dass der HTML5-Standard berücksichtigt wird
https://developer.mozilla.org/de/docs/Web/HTML/Element/header
Klar, wenn dein Theme auf der Basis von Classy läuft, ist der in der Dokumentation angegebene Code ja schon im Base-Theme enthalten :-)
https://drupal-tv.de
Drupal sehen und lernen
Ich hatte mich da vorher
am 25.03.2018 - 06:31 Uhr
Ich hatte mich da vorher vertan, es waren nicht die Templates von classy sondern von stable.
Und der HTML5-Standard sagt doch nur rudimentär was enthalten sein könnte aber nicht muss.
Eingebunden hatte ich den Tag ja (wie oben zu sehen ist). Nur dass eben nicht page.header drin war, sondern das Header Bild.
Und warum das Einfluss auf eine Bilddarstellung im Content hat, ist damit ja auch nicht erklärt.
Aber ist ja egal.
Ich bin froh, dass es jetzt läuft. Und wenn es doch auch jemand anderem passiert, kann er hier die Lösung finden. :)
s sieht so aus,
am 25.03.2018 - 06:53 Uhr
dass in diesem Theme die JQuery-Lib im page header geladen wird.
Deshalb muss dieser wohl auch eingebunden werden.
Grüße
Ronald