Bootstrap Carousel

NetNomad

Hallo,

ich versuche seit Tagen das Carousel von Bootstrap 5.3 in Cassiopeia zum Sliden zu bekommen.

Dazu habe ich den Beispielcode von https://getbootstrap.com/docs/5.3/components/carousel/ in ein 'eigenes Modul' kopiert und nur bei scr=" ..." den Pfad zum Bild eingegeben (3x).

Die Schaltenfläache sind wie in der Demo auf https://getbootstrap.com/docs/5.3/components/carousel/ vorhanden, aber wenn man draufklickt, passiert nichts.

Code

<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators"><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button></div>
<div class="carousel-inner">
<div class="carousel-item active"><img src="images/fotos/slider_header/BAI_002191.JPG" class="d-block w-100" alt="..."></div>
<div class="carousel-item"><img src="images/fotos/slider_header/BAI_002191.JPG" class="d-block w-100" alt="..."></div>
<div class="carousel-item"><img src="images/fotos/slider_header/BAI_002191.JPG" class="d-block w-100" alt="..."></div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button></div>

Hat jemand eine Idee?
Vielen Dank.

lunalars

Das entsprechende javascript ("bootstrap.carousel") fehlt hier noch / wird nicht geladen.

Du könntest ein eigenes "Template", bzw. einen override anlegen ...

Erstelle eine Datei "carousel.php" in templates/dein-template/html/mod_custom mit folgendem Code:

PHP

<?php defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;

$modId = 'mod-custom' . $module->id;

// hiermit wird das bootstrap carousel geladen
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->useScript('bootstrap.carousel');

?>

<div id="<?php echo $modId; ?>" class="mod-custom custom">
    <?php echo $module->content; ?>
</div>

Alles anzeigen

Anschliessend kannst du diese im Backend in deinem Modul unter "Erweitert -> Layout" auswählen.

Getestet mit j4 - sollte aber in j5 auch funktionieren.

Stef

Oder du sorgst dafür, dass das komplette Bootstrap (so wie früher) lädt ... gemäss Antwort von Re:Later

Beitrag

RE: Bootstrap 5 | Carousel

[…]

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)

(Quelltext, 1 Zeile)

So…

Re:Later

27. Juli 2021 um 22:34

Re:Later

Zitat von Stef

Oder du sorgst dafür, dass das komplette Bootstrap (so wie früher) lädt ... gemäss Antwort von

Nur Hinweis: Die von mir da genannte HTMLHelper-Lösung für Bootstrap flliegt mit Joomla 6 aus dem Joomla-Core. Uns soll ja nicht langweilig werden.

Stef

Ach du sch… Und wie soll man dann das komplette Bootstrap laden ?

WM-Loose

Da ist das letzte Wort noch nicht gesprochen

Es sei denn, Joomla will einen Großteil seiner User verlieren.

Bootstrap müsste dann alterativ über Template Frameworks wie Astroid usw. geladen werden.

Re:Later

Stef Du hast gefragt

ABkupfern die alte Methode, was z.B. Astroid-Framework jetzt schon leicht abgewandelt macht, wenn man im Plugin Bootstrap-Ladung aktiviert:

Code

$wa = Factory::getApplication()
->getDocument()
->getWebAssetManager();

array_map(
function ($script) use ($wa) {
$wa->useScript('bootstrap.' . $script);
},
['alert', 'button', 'carousel', 'collapse', 'dropdown', 'modal', 'offcanvas', 'popover', 'scrollspy', 'tab', 'toast']
);

oder mit der joomla.asset.json arbeiten. Ein neues Asset definieren:

Code

        {
            "name": "mein.bootstrap.alle",
            "type": "script",
            "uri": "",
            "dependencies": [
                "bootstrap.alert",
                "bootstrap.button",
                "bootstrap.carousel",
                "bootstrap.collapse",
                "bootstrap.dropdown",
                "bootstrap.modal",
                "bootstrap.offcanvas",
                "bootstrap.popover",
                "bootstrap.scrollspy",
                "bootstrap.tab",
                "bootstrap.toast"
            ]
        },

Alles anzeigen

Im Template-index.php dann (in anderen Erweiterungen geht es ähnlich):

Code

$wa    = $this->getWebAssetManager();
$wa->useScript('mein.bootstrap.alle');

