FAQ

The folder in the file manager may not be set to public. You can check this by editing the folder. Public must be ticked, otherwise the image is not displayed in the front end.

The theme has to load jQuery and the jQuery template j_colorbox. You can edit the layout in the back end under Themes via the third-to-last icon Edit the page layouts of theme ID 1.

For animated GIFs, do not set an image size in the image settings, otherwise the animation is lost.

If newer browsers try to load a WEBP image and it is not supported, an error may occur.

The error message may look something like this:

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. 

Possible solutions:

#1 Update Imagine or have your host do it (use the latest version)

#2 Use an alternative image processing service

You can specify a different image processing service in config.yml; afterwards the cache has to be cleared. This often solves the problem already. If WEBP is supported, you should also be able to select it in the image sizes.

contao:
    image:
        imagine_service: 'contao.image.imagine.gd'

or

contao:
    image:
        imagine_service: 'contao.image.imagine.gmagick'

#3 Remove WEBP from the allowed file extensions

Add the following to config.yml and then clear the cache.

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

#4 Adjust the .htaccess

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

Duplicate the template j_accordion with the following content:

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
      }
    });
$(&#39;.toggler-inner&#39;).parent().accordion({
  // Put custom options here
  heightStyle: &#39;content&#39;,
  header: &#39;.toggler-inner&#39;,
  collapsible: true,
  active: false,
  create: function(event, ui) {
    ui.header.addClass(&#39;active&#39;);
    $(&#39;.toggler-inner&#39;).attr(&#39;tabindex&#39;, 0);
  },
  activate: function(event, ui) {
    ui.newHeader.addClass(&#39;active&#39;);
    ui.oldHeader.removeClass(&#39;active&#39;);
    $(&#39;.toggler-inner&#39;).attr(&#39;tabindex&#39;, 0);
  }
});

$(&#39;.toggler-outer&#39;).parent().accordion({
  // Put custom options here
  heightStyle: &#39;content&#39;,
  header: &#39;.toggler-outer&#39;,
  collapsible: true,
  //active: false,
  create: function(event, ui) {
    ui.header.addClass(&#39;active&#39;);
    $(&#39;.toggler-outer&#39;).attr(&#39;tabindex&#39;, 0);
  },
  activate: function(event, ui) {
    ui.newHeader.addClass(&#39;active&#39;);
    ui.oldHeader.removeClass(&#39;active&#39;);
    $(&#39;.toggler-outer&#39;).attr(&#39;tabindex&#39;, 0);
  }
});
});
</script>

With active: false or active: true you control whether the accordions are closed or open by default.

Add the class toggler-outer under class names to the outer accordions and the class toggler-inner to the inner accordions.

Outer accordions:

Inner accordions:

Example:

Go to the menu item Templates and duplicate the template j_accordion.html5. Add the following line to the parameters:

active: false,

The template should then look like this:

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      active: false,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
      }
    });
  });
</script>

Adjust the template news_mate_slider.html5.

Replace the code in line 16, where the headline is set, with the following line:

<h2><?php if($this->hasText) { echo $this->linkHeadline; } else { echo $this->headline; } ?></h2>

In line 22, remove the following part: || $this->hasTeaser.

To display the headline in white as well, add the following lines to custom.scss:

.slider.mod_newslist h2 {
  color: #fff;
}

You can do this with an adjustment in custom.scss:

#wrapper .slider.mod_newslist .indicators .indicator-item .subheadline {
  font-size: 16px;
}
#wrapper .slider.mod_newslist .indicators .indicator-item .headline {
font-size: 16px;
}

Edit the template news_mate_slider.html5 and replace the following line (line 2) …

