FAQ :: Themes und Erweiterungen / pdir Docs

Warum wird mir ein Bild nicht angezeigt?

Warum funktioniert die Großansicht eines Bildes in einer Lightbox nicht, wenn ich darauf klicke?

Warum werden keine animierten GIFs angezeigt?

Warum werden manche Bilder nicht angezeigt? (WEBP-Unterstützung)

Wenn neuere Browser versuchen ein WEBP-Bild zu laden und es nicht unterstützt wird, kann es zu einer Fehlermeldung kommen.

Die Fehlermeldung kann dann in etwa so aussehen:

request.CRITICAL: Uncaught PHP Exception RuntimeException: "Image format "webp" is not supported in Imagine\Imagick\Imagine on this environment. Consider removing this format from contao.image.valid_extensions or switch the contao.image.imagine_service to an implementation that supports it.

Mögliche Lösungen:

#1 Imagine updaten oder vom Hoster machen lassen (neueste Version nutzen)

#2 Alternative Bildbearbeitungsmöglichkeit nutzen

Über die config.yml kannst du einen anderen Bildbearbeitungsservice angeben, anschließend muss der Cache geleert werden. Oftmals hilft dieser Punkt bereits. Wenn WEBP unterstützt wird, solltest du es bei den Bildgrößen auch auswählen können.

contao:
    image:
        image_service: 'contao.image.imagine.gd'

oder

contao:
    image:
        image_service: 'contao.image.imagine.gmagick'

#3 Entfernen von WEBP aus den erlaubten Dateiendungen

Füge folgendes in der config.yml hinzu und leere anschließend den Cache neu.

contao:
    image:
        valid_extensions:  
            - jpg
            - jpeg
            - gif
            - png
            - tif
            - tiff
            - bmp
            - svg
            - svgz

#4 Anpassung der .htaccess

<IfModule mod_mime.c>
   AddType image/webp .webp
</IfModule>

Wie kann ich in der mobilen Navigation die Icons anpassen?

Um andere Icons (Plus- und Minus-Zeichen) in der mobilen Navigation anzuzeigen, kannst du das Template nav_default_nature.html5 anpassen. Die Icons werden mit Font Awesome eingebunden und können durch das Ändern der Klassennamen angepasst werden.

Suche im Template nach folgenden Stellen:

<i class="fas fa-plus-sqare"></i> <i class="fas fa-minus-square"></i>

Um z. B. ein einfaches Plus ohne Hintergrund anzuzeigen, ersetzt du die Klasse fa-plus-square durch fa-plus.

Soll noch die Farbe angepasst werden, kannst du das über eine CSS-Anweisung in der custom.scss lösen.

.mod_navigation.navbar .navbar-menu.is-active  {
  .toggle-less i, .toggle-more i {
    color: #000;
  }
}

Wie kann ich erreichen, dass die Navigation am oberen Bildschirmrand kleben bleibt, wenn man herunterscrollt?

Füge dazu folgendes CSS in der custom.scss ein. Möglicherweise ist es danach nötig die Seite mit Strg + F5 neuzuladen (Cache).

.mod_navigation.navbar {
    position: fixed;
    transition: all .3s;
    
    &.stuck {
    	height: 70px;
    	
    	.navbar-brand img {
    		max-height: 40px;
    	}
    	
    	.navbar-start {
		    padding: 0 70px;
		}
    }
}

Nun wird noch etwas jQuery-Code benötigt. Lege dazu entweder eine neue Javascript-Datei (z. B. custom.js) an und binde sie im Layout ein (unter JavaScript -> Externe JavaScripts) oder füge den Code direkt im Layout im Feld Eigener JavaScript-Code (unter JavaScript) ein (in dem Fall mit einem öffnenden <script> und schließenden </script>).

jQuery(document).ready(function($) {
    stuckNavbar();
    
    $(window).scroll(function () {
        stuckNavbar();
    });
    
    function stuckNavbar() {
    	var scrollPos = $(window).scrollTop();
        if (scrollPos > 0) {
            $('.mod_navigation.navbar').addClass('stuck');
        } else {
            $('.mod_navigation.navbar').removeClass('stuck');
        }
    }
});

Wie kann ich im Header eine Suche einbinden?

Modul anlegen

Lege ein Modul vom Typ Suchmaschine an, wähle eine Weiterleitungsseite und das Modul-Template mod_search_nature aus.