ergibt in Joomla 5 (in Joomla 4 lästigerweise etwas abweichend, aber vom Wunsch-Ergebnis gleich:

Aaaber, es gibt auch weitere Tricksereien, die sich leider beim Wechsel von Joomla 4 auf 5 bisschen erschwert haben.

Oder halt gleich in der Joomla-index.php. (Man spart sich die Anpassungen in obiger Datei). In anderen Erweiterungen ähnlich

Code

$wa    = $this->getWebAssetManager();
$wa->useScript('bootstrap.alert')
->useScript('bootstrap.button')
->useScript('bootstrap.carousel')
->useScript('bootstrap.collapse')
--- und so weiter ---
;

So lange man mit den Bootstrap-Versionen, die Joomla mitbringt, klar kommt, einfach. Sobald Bootstrap eine weitere Bootstrap-Komponente (nicht zu verwechseln mit einer Joomla-Komponente) mitbringt, muss man nachrüsten oder sie wird halt nicht geladen.

Fleigt eine raus, muss man nachrüsten, und sie entfernen, weil einem die Seite sonst um die Ohren fliegt.

Will man allerdings seine eigenen Bootstrap-Varianten verwenden, dann ist weitere Feilerei nötig, die ich aber auch in der joomla.asset.json (meist) des Templates abwickle.

Alles jedenfalls zeitraubender, sch... Denksport von Joomla-Version zu Joomla-Version Was in Joomla 6 an weiteren Fiesheiten kommt, wird sich zeigen müssen.

Stef

Danke Re:Later,

Finde ich gar nicht lustig, statt es zu einfachen, möchte man das komplette Bootstrap nutzen, wird das ganze schon wieder erschwert.

Kann man nur den Kopf schütteln.

Re:Later

Na ja, wenn man in Joomla 5, dann nicht auf die Nachricht reinfällt, die suggeriert, dass Joomla 6 jetzt viel toller ist und man doch (teils verfrüht) updaten sollte (das sind dann die kleineren Reparier-Jobs, die bei mir landen ) reden wir ja von Jahren, dass das Spruchreif wird.

NetNomad

Zitat von lunalars
Das entsprechende javascript ("bootstrap.carousel") fehlt hier noch / wird nicht geladen.
Du könntest ein eigenes "Template", bzw. einen override anlegen ...
Erstelle eine Datei "carousel.php" in templates/dein-template/html/mod_custom mit folgendem Code:
PHP
<?php defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;

$modId = 'mod-custom' . $module->id;

// hiermit wird das bootstrap carousel geladen
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->useScript('bootstrap.carousel');

?>

<div id="<?php echo $modId; ?>" class="mod-custom custom">
    <?php echo $module->content; ?>
</div>
Alles anzeigen
Anschliessend kannst du diese im Backend in deinem Modul unter "Erweitert -> Layout" auswählen.
Getestet mit j4 - sollte aber in j5 auch funktionieren.

Danke. Ich habe den Code in eine Datei mod_custom.php kopiert und im Verzeichnis des Child-Templates gespeichert - siehe Screenshot.

Im Modul kann ich die Datei nicht nicht unter "Erweitert > Layout" auswählen ...?

Re:Later

Zitat von Juergen

Danke. Ich habe den Code in eine Datei mod_custom.php kopiert

Das ist falsch. Vielleicht hilft das weiter? https://ghsvs.de/programmierer-…n-eigener-codes EIgentlich genau dein Szenario.

lunalars

Da fehlt noch der Ordner "mod_custom". Die Datei muss im Ordner "templates/dein-template/html/mod_custom" liegen.

Also "templates/dein-template/html/mod_custom/carousel.php", dann sollte sie auswählbar sein

NetNomad

Zitat von lunalars

Da fehlt noch der Ordner "mod_custom". Die Datei muss im Ordner "templates/dein-template/html/mod_custom" liegen.
Also "templates/dein-template/html/mod_custom/carousel.php", dann sollte sie auswählbar sein

Danke. Jetzt funktioniert es.

Eine Frage noch: wo gibt es eine Anleitung zum Code schreiben für Overrides? Das ist doch ein Override, oder?

lunalars

Hier mal eine "Anleitung" von Astrid Günther: https://blog.astrid-guenther.de/joomla/templat…des-und-chrome/

Mehr habe ich da gerade nicht zur Hand - aber es wird hier im Forum auch immer wieder zu solchen verlinkt. Such mal

NetNomad

Zitat von lunalars

Hier mal eine "Anleitung" von Astrid Günther: https://blog.astrid-guenther.de/joomla/templat…des-und-chrome/
Mehr habe ich da gerade nicht zur Hand - aber es wird hier im Forum auch immer wieder zu solchen verlinkt. Such mal

Danke.

GrisuSP

Zitat von lunalars

Hier mal eine "Anleitung" von Astrid Günther: https://blog.astrid-guenther.de/joomla/templat…des-und-chrome/
Mehr habe ich da gerade nicht zur Hand - aber es wird hier im Forum auch immer wieder zu solchen verlinkt. Such mal

Moin zusammen,

die Blog-Beiträge von Astrid Günther zum Thema Joomla sind auf ihrer Seite nicht mehr aufrufbar. Weiß einer wieso das so ist oder ob der Blog zum Thema Joomla umgezogen ist ? -Die Beiträge waren immer sehr hilfreich.

Stef

Zitat von GrisuSP

Moin zusammen,
die Blog-Beiträge von Astrid Günther zum Thema Joomla sind auf ihrer Seite nicht mehr aufrufbar. Weiß einer wieso das so ist oder ob der Blog zum Thema Joomla umgezogen ist ? -Die Beiträge waren immer sehr hilfreich.

Siehe hier:

Beitrag

RE: Favicon - ist das so schwer?

[…]

Habe Astrid informiert & sie hat mir zurück geschrieben.

Sie hat es leider noch nicht geschafft, die Texte zu überarbeiten.

Sie möchte keine veralteten Informationen veröffentlichen und hat daher die Einträge gelöscht/umgeleitet.

Es wird noch ein Weilchen dauern. Der Wandel Joomla, Web etc. macht doch viel Arbeit.

Liebe Grüße

Christine

christine2

3. Februar 2024 um 20:16

RE: Bootstrap 5 | Carousel

RE: Favicon - ist das so schwer?

Tags