<div class="img" <?php if ($this->addImage): ?>style="background-image:url('<?= $this->picture['img']['src'] ?>');"<?php endif; ?>></div>`

… with the following lines:

<a href="<?= $this->link ?>" class="img">
  <div <?php if ($this->addImage): ?>style="background-image:url('<?= $this->picture['img']['src'] ?>');"<?php endif; ?>></div>
</a>

Also add some CSS to custom.scss.

#wrapper .slider.mod_newslist .img {
  position: relative;
}
#wrapper .slider.mod_newslist .img div {
position: absolute;
top: 0;
width: 100%;
height: 100%;
left: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

You can do this with an adjustment in custom.scss.

Remove icons:

.ce_list ul:not(.browser-default) li:before,
.ce_text ul:not(.browser-default) li:before {
  display: none;
}

Change icons:

.ce_list ul:not(.browser-default) li:before,
.ce_text ul:not(.browser-default) li:before {
  content: "+";
}

You can customize the date picker with some JavaScript. For example, create a JS file in the file manager and include it via the page layout.

Example:

jQuery(document).ready(function ($) {
    $('input.datepicker').datepicker({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: '150', // Creates a dropdown of 15 years to control year,
        maxDate: new Date(new Date().getFullYear() + 30, new Date().getMonth(), new Date().getDate()),
        autoClose: true, // Close upon selecting a date,
        format: 'dd.mm.yyyy',
        container: 'div.datepicker',
        firstDay: 1,
        yearRange: [1900, new Date().getFullYear() + 30],
        i18n: {
            nextMonth: 'Nächster Monat',
            previousMonth: 'Vorheriger Monat',
            labelMonthSelect: 'Monat wählen',
            labelYearSelect: 'Jahr wählen',
            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
            weekdaysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
            weekdaysAbbrev: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
            today: 'Heute',
            clear: 'Löschen',
            done: 'OK',
            cancel: 'Abbrechen',
            format: 'dd.mm.yyyy'
        },
    });
});

You find all options in the Materialize documentation.

Only Saturday and Sunday selectable

With the function disableDayFn() you can control which days are selectable. With the following example, only Saturdays and Sundays are selectable.

disableDayFn(date) {
    if(date.getDay() === 0 || date.getDay() === 6)
        return false
    else
        return true
}

Complete JavaScript code:

jQuery(document).ready(function ($) {
	$('input.datepicker').datepicker({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: '150', // Creates a dropdown of 15 years to control year,
        maxDate: new Date(new Date().getFullYear() + 30, new Date().getMonth(), new Date().getDate()),
        autoClose: true, // Close upon selecting a date,
        format: 'dd.mm.yyyy',
        container: 'div.datepicker',
        firstDay: 1,
        yearRange: [1900, new Date().getFullYear() + 30],
        i18n: {
            nextMonth: 'Nächster Monat',
            previousMonth: 'Vorheriger Monat',
            labelMonthSelect: 'Monat wählen',
            labelYearSelect: 'Jahr wählen',
            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
            weekdaysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
            weekdaysAbbrev: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
            today: 'Heute',
            clear: 'Löschen',
            done: 'OK',
            cancel: 'Abbrechen',
            format: 'dd.mm.yyyy'
        },
        disableDayFn(date) {
            if(date.getDay() === 0 || date.getDay() === 6)
                return false
            else
                return true
        },
    });
});

Only weekdays selectable

To make only weekdays selectable, it is enough to set the option disableWeekends to true.

disableWeekends: true

With some CSS in custom.scss you can show the bar in the mobile view.

@media (max-width: 767px) {
  .sectionTop {
    display: block;
.inside {
   height: inherit;
   overflow: hidden;
}
}
}

To display a full-width content area (e.g. a full-width image), a few template adjustments are necessary.

Adjust fe_page_mate.html5

Edit the template fe_page_mate.html5 and remove the line <div class="container"> and the closing </div> inside <?php $this->block('container'); ?>.

<?php $this->block('container'); ?>
    <?php $this->parent(); ?>
<?php $this->endblock(); ?>

Adjust mod_article.html5

Edit the template mod_article.html5 and insert the following line after the opening <div>, at around line 24: <div class="container">. Before the last closing </div>, insert another </div>. In the line before that you can also add the class fullwidth to set some spacing at the top and bottom with your own CSS.

<div class="<?= $this->class ?> block fullwidth"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
    <div class="container">
    ...
    </div>
</div>

Create a customized mod_article template

Now duplicate the template mod_article and name it e.g. mod_article_without_container.html5. Then simply remove the two lines you just added.

Adjustments for multi-column layouts

If you use multi-column layouts (with a left/right column), the corresponding templates have to be adjusted as well.

In the templates fe_page_mate_left.html5, fe_page_mate_leftright.html5 and fe_page_mate_right.html5, insert the line <div class="container"> and the closing </div> inside <?php $this->block('container'); ?>.

<?php $this->block('container'); ?>
    <div class="container">
        <?php $this->parent(); ?>
    </div>
<?php $this->endblock(); ?>

Assigning templates in articles

If content should be displayed across the full width, edit the article settings (the wrench icon after the pencil) and assign the article template mod_article_without_container in the template settings.

You would also have to assign the template mod_article_without_container to all articles with the header image.

In addition, all articles under MATE Elements - 01 Header, 02 Modules and 03 Footer must be assigned the template mod_article_without_container.

Custom CSS

To get some more spacing at the top and bottom, edit custom.scss:

#main .mod_article.fullwidth {
	margin-top: 50px;
	margin-bottom: 50px;
}

Example

You can achieve this with the following adjustment in custom.scss.

.subnav .dropdown-content {
    display: block;
    visibility: visible;
    height: inherit;
    position: relative;
}

You can achieve this with the following adjustment in custom.scss.

#header .nav-wrapper ul li {
  text-transform: none;
}

Visitors who have already visited the website are usually served a cached file. If you want to prevent this, you can adjust the fe_page template.

Adjust the following template: fe_page_mate.html5.

To prevent the CSS file from being cached, you can append a timestamp to the file name, for example. In the line echo $combiner->getCombinedFile(); ?>">, insert the following before the quotation marks: ?date=<?= time() ?>

It should look like this:

<link rel="stylesheet" type="text/css" media="all" href="<?php
// add stylesheets
$combiner = new Combiner();
if (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN') {
$combiner->add('bundles/matetheme/sass/mate_win.scss');
} else {
$combiner->add('bundles/matetheme/sass/mate.scss');
}
echo $combiner->getCombinedFile(); ?>?date=<?= time() ?>">