Template anpassen

Dupliziere nun das Template nav_default_nature.html5 und benenne es um (z. B. in nav_default_nature_custom.html5). Das Template muss im Modul der Hauptnavigation (NAV / Hauptnavigation) in den Template-Einstellungen unter Navigations-Template ausgewählt werden.

Bearbeite das Template und füge vor dem schließenden </div> folgende Zeile ein. Ersetze ID durch die ID des Suchmaschinen-Moduls.

<?php if($this->level == "level_1"): ?>{{insert_module::ID}}<?php endif; ?>

Styling

Zum Schluss muss noch etwas SCSS für das Aussehen definiert werden. Bearbeite dazu in der Dateiverwaltung unter naturetheme/scss die custom.scss und füge folgenden Code ein:

header .mod_search {
    margin-left: 20px;
    
    .control {
        height: 100%;
    }
    
    .formbody {
        display: flex;
    }
    
    .widget-submit {
        margin: 0;
    }
    
    .widget:not(:last-child) {
        margin-bottom: 0;
    }
    
    .widget-text {
        margin-right: 10px;
        
        input {
            height: 100%;
            border: none;
        }
    }
}

@media (max-width: 1023px) {
    header .mod_search {
        margin: 10px 0 0 10px;
    }
}

So würde es aussehen

Wie kann ich über der Hauptnavigation eine Headerleiste anzeigen um z. B. Kontakt- und Adressdaten zu hinterlegen?

Artikel anlegen

Lege dazu unter Nature Theme Elemente - 01_Header einen neuen Artikel an.

Bearbeite die Artikeleinstellungen, wähle unter Template-Einstellungen bei Theme Helper Tag NATURE01/02 aus und füge unter Experteneinstellungen die Klasse header-top hinzu.

Inhalte einpflegen

Um Kontakt- und Adressdaten anzuzeigen kannst du das Element Text und Icon (unter Contao Themes zu finden) anlegen und einen Text angeben sowie ein Font-Awesome-Icon auswählen.

Modul anlegen

Wechsle zu Themes, bearbeite die Frontend-Module des Theme (Zahnrad-Icon) und lege ein neues Modul vom Typ Eigener HTML-Code an. Füge dort folgenden Inserttag ein:

{{theme::content::NATURE01/02}}

Layout bearbeiten

Bearbeite nun die Seitenlayouts des Theme (direkt nach dem Zahnrad-Icon) und bearbeite das Layout, wo die Headerleiste angezeigt werden soll. Unter Frontend-Module - Eingebundene Module fügst du ganz oben das eben angelegte Modul an und wählst bei Layoutbereich Kopfzeile aus.

Styling

Zum Schluss fügst du in der custom.scss noch folgenden SCSS-Code ein, damit die Headerleiste entsprechend dargestellt wird.

$headerTopSize: 35px;

body:not(.home):not(.contact) #header .inside {
  padding-top: 140px;
}

.header-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: $headerTopSize;
  background: darken($navbar-background-color,10%);
  left: 0;
  z-index: 2;
  color: $navbar-item-color;
  font-size: .8em;
  
  .block:not(:last-child) {
    margin-bottom: 0;
  }
  
  .ce_ct_featureElement {
    .icon {
      width: inherit;
      margin-right: 10px;
      padding-bottom: 0;
    }
    
    .feature-text {
      width: inherit;
    }
    
    &:not(:last-child) {
      margin-right: 30px;
    }
  }
  
  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  + .mod_navigation {
    top: $headerTopSize;
  }
}

@media (max-width: 1023px) {
  .full-width-height-slider .text {
    padding-top: 160px;
  }
}

@media (max-width: 992px) {
  .header-top {
    display: none;
    
    + .mod_navigation {
      top: 0;
    }
  }
}

So sollte es aussehen

Wie kann ich eine Shortlink-Navigation am Bildschirmrand einbinden?

Lege in der Seitenstruktur einen Ordner “Shortlinks” und darin die Seiten (z. B. als interne Weiterleitungen) an. Mittels der Font Awesome Inserttags im Seitennamen kannst du Icons anzeigen lassen.

Lege ein Modul vom Typ Individuelle Navigation an und vergebe die Klasse shortlinks.

Das Modul bindest du im Layout in der Fußzeile ein.

