Particle Slideshow in Gantry 5, Hydrogen

  • Hallo,


    für eine neu entstehende Seite mit Joomla! 3.5.1 verwende ich Gantry 5, Template Hydrogen, und ich möchte das Particle Slideshow (http://www.inspiretheme.com/do…ntry5-particles/slideshow) verwenden.


    Ihr findet die Seite (Übergangsdomain) hier:
    http://marburger-schlosskonzerte.de.w014e03e.kasserver.com


    Nutzername: forumjoomla
    Passwort: schloss


    1. Gemäß Doku habe ich erst das Atom "uikit" installiert,
    2. dann "slideshow";
    3. in die custom.scss


    Code
    1. @import "dependencies";
    2. // Slideshow Particle
    3. @import "slideshow";


    eingefügt.


    4. Anschließend habe ich uikit im Layout manager aktiviert und
    5. das Particle Slideshow in die Section "Showcase" gezogen (s. Anhang "home-layout").
    Beim Öffnen des Particle zeigt sich, dass der Eintrag zur Position "slideshow" heißt und unveränderbar ist (s. Anhang "position-von-particle-invariabel").


    6.a Erstellung des Moduls:
    Module > neu > Gantry 5 particle > pick a particle > Anpassung über "Edit particle" und "Slideshow items" (s. Anhang "flamenco-beispiel").
    Als Position habe ich zunächst nichts angegeben; erwartungsgemäß erschien dann nichts im Frontend.
    6.b Dann habe ich als Position "slideshow" eingegeben (dies musste ich händisch eingeben; es gab nichts, was sonst infrage gekommen wäre); Ergebnis: große leere Fläche. Also das Particle ist irgendwie da, aber nicht mit dem konkreten Modul verknüpft.


    7. Als nächtes habe ich im Layout manager ein *Modul* in die Section "Showcase" gezogen. Als Position habe ich wiederum "slideshow" eingetragen.
    Nach Anpassung über "Edit particle" und "Slideshow items" wurde das Modul angezeigt, und die unter "Slideshow items" eingetragenen Befehle (Bild, Beschriftung; Animation der Beschriftung) richtig ausgeführt. Was nicht funktioniert, ist die unter "Edit particle" angegebene Animation (mit Ausnahme des Ken Burns effects).


    Um den Aufbau mit Firebug besser nachvollziehen zu können, habe ich im Layout manager gerade auch das Particle reingezogen, unterhalb des Moduls in derselben Section Showcase.


    (Übrigens: In Dokumentationen anderer Gantry-5-Slideshow-Typen wurde gezeigt, dass beim Particle im Layout manager ein Key "slideshow" eingegeben werden muss (http://www.rockettheme.com/doc…isotope/demo_slideshow.md). Diese Möglichkeit gibt es bei dem Particle, das ich installiert habe, nicht; bei den Modulen natürlich schon. Bei der Gantry-Doku http://docs.gantry.org/gantry5/particles/position erscheint das Key-Feld ebenso, allerdings geht es da nicht um das Slideshow-Particle.)


    Hat jemand von Euch eine Idee, wo ich den Fehler eingebaut habe?


    Dank im Voraus und Grüße,
    Anna

  • P.S.
    So ähnlich verhält es sich beim Particle "Tabs" (http://www.inspiretheme.com/do…on/gantry5-particles/tabs).
    Auf http://marburger-schlosskonzer…ahresschlusskonzert-30-12 seht Ihr im unteren Teil der Section Main das weiße Feld.
    Darüber sind mit NoNumber/Regular Labs erstellte Tabs - diese funktionieren super, und man kann - im Gegensatz zum Gantry-Particle - auch Fotos einfügen, aber auf dem Handy sieht es nicht so gut aus, weswegen ich es eben mit dem Gantry-Particle probieren wollte.
    Die Verwendung dieses Particle ist mir nicht so wichtig, aber ich vermute, dass es sich um denselben Fehler handelt wie beim Slideshow-Particle. Irgendwas mache ich konsequent falsch.
    Gruß,
    Anna

  • Hallo Anna,


    bitte nur zur Klarstellung: Das post, welches Du da verlinkst, hatte damit zu tun, ob man "gleich" innerhalb von Sekunden quasi updaten soll/muss. Und außerdem ging es da um ein Update-Problem.
    Mittlerweile ist das wieder Geschichte & die J 3.6.1 steht vor der Haustür.


    Tom wollte zunächst mal einen Fehler ausschließen, welches mit der Erweiterung (oder anderen Funktionen) zu tun haben kann/könnte.


    Liebe Grüße, Christine

  • Hallo Christine,


    danke für die Klarstellung. Letzteres hatte ich verstanden. Beim ersteren war ich unsicher; wenn es da nur um eine kurze Frist ging, war ich wohl übervorsichtig. Jedenfalls habe ich das Update jetzt durchgeführt.


    Liebe Grüße,
    Anna

  • Hallo allerseits,


    leider bin ich in dieser Sache nicht weitergekommen, obwohl ich das Problem inzwischen auch auf dem joomlaportal.de beschrieben habe.
    Die Seite ist inzwischen online, d.h. Ihr erreicht sie über www.marburger-schlosskonzerte.de.
    Ich vermute, dass ich irgendwo bei den Einstellungen im Base outline vs. meinem Hydrogen-home-Layout etwas durcheinander gebracht habe.


    Anbei ein paar Screenshots:


    1. Die Style-Varianten: hydrogen-styles.jpg
    2. Die Basiseinstellungen: base_outline_particle-defaults.jpg
    3. Die Einstellungen auf Base outline, wo die Installation des ulkit-Atoms sichtbar ist: base_outline_page-settings.jpg
    4. Die Seitenstruktur mit den Voreinstellungen für die Slideshow: base_outline_layout.jpg
    5. Die Einstellungen auf meiner Home-Variante, wo der Status des ulkit-Atoms sichtbar ist: meine_page-settings.jpg
    6. Die Seitenstruktur meiner Home-Variante mit den Voreinstellungen für die Slideshow: mein_layout.jpg


    Könnt Ihr Euch einen Reim drauf machen, woran es liegt, dass die Slideshow nicht funktioniert?


    Schöne Grüße,
    Anna



    Edit: Auch hier der Verweis auf das genannte Forum: http://www.joomlaportal.de/joo…ow-gantry-5-hydrogen.html

  • Hallo Christian,


    vielen Dank für Deine Antwort.


    Wenn ich die beabsichtigte Animation ausschalte, hakelt es nicht mehr.


    Die Größe der Bilder habe ich aufgrund einer Statistik gewählt, wonach die meisten Internetnutzer über 1920x1080-Desktop-Bildschirme ins Netz gehen (http://www.mywebcheck.de/seitenbreite-von-webseiten/). Habe ich da die falschen Schlüsse gezogen, wenn ich die Bilder so eingerichtet habe?


    Bezieht sich Deine Frage "Was soll eigentlich passieren?" auf die beabsichtigte Bewegunsart der Bilder?


    Viele Grüße,
    Anna

  • Bei der Bildgröße kommt es darauf an, ob es ein Hintergrundbild ist oder ob es ein sehr detailliertes Foto sein muss.
    1920x1080 ist schon heftig, vor allem im Mobilbereich.
    Wenn es nur ein Hintergrundbild sein soll, könnte es auch "pixeliger" sein und per CSS dann auf cover gestellt werden, damit es den Bildschirm ausfüllt.
    Mit Gantry5 hast du noch die Möglichkeit, die particle oder Module per Klassen bei bestimmten Bildschirmauflösungen auszusschalten:
    http://docs.gantry.org/gantry5/tutorials/utility-classes
    Ich weiss jetzt nur nicht, ob das dann nur ausgeblendet oder gar nicht erst geladen wird (zweite Variaten wäre natürlich die einzig sinnvolle).

  • Seitenoptimierung bei Dateien ist ein heikles Thema. Faustregel ist zumindest für mich, nicht deutlich mehr als 1 MB an Dateien auszuliefern, besser ist natürlich viel weniger. Früher lag die Grenze bereits bei um die 100kb. Deine Seite liefert ca. 4.5 MB aus.


    An deiner Stelle würde ich pragmatisch vorgehen und das Nötigste machen:

    • JPEGs so gut es geht verkleinern, auch wenn die Qualität der Bilder leidet. Dazu gibt es auch online-Tools, einfach mal suchen.
    • JPEGs für Fotos nehmen, niemals PNG wie du es hier gemacht hast. PNG ist die richtige Wahl bei Symbolen, Grafiken, schematischen Bildern mit wenig Farben
    • Bilder nicht als base64 embedden, das bringt nichts, vergrößert nur nochmal den Quellcode unnötigerweise


    Wenn das gemacht ist, kannst du noch versuchen die Content-Bilder in einen eigenen Ordner zu verfrachten und dein Template bzw. Gantry dazu zu veranlassen, diese mit lazy loading auszuliefern.

  • addi : Für mich ganz schön viel Neuland...


    Ich habe die Bilder gesichtet und gerade bei den Kacheln überflüssigerweise große Dateien gefunden. Auch im Slider-Bereich habe ich die Bilder verkleinert (mit Photoshop "Für Web und Geräte speichern") und finde das Ergebnis okay.
    Zu PNG: Ich hatte tatsächlich ein Portrait in PNG-Format (78 KB), sonst habe ich nur das favicon und die Foto-Grafik als PNG.
    Was wirklich ins Gewicht fällt, sind die Pressefotos, aber die kann ich ja nicht gut reduzieren. Oder hast Du eine Idee, wie ich da Ressourcen sparen könnte?


    Wie hast Du die 4,5 MB herausgefunden? Firebug? (Ich habe auf dem FTP-Server nachgeguckt, aber da steht bei den Bildordnern sehr viel mehr; das wird dann sicherlich nicht alles geladen.)


    Zum base64: Da musste ich zuerst recherchieren, was das überhaupt ist. Aber das scheint - wenn ich es richtig verstanden haben - eher dazu beizutragen, dass die Seite schneller geladen wird. Wo muss ich die Einbettung ändern?


    Lazy loading: Davon habe ich schon gehört, muss mich aber erst informieren, wie das geht.


    Gruß,
    Anna

  • Danke Euch!


    addi, das mit dem Schlossbild ist tatsächlich komisch. Ich habe noch einmal alle Bilder in meinen Image-Ordnern durchgeguckt, alles jpg. Dann habe ich über Firebug geguckt; nichts. Kann natürlich sein, dass ich Tomaten vor den Augen habe - wäre nicht das erste Mal. Aber dann habe ich versucht, das Slider-Bild von der Startseite herunterzuladen - "canvas.png". Karten-Seite: "canvas.png". Presse-Seite: "canvas.png". Veranstalter-Seite: "canvas.png" ... Usw.! Es sieht so aus, als wäre das ein Platzhalter. Wo kommt dieses canvas.png her??


    Grüße,
    Anna