HowTo: Header Slider mit NWI

webbird · 07.04.2026 18:47:53

Im Rahmen eines Projekts wollte ich für den Admin eine einfache Möglichkeit schaffen, einen Header Slider zu pflegen. Nur mit Bildern ist das einfach, aber wenn Text dazu kommen soll, wird es schon komplizierter.

Die Idee: Versteckte NWI-Sektion

Beitragsbild = Bild für den Header
Titel = Hauptüberschrift im Slide
Kurztext = Kurztext im Slide
Langtext = z.B. ein Link zu einer Unterseite

Zusätzliche Funktion in der functions.inc.php

[== PHP ==]
function mod_nwi_get_slide(int $sectionID, ?string $tpl = 'bs5carousel') {
    $posts = mod_nwi_posts_getall($sectionID, false, '', true);
    if(empty($tpl)) {
        $tpl = 'bs5carousel';
    }
    if(!empty($posts)) {
        ob_start();
        include __DIR__.'/templates/slides/'.$tpl.'.txt';
        $content = ob_get_contents();
        ob_end_clean();
        return $content;
    } else {
        echo "no slides";
    }
}

Template-Datei für den Slider - z.B. für Bootstrap 5 Carousel

Ablegen unter WB_PATH/modules/news_img/templates/slides/bs5carousel.txt

[== HTML ==]
<?php // ***** Display the entire block only if there is at least one slide *****
if(is_array($posts) && !empty($posts)):
?>
            <div id="myCarousel" class="carousel slide carousel-fade mb-6" data-bs-ride="carousel" data-bs-interval="6000">
                <div class="carousel-indicators">
<?php
    $first = true;
    $i = 1;
    foreach($posts as $p):
        if(!empty($p['image'])):
?>
                    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="<?= ($i-1) ?>" aria-label="Slide <?= $i ?>"<?php if($first): ?> class="active" aria-current="true"<?php endif; ?>>
                    </button>
<?php
            $first = false;
            $i++;
        endif;
    endforeach;
?>
                </div>
                <div class="carousel-inner">
<?php
    $first = true;
    foreach($posts as $p):
        if(!empty($p['image'])):
?>
                    <div class="carousel-item<?php if($first): ?> active<?php endif; ?>">
                        <img
                            src="<?= WB_URL.MEDIA_DIRECTORY ?>/.news_img/<?= $p['image'] ?>"
                            alt=""
                            aria-hidden="true"
                            class="d-block w-100"
                        />
                        <div class="container">
                            <div class="carousel-caption text-start">
                                <h1><?= $p['title'] ?></h1>
                                <p class="opacity-75">
                                    <?= $p['content_short'] ?>
                                </p>
                                <p>
                                    <?= $p['content_long'] ?>
                                </p>
                            </div>
                        </div>
                    </div>
<?php
            $first = false;
        endif;
    endforeach;
?>
            </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true">
                    </span>
                    <span class="visually-hidden">Next
                    </span>
                </button>
            </div>
<?php endif; ?>

Droplet oder direkter Aufruf im Template

Droplet im Anhang

Das Ganze braucht noch etwas Feinschliff, die Grundidee funktioniert aber einwandfrei. Aufgrund des Template-Verzeichnisses ist beispielsweise das slides-Template als NWI-Template auswählbar, was natürlich nicht funktionieren wird - aber für einen schnellen Test ist das okay.

Ich will das "fest" in NWI einbauen, daher bin ich für weitere Ideen und Vorschläge sowie "fertige" Slide-Templates dankbar.

attachment.php?item=4082&download=1

attachment.php?item=4083&download=1

Last edited by webbird (07.04.2026 18:50:44)

mk70

florian · 08.04.2026 08:31:27

Ich will das "fest" in NWI einbauen

Wäre das nicht eher was für NWI anywhere? Dann würde sich auch dieses Problem

Aufgrund des Template-Verzeichnisses ist beispielsweise das slides-Template als NWI-Template auswählbar, was natürlich nicht funktionieren wird

nicht stellen.

Langtext = z.B. ein Link zu einer Unterseite

Sinnvoll wäre mMn, wenn die Slides mit NWI-Beiträgen verlinkt wären.
Wenn der NWI-Core angefasst wird, dann vielleicht eher dahin gehend, dass ein zusätzliches Feld "Link statt Langtext" ergänzt wird, in das dann [wblink123] oder eine URL eingetragen werden kann und dieser Link dann beim Anklicken des Bildes/Teasers/mehr dazu-Links geöffnet wird. Das hätte auch für die Allgemeinheit eventuell größeren Nutzen.

mk70

Slugger · 08.04.2026 10:07:27

Vielleicht so in der Art?

https://forum.wbce.org/viewtopic.php?pid=46796#p46796

Last edited by Slugger (08.04.2026 11:23:10)

kleo · 08.04.2026 11:04:28

Moin,

Wenn es um eine neue Version von NWI geht, da können vielleicht auch kleine Bugs beseitigt werden. So ist es z.B. beim Kopieren einer NWI-Nachricht mit den Tags:

die Nachricht wird kopiert, die Tags aber nicht.

webbird · 08.04.2026 12:28:41

Slugger wrote:

Vielleicht so in der Art?
https://forum.wbce.org/viewtopic.php?pid=46796#p46796

Klar, warum nicht. Meine Idee umfaßt allerdings, dass es beliebige Slider geben kann. Hierbei ist zu beachten, dass ein Template dazu in der Regel nicht reicht - es braucht auch CSS und oft JS.

webbird · 08.04.2026 12:35:26

florian wrote:

Ich will das "fest" in NWI einbauen
Wäre das nicht eher was für NWI anywhere? Dann würde sich auch dieses Problem
Aufgrund des Template-Verzeichnisses ist beispielsweise das slides-Template als NWI-Template auswählbar, was natürlich nicht funktionieren wird
nicht stellen.

Ich bin da prinzipiell leidenschaftslos. NWI ist halt so halb "mein" Modul, da ist es naheliegend, es dort unterzubringen. Zumal es nur geringe Änderungen sind. Die meiste Logik steckt in den Templates selbst.

florian wrote:

Langtext = z.B. ein Link zu einer Unterseite
Sinnvoll wäre mMn, wenn die Slides mit NWI-Beiträgen verlinkt wären.

Kann Sinn machen, muss aber nicht. Ich würde es daher zumindest nicht darauf einschränken wollen. In der "Vorlage" des Sliders ist ein Button vorgesehen, aber das heißt ja nicht automatisch, dass da auch jeder irgendwas verlinken will.

Ich hatte auch überlegt, ein komplettes Addon Modul zu bauen. Das hätte den Charme, dass man Einstellmöglichkeiten vorsehen kann, wie z.B. "Slider nur auf Seite mit ID XY", "Slider aus NWI Sektion Nr. XY" usw. Zudem kann man eine komplette Slider-Template-Verwaltung einbauen und die Templates so ausbauen, dass es templatespezifische Optionen gibt. Bei Bootstrap z.B. die Zeitdauer zwischen den Slides.

WBCE CMS Forum

#1 07.04.2026 18:47:53

HowTo: Header Slider mit NWI

#2 08.04.2026 08:31:27

Re: HowTo: Header Slider mit NWI

#3 08.04.2026 10:07:27

Re: HowTo: Header Slider mit NWI

#4 08.04.2026 11:04:28

Re: HowTo: Header Slider mit NWI

#5 08.04.2026 12:28:41

Re: HowTo: Header Slider mit NWI

#6 08.04.2026 12:35:26

Re: HowTo: Header Slider mit NWI

Board footer