Zum Schluss benötigen wir noch etwas CSS für das Styling, was du in der custom.scss einfügen kannst.

.shortlinks {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    height: 100%;
    display: flex;
    align-items: center;
    
    @media (max-width: 1023px) {
        display: none;
    }
    
    a {
        background: $link;
        display: block;
        color: #fff;
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        margin: 25px 0;
        padding: 10px;
        
        &:hover {
            background: $link-hover;
        }
        
        i {
            color: #fff;
            font-size: 2rem;
        }
    }
}

So sollte es am Ende aussehen:

Wie kann ich den Navigations-Effekt wie beim MATE Theme einbinden?

Den Effekt kannst du über das Skript Headroom.js einbinden, herunterladen kannst du es unter wicky.nillia.ms/headroom.js.

Binde die headroom.min.js über das Seitenlayout bei Externe JavaScripts ein und füge das folgende JavaScript ebenfalls im Seitenlayout bei Eigener JavaScript-Code ein. Alternativ kannst es natürlich auch in eine eigene JavaScript-Datei auslagern.

<script>
var myElement = document.querySelector(".mod_navigation.navbar");
var headroom = new Headroom(myElement, {
 "offset": 600
});
headroom.init();
</script>

Zu guter letzt fügst du noch folgendes CSS in der custom.scss ein.

.headroom {
   will-change: transform;
   transition: transform 200ms linear;
}

.headroom--pinned {
   transform: translateY(0%);
}

.headroom--unpinned {
 transform: translateY(-100%);
}

.mod_navigation.navbar {
   position: fixed;
   transition: all .3s;
 
   &.stuck {
      height: 70px;
   
    .navbar-brand img {
       max-height: 40px;
    }
   
    .navbar-start {
       padding: 0 70px;
    }
   }
}

Wie kann ich bei dem Startseiten-Slider den Rahmen um das Bild entfernen?

Füge dazu in der custom.scss folgendes CSS ein:

.full-width-height-slider .text img {
  border: none;
}

Wie kann ich eine Google Maps Karte anzeigen?

Installiere dazu die Erweiterung Google Maps. Im Backend findest du dann einen Menüpunkt Google Maps, wo du deine Karte anlegen kannst.

Mittels eines Inhaltselements (Media-Elemente -> Google Map) bindest du die Karte an der gewünschten Stelle in einem Artikel ein. Um sie z. B. auf der Kontakt-Seite im Header anzuzeigen, bindest du sie im Artikel Header ein.

Den API-Key kannst du in den Einstellungen unter Google Maps eintragen.

Damit die Karte ohne Abstand nach unten dargestellt wird, ist noch etwas CSS in der custom.scss nötig.

.dlh_googlemap.block:not(:last-child) {
	margin-bottom: 0;
}

So könnte es dann aussehen:

Wie kann ich verhindern, dass die Theme-CSS-Datei gecached wird?

Normalerweise bekommen Besucher, die die Webseite bereits besucht haben, eine „gecachte“ Datei ausgeliefert. Möchte man das verhindern kann man dies über eine Anpassung im fe_page-Template erreichen.

Passe dazu folgendes Template an: fe_page_nature.html5.

Damit die CSS-Datei nicht gecached wird, kann man z. B. einen Timestamp an den Dateinamen anhängen. Füge dazu bei der Zeile echo $combiner->getCombinedFile(); ?>"> vor den Anführungszeichen folgendes ein: ?date=<?= time() ?>

So sollte es aussehen:

<link rel="stylesheet" type="text/css" media="all" href="<?php
// add stylesheets
$combiner = new Combiner();
$combiner->add('bundles/contaothemesnetnaturetheme/fonts/fontawesome/css/all.min.css');

if (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN') {
  $combiner->add('bundles/contaothemesnetnaturetheme/scss/nature_win.scss');
} else {
  $combiner->add('bundles/contaothemesnetnaturetheme/scss/nature.scss');
}

echo $combiner->getCombinedFile(); ?>?date=<?= time() ?>">

FAQ

Bilder

Mögliche Lösungen:

Header / Navigation

Modul anlegen

Template anpassen

Styling

So würde es aussehen

Artikel anlegen

Inhalte einpflegen

Modul anlegen

Layout bearbeiten

Styling

So sollte es aussehen

Slider

Sonstiges