Bootstrap 5 | Carousel

  • Ich zitiere:

    Zitat

    Thanks for the link, I'll look.

    Just wonder how the thousends of no-professional Joomla users will use it.

    Da bleiben die Professoren die Antwort bewusst schuldig. Letztlich muss man aber nur das komplette Bootstrap-Bundle laden, also komplettes JavaScript und CSS, um erst mal per HTML rumprobieren zu können. Die Antwort wurde aber in einem anderen, ähnlichen Fall weggebügelt.

  • dann ist das Problem doch noch offen ?

    Nein, da man übereingekommen ist, dass das kein Problem ist. Man muss sich das so vorstellen: Alle Einzelteile von Bootstrap, die früher in Joomla in einer einzelnen Datei waren, wurden auf Einzelteile verteilt. Carousel, Modal, Accordion, Dropdown und was es so gibt.


    Will ein Menü-Modul nun z.B. die Dropdown-Funktionalitäten nutzen (also das HTML-Gerüst "beleben") muss es auch eine PHP-Zeile abfeuern, die das nötige, spezielle JavaScript lädt (oder einfach Glück haben)

    Code
    HTMLHelper::_('bootstrap.dropdown', '.selector');

    So die neue Denke, die durchaus eine Berechtigung hat (Seiten-Performance), aber für Normal-User grauenhaft akkademisch umgesetzt wurde.


    Für dein Carousel musst du also entweder in PHP

    Code
    HTMLHelper::_('bootstrap.carousel', '.selector');

    feuern, wenn man weiß, was man tut, auch ohne den .selector möglich.


    Oder du sorgst dafür, dass das komplette Bootstrap (so wie früher) lädt, also mindestens

    Code
    HTMLHelper::_('bootstrap.framework');

    z.B. im Template einsetzen, damit du schon mal mit allen BS-Komponenten rumtesten kannst, also auch in einem Beitrag dieses oder jenes HTML oder in einem Modul.


    Dann kannst auf jeden Fall schon mit diesen data-bs-*-Attributen im HTML arbeiten. Ob dann evtl. noch CSS fehlen könnte, weiß ich nicht.


    Es gibt dann auch einen Kompromiss zwischen partiell und oder alles laden, der auch von Normal-Usern umsetzbar sein sollte, die sich ein bisschen an Dateien rantrauen, die dann je Seite die nötigen Bootstrap-Zeilen abfeuern. Da habe ich aber gänzlich die Lust verloren, das zu dokumentieren und die Sache weiter zu verfolgen (bis sich die Nerds endgültig ausgetobt haben ;-) ).


    Es ist halt dieses Spiel "Je mehr ich aus einer Software entferne, desto mehr kann ich die Geschwindigkeit lobpreisen", ungeachtet der Tatsache, dass User und Programmierer zu erheblich Mehrarbeit genötigt werden, die das dann alles wieder reinpopeln, was die Geschwindigkeit wieder zurücknimmt, je nachdem wie gut man das beherrscht oder wie spät es mal wieder geworden ist.

  • Aus welchem Grund ist es "Closed" ? Wenn es eine Lösung gibt, welche den ? Ich verstehe diese Kommentare gemäss deine Links nicht ganz.

    Es wurde dort im Issue #33305 (siehe auch #5) durch diesen Link ganz einfach geschlossen:

    https://docs.joomla.org/J4.x:U…ap_Components_in_Joomla_4

    - somit stumm geschaltet ...


    Wunderbar erklärt hat es ja nun Re:Later im vorigen Post.


    Liebe Grüße

    Christine

  • Ok, habe folgende Zeile in der index.php des Template eingefügt und das Carousel funktioniert.


    PHP
    <?php echo HTMLHelper::_('bootstrap.framework'); ?>


    Dann bräuchte es nur noch eine Liste für alle Bootstrap 5 Funktionen die ohne «Manuellen Zusatz» nicht funktionieren und natürlich die nötigen Anweisungen dazu. ;)

  • Die Grundidee von dem Demo-Modul in den Docs ist nebenbei von mir. Die habe ich dem Autor mal ähnlich vorgeschlagen. Allerdings war meine Idee zielgerichteter in Richtung schnelles Benutzer-Helferlein ohne JavaScript-Skills oder halt doch und ohne extra Modul. Egal...


    Letztlich ist das jetzt zu 90% nur eine Kopie der Bootstrap-Docs, die man nicht besser machen kann.


    Muss man ja mal sagen dürfen oder ist das arrogant? ;-)

  • Dann bräuchte es nur noch eine Liste für alle Bootstrap 5 Funktionen die ohne «Manuellen Zusatz» nicht funktionieren und natürlich die nötigen Anweisungen dazu.

    Schau dir die Components-Ecke von Bootstrap-Docs an. Das meiste sollte ja auch mit den puren HTML-Beispielen dort funktionieren.


    https://getbootstrap.com/docs/5.0/components/accordion/

  • Wollte eigentlich nur sagen das es gut wäre zu wissen welche nicht funktionieren, bevor man es installiert und Stunden lang der Fehler bei uns suchen. Das das meiste funktioniert ist richtig und ich bin eigentlich zufrieden mit Bootstrap 5. Naja was solls. ;)

  • Jetzt habe ich bemerkt, dass die Lösung im #10 für das Carousel zwar funktioniert, aber dafür die Bootstrap Button bei klick nicht mehr weiterleiten, nicht mehr funktionieren.


    Es wäre nett, wenn jemanden der sich mit PHP auskennt, hier die richtige Lösung geben könnte.


    Welche Anweisung genau und wo, in der index.php, man einfügen müsste.



    -----------

    RC 5

  • Hallo Stef,

    Jetzt habe ich bemerkt, dass die Lösung im #10 für das Carousel zwar funktioniert, aber dafür die Bootstrap Button bei klick nicht mehr weiterleiten, nicht mehr funktionieren. .....


    Welche Anweisung genau und wo, in der index.php, man einfügen müsste.

    eventuell hier: https://docs.joomla.org/J4.x:U…ap_Components_in_Joomla_4

    Code
    Button
    
    Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):
    
    \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.button', '.selector');

    CSS: https://getbootstrap.com/docs/5.0/components/carousel/ (With controls)


    obiges ist jetzt nur geraten, weil:

    Es wäre nett, wenn jemanden der sich mit PHP auskennt, hier die richtige Lösung geben könnte.

    da ich auf Re:Later 's Wissen hoffe.


    Wäre aber schon für helfende Tipplser gut, wenn man das Live sehen könnte, aber das weißt Du ja eh :-)


    Liebe Grüße

    Christine

  • Danke christine2 ,


    Habe es mal auf der Testseite eingefügt.


    Auf folgender Link ist das Carousel dass funktioniert.

    https://cassiopeia.lafoi.ch/test-2/test-a


    Der erste Link «LINK» funktioniert nicht, der untere «Link» ist ok.


    Sehe jetzt das einen (data-bs-toggle="button") vorhanden ist , ohne ist ok.

    Werde dieser Teil mal löschen.


    Aber trotzdem bleibt die Frage im Forum noch offen.


    Die PHP Zeile gemäss #10 wurde in der index.php ganz unten eingefügt.

  • Bei mir funktionieren beide Buttons mit data-bs-toggle. Sie bekommen die assistive Auszeichnung aria-pressed="true", wichtiger in diesem Zusammanhang, UND eine zusätzliche CSS-Klasse "active", wenn man ihn klickt. Der Link im href-Attribut wird dabei per JavaScript "verschluckt", da ein data-bs-toggle eben dafür da ist, auf der aktuellen Seite was zu toggeln bzw. auzulösen und nicht die Seite zu wechseln. Man kann damit z.B. ein Offcanvas-Menü öffnen und den zugehörigen Button entsprechend kennzeichnen.


    Klickt man den Button ein weiteres mal erhält man aria-pressed="false" und die active-Klasse verschwindet wieder.


    EDIT: Dahinter steht, dass in Bootstrap seit immer die Philosophie gilt: Öffne was bei Klick und nicht z.B. bei Hover und schließe erst wieder bei Klick. "Der Button erzählt einem den Status"

  • Klickt man den Button ein weiteres mal erhält man aria-pressed="false" und die active-Klasse verschwindet wieder.

    Hatte da was von hier probiert: https://getbootstrap.com/docs/5.0/components/buttons/ (Toggle states).

    Da ist mir aufgefallen, dass mein Eintrag: .... aria-pressed="true" .... bei neuer Sicht auf ... aria-pressed="false"

    geändert worden war :-) Temporär krieg ich es nicht hin.


    Liebe Grüße

    Christine

  • Temporär krieg ich es nicht hin.

    Versteh ich nicht, den Satz. Erst hat der Button gar nix, wenn man es nicht vorab in seinem HTML einträgt. Wenn nicht: Bei Klick kriegt er das true-Dings automatisch eingebaut. Bei weiterem Klick wirds dann zu false. Zumindest bei mir im Vivaldi gut zu sehen.

    Wenn man im HTML von Anfang an einträgt aria-pressed=true kriegt er beim ersten Klick ein false; und umgekehrt.

    So sollte es zumindest sein.

  • Der Button ist ja nicht das eigentliche Problem.


    Das Problem ist die eingefügte PHP Zeile um den Carousel zum laufen zu bringen in der index.php. Diesen zusätzlichen Eintrag sollte anderen Bootstrap Sachen wie Button. usw, nicht stören.


    Dann ist dieser PHP Eintrag nicht ganz richtig denke ich, oder sehe ich das falsch ?