Verwendung: Bildnavigation als Seite

Jens Reichel's Avatar

Jens Reichel

05 Jan, 2021 05:44 PM

Produkt: Tao Contao

Liebes Rocksolid-Team,
auf meiner Seite mit ausgewählten Nordamerika-Reisen habe ich mir eine Bildnavigation mit Boxen selbst gebastelt. Diese muss ich jedoch jedes Mal von Hand anpassen, wenn eine neue Reise hinzukommt.
Lieber wäre mir eine Art Mega Menu mit Bildern, aber nicht in der flüchtigen Drop-Down-Version, sondern als "echte" Seite. Geht das?
Vielen Dank!
Jens Reichel

  1. Support Staff 1 Posted by RockSolid Theme... on 07 Jan, 2021 10:05 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Ja, das ist mit der Mega Menu Erweiterung möglich. Gehen Sie dafür bitte folgendermaßen vor:

    Im Contao-Backend unter „Layout › Templates › Neues Template“ erstellen Sie bitte eine Kopie vom Original-Template nav_rsmm.html5 im Ordner tao und benennen es danach in nav_images um.

    Ersetzen Sie den Inhalt des Templates mit folgendem Code:

    <div>
        <?php foreach ($this->items as $item): ?>
            <div>
                <a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>" class="<?= $item['class'] ?>"<?php if ($item['accesskey']) echo ' accesskey="' . $item['accesskey'] . '"' ?><?php if ($item['tabindex']) echo ' tabindex="' . $item['tabindex'] . '"' ?><?php if ($item['nofollow']) echo ' rel="nofollow"' ?><?= $item['target'] ?>>
                    {{image::<?= Contao\StringUtil::binToUuid($item['rsmm_image']) ?>}}
                </a>
                <h3><?= $item['link'] ?></h3>
                <?php if ($item['rsmm_subtitle']): ?>
                    <p><?= $item['rsmm_subtitle'] ?></p>
                <?php endif ?>
            </div>
        <?php endforeach ?>
    </div>
    

    Erstellen Sie ein Modul vom Typ „Mega Menu Navigation“ mit Startlevel 2 und Stoplevel 1 und wählen als Navigations-Template nav_images aus.

    Platzieren Sie das erstellte Bilder-Navigstions-Modul über ein Modul-Inhaltselement im Artikel auf der entsprechenden Seite an der gewünschten Position.

    Bild und Untertitel können Sie bei den Seiteneinstellungen der einzelnen Seiten im Bereich Mega-Menu-Einstellungen festlegen.

    Danach wird die Bilder-Navigation auf der Seite angezeigt und aktualisiert sich automatisch anhand der aktuellen Navigationsstruktur. Das nav_images.html5-Template können Sie Ihren Wünschen entsprechend anpassen um die gewünschte Darstellung zu realisieren.

  2. 2 Posted by Jens Reichel - ... on 07 Jan, 2021 03:58 PM

    Jens Reichel - DistincTravel's Avatar

    Danke für die sehr gute und ausführliche Anleitung! Ich habe sie exakt befolgt, es tut sich jedoch nichts (dort, wo ich das Modul eingefügt habe, ist nichts zu sehen).

    Fehlt eventuell noch ein Schritt? Um auszuwählen, welche Seiten in der Bildnavigation auftauchen, muss ich sie doch in der Seitenstruktur aufrufen und dort jeweils ein Bild auswählen und den Haken von "Mega-Menu-Bereich" setzen, richtig?

    Wenn ich das versuche, habe ich nur "6 Spalten", "Bilder" und "Projektnavigation" zur Auswahl. Müsste hier nicht noch eine neue Option auftauchen bzw. angelegt werden?

  3. Support Staff 3 Posted by RockSolid Theme... on 08 Jan, 2021 09:17 AM

    RockSolid Themes's Avatar

    Um auszuwählen, welche Seiten in der Bildnavigation auftauchen,

    Es tauchen automatisch die Seiten des entsprechenden Levels auf. Wenn Sie das Modul auf der Seite https://www.distinctravel.de/nordamerika platzieren, sollten die Unterseiten New York State, Deep South USA, Big Apple in Style, ... angezeigt werden.

    muss ich sie doch in der Seitenstruktur aufrufen und dort jeweils ein Bild auswählen und den Haken von "Mega-Menu-Bereich" setzen, richtig?

    Ja, das Bild müssen Sie in der Seitenstruktur bei jeder Seite im Bereich Mega-Menu-Einstellungen festlegen.

    Wenn ich das versuche, habe ich nur "6 Spalten", "Bilder" und "Projektnavigation" zur Auswahl. Müsste hier nicht noch eine neue Option auftauchen bzw. angelegt werden?

    Die Checkbox „Mega Menu aktivieren“ müssen Sie nicht setzen und dadurch auch keinen Bereich auswählen.

  4. 4 Posted by Jens Reichel - ... on 08 Jan, 2021 10:24 AM

    Jens Reichel - DistincTravel's Avatar

    Jetzt habe ich's verstanden! Und auf https://www.distinctravel.de/nordamerika umgesetzt, hat funktioniert.

    Letzte Frage: Auf der o. g. Seite ist oben noch die alte von Hand erstellte Variante mit Boxen sichtbar, unten die neue mit automatischer Bildnavigation. Unten sind die Bilder riesig. Wie bekomme ich es hin, dass die Darstellung wie im Bereich darüber ist? Also mit kleineren Vorschaubildern, auf einem Desktop 3-spaltig und auf Mobilgeräten 2-spaltig?

    Ich nehme an, ich muss zusätzlichen Code ins Template *nav_images.html5*-Template einfügen. Kann ich den irgendwo rauskopieren?

    Tausend Dank für den fantastischen Support!

  5. Support Staff 5 Posted by RockSolid Theme... on 08 Jan, 2021 01:21 PM

    RockSolid Themes's Avatar

    Ich nehme an, ich muss zusätzlichen Code ins Template nav_images.html5-Template einfügen.

    Korrekt, das nav_images.html5-Template können Sie Ihren Wünschen entsprechend anpassen um die gewünschte Darstellung zu realisieren.

    Kann ich den irgendwo rauskopieren?

    Wenn Sie die HTML-Struktur inklusive der CSS-Klassen von der alten Variante in das nav_images.html5-Template übernehmen sollte die Darstellung exakt gleich sein.

    Als Vorlage können Sie direkt den Quelltext der alten Variante auf Ihrer Website nutzen.

  6. 6 Posted by Jens Reichel - ... on 08 Jan, 2021 02:32 PM

    Jens Reichel - DistincTravel's Avatar

    Sorry, ich kann nicht folgen, oder wir haben uns missverstanden. "Alte Variante" ist doch in diesem Fall nicht gleich "gewünschte Variante", oder?

    Angelegt hatte ich das Template *nav_images.html5* ja zunächst als Kopie von *nav_rsmm.html5*, den Code dann aber gemäß Ihren Anweisungen ersetzt. Wenn ich jetzt den Code der alten Variante verwendete, wäre dieser Zwischenschritt ja gar nicht nötig gewesen.

    Was ich suche, ist der Code, der z. B. die Anordnung der Boxen im oberen Bereich der Seite https://www.distinctravel.de/nordamerika in wahlweise drei oder zwei Spalten mit entsprechend kleinen Bildern steuert. Damit der untere Bereich der Seite so aussieht wie der obere. In welcher Datei finde ich diesen Codeteil?

    Wir haben's bald ... ;-) Nochmals danke!

  7. Support Staff 7 Posted by RockSolid Theme... on 11 Jan, 2021 10:42 AM

    RockSolid Themes's Avatar

    Wenn ich jetzt den Code der alten Variante verwendete, wäre dieser Zwischenschritt ja gar nicht nötig gewesen.

    Der Code der alten Variante kann als Vorlage für das Template verwendet werden, sprich die verwendeten HTML-Tags und CSS-Klassen übernommen werden, der dynamische Teil des Template muss jedoch bestehen bleiben.

    Diese Kombination kann in Ihrem Fall z. B. folgendermaßen aussehen:

    <?php
        $config = array(
            'large' => array('-large-col-3-1 -large-first', '-large-col-3-1', '-large-col-3-1 -large-last'),
            'medium' => array('-medium-col-3-1 -medium-first', '-medium-col-3-1', '-medium-col-3-1 -medium-last'),
            'small' => array('-small-col-2-1 -small-first', '-small-col-2-1 -small-last'),
        );
    ?>
    <div class="teaser-boxes">
        <?php foreach ($this->items as $index => $item): ?>
            <div class="teaser-boxes-item <?php
                $classes = array('rs-column');
                foreach ($config as $name => $media) {
                    $classes[] = $media[$index % count($media)];
                    if ($index < count($media)) {
                        $classes[] = '-' . $name . '-first-row';
                    }
                }
                echo implode(' ', $classes);
            ?>">
                <a class="image-wrapper" href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>" class="<?= $item['class'] ?>"<?php if ($item['accesskey']) echo ' accesskey="' . $item['accesskey'] . '"' ?><?php if ($item['tabindex']) echo ' tabindex="' . $item['tabindex'] . '"' ?><?php if ($item['nofollow']) echo ' rel="nofollow"' ?><?= $item['target'] ?>>
                    {{image::<?= Contao\StringUtil::binToUuid($item['rsmm_image']) ?>}}
                </a>
                <h3><?= $item['link'] ?></h3>
                <?php if ($item['rsmm_subtitle']): ?>
                    <div class="teaser-boxes-item-text">
                        <p><?= $item['rsmm_subtitle'] ?></p>
                    </div>
                <?php endif ?>
            </div>
        <?php endforeach ?>
    </div>
    
  8. 8 Posted by Jens Reichel - ... on 11 Jan, 2021 11:25 AM

    Jens Reichel - DistincTravel's Avatar

    Perfekt - genau so hatte ich mir das vorgestellt:

    https://www.distinctravel.de/nordamerika

    Tausend Dank!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac