CMS Contao 4.7.x

Hier findest Du einige von mir geänderte Templates, die ich unter anderem auf dieser Seite verwende. Viele dieser Templates habe ich schon in Version 2.11.17 genutzt, allerdings poste ich nur noch die aktuellen für Version 4.7.x, die anderen sind einfach zu alt... Einige Ideen und Anregungen hab ich dem Contao Community Forum entnommen. Viel Hilfe habe ich auch vom Kellerkind erhalten, an dieser Stelle nochmals vielen Dank dafür!

Akkordeoneffekt bei Newsliste / Eventliste

Die Newsliste / Eventliste sieht mit einem Akkordeoneffekt einfach schöner aus, daher hab ich die beiden Templates modifiziert. Desweiteren hab ich mir die Templates teilweise auch noch anders formatiert und mit einer schöneren Datum und Zeit dargestellt, mehr dazu in diesem Artikel.

event_teaser_akkordeon.html5

Code eingefügt. Hier klicken zum Ein- / Ausblenden
<div class="toggler">
  <?php if ($this->header): ?>
    <div class="header<?= $this->classHeader ?>">
	  <h2 itemprop="name"><?= $this->title ?></h2>
    <!--  <?php if ($this->firstDay): ?><span class="day"><?= $this->firstDay ?>, </span><?php endif; ?><span class="date"><?= $this->firstDate ?></span>  -->
    </div>
  <?php endif; ?>
</div>
<div class="event layout_teaser<?= $this->classList ?>" itemscope itemtype="http://schema.org/Event">
  <div class="accordion">
    <!--	<?php if ($this->hasDetails): ?>
      <h2 itemprop="name"><a href="<?= $this->href ?>" title="<?= $this->title ?> (<?php if ($this->day) echo $this->day . ', '; ?><?= $this->date ?><?php if ($this->time) echo ' ' . $this->time; ?>)"<?= $this->target ?> itemprop="url"><?= $this->link ?></a></h2>
    <?php else: ?>
      <h2 itemprop="name"><?= $this->title ?></h2>
    <?php endif; ?>    -->
    <p class="info"><time datetime="<?= $this->datetime ?>" itemprop="startDate"><?= $this->date ?><?php if ($this->time) echo ' ' . $this->time; ?></time></p>
      <?php if ($this->location): ?>
        <p class="location" itemprop="location" itemscope itemtype="http://schema.org/Place">
          <span itemprop="name"><?= $this->location ?></span>
          <?php if ($this->address): ?>
            (<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><?= $this->address ?></span>)
          <?php endif; ?>
        </p>
      <?php endif; ?>
      <div class="ce_details block" itemprop="description">
        <?php if (!$this->addBefore): ?>
	      <?
	      $details= $this->details;
	      if (strlen($details) >= 120){
	        echo strip_tags(substr($details, 0, strpos($details," ",80)))." &hellip;"; 
	        } else {
	        echo $details;
	      }
	      ?>    
        <?php endif; ?>
        <?php if ($this->addImage): ?>
          <?php $this->insert('image', $this->arrData); ?>
        <?php endif; ?>
        <?php if ($this->addBefore): ?>
	      <?
	      $details= $this->details;
	      if (strlen($details) >= 120){
	        echo strip_tags(substr($details, 0, strpos($details," ",80)))." &hellip;"; 
	        } else {
	        echo $details;
	      }
	      ?>    
	    <?php endif; ?>
      </div>
    <?php if ($this->hasDetails): ?>
      <p class="more"><a href="<?= $this->href ?>" title="<?= $this->readMore ?>"<?= $this->target ?> itemprop="url"><?= $this->more ?><span class="invisible"> <?= $this->link ?></span></a></p>
    <?php endif; ?>
  </div>
</div>

news_latest_akkordeon.html5

Code eingefügt. Hier klicken zum Ein- / Ausblenden
<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>" itemscope itemtype="http://schema.org/Article">
  <div class="toggler"><h2 itemprop="name">
    <?= $this->headline ?></h2>
  </div>
  <div class="ce_text block" itemprop="description">
    <div class="accordion">
	  <?php if ($this->hasMetaFields): ?>
        <p class="info"><time datetime="<?= $this->datetime ?>" itemprop="datePublished"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
	  <?php endif; ?>
	  <?php if ($this->addImage): ?> <?php $this->insert('image', $this->arrData); ?> <?php endif; ?>
	  <div class="ce_text block" itemprop="description">
		<? $text= $this->text;
		  if (strlen($text) >= 120){
			echo strip_tags(substr($text, 0, strpos($text," ",120)))." &hellip;"; 
		  } else {
			echo $text;
		  }
		?>
	  </div>
	  <?php if ($this->hasText || $this->hasTeaser): ?>
	    <p class="more"><?= $this->more ?></p>
	  <?php endif; ?>
    </div>
  </div>
</div>

Nicht vergessen, moo_accordion muss auch im Seitenlayout zu aktiviert werden. Standardmässig wird das erste Akkordeonelement geöffnet dargestellt. Wer das nicht möchte, fügt einfach eine Zeile hinzu (display: -1,)

moo_accordion.html5

Code eingefügt. Hier klicken zum Ein- / Ausblenden
<script>
  window.addEvent('domready', function() {
    new Fx.Accordion($$('.toggler'), $$('.accordion'), {
      opacity: false,
      display: -1,
      alwaysHide: true,
      onActive: function(tog, el) {
        tog.addClass('active');
        tog.setProperty('aria-expanded', 'true');
        el.setProperty('aria-hidden', 'false');
        return false;
      },
	...
</script>

Dazu noch ein paar Einträge im CSS vornehmen und sich passende Icons suchen. Ich habe die Feather Icons von Cole Bemis im Einsatz: Plus IconMinus Icon

CSS für Akkordeoneffekt:

Code eingefügt. Hier klicken zum Ein- / Ausblenden
/* Akkordeon Inhalt */
.accordion {
    padding-left:2em;
}

/* Akkordeon Toggler */
.toggler {
    padding-left:2em;
    vertical-align:middle;
    background-image:url("files/layout/svg_icons/plus-square.svg");
    background-position:left center;
    background-repeat:no-repeat;
    background-size: 18px;
    cursor: pointer;
    /* WebKit */ -webkit-transition: color 500ms ease-in-out;
    /* Firefox */ -moz-transition: color 500ms ease-in-out;
    /* Opera */ -o-transition: color 500ms ease-in-out;
    /* Standard */ transition: color 500ms ease-in-out;
}

/* Akkordeon Toggler Hover */
.toggler:hover {
    color:#f60;
    /* WebKit */ -webkit-transition: color 500ms ease-in-out;
    /* Firefox */ -moz-transition: color 500ms ease-in-out;
    /* Opera */ -o-transition: color 500ms ease-in-out;
    /* Standard */ transition: color 500ms ease-in-out;
}

/* Akkordeon Toggler Aktiv */
.toggler.active {
    background-image:url("files/layout/svg_icons/minus-square.svg");
    background-position:left center;
    background-repeat:no-repeat;
    background-size: 18px;
}

Man kann einzelne Akkordeonelemente auch per Link direkt ansprechen, dann ist das entsprechende Akkordeon gleich geöffnet. Dazu muss man zu Beginn des moo_accordion.html5 Templates noch etwas PHP einfügen und den Wert display -1; durch die zuvor gesetzte Variable ersetzen:

moo_accordion.html5

Code eingefügt. Hier klicken zum Ein- / Ausblenden
<?php
//$aid = '-1'; // default all closed
$aid = '0'; // default first open
if (is_numeric($this->Input->get('aid'))) {
  $aid=(int)$this->Input->get('aid');
}
?>
<script>
  window.addEvent('domready', function() {
    new Fx.Accordion($$('.toggler'), $$('.accordion'), {
      opacity: false,
      display: <?php echo $aid; ?>,
      alwaysHide: true,
      onActive: function(tog, el) {
        tog.addClass('active');
        tog.setProperty('aria-expanded', 'true');
        el.setProperty('aria-hidden', 'false');
        return false;
      },
      onBackground: function(tog, el) {
        tog.removeClass('active');
        tog.setProperty('aria-expanded', 'false');
        el.setProperty('aria-hidden', 'true');
        return false;
      }
    });
    $$('.toggler').each(function(el) {
      el.setProperty('role', 'tab');
      el.setProperty('tabindex', 0);
      el.addEvents({
        'keypress': function(event) {
          if (event.code == 13 || event.code == 32) {
            this.fireEvent('click');
          }
        },
        'focus': function() {
          this.addClass('hover');
        },
        'blur': function() {
          this.removeClass('hover');
        },
        'mouseenter': function() {
          this.addClass('hover');
        },
        'mouseleave': function() {
          this.removeClass('hover');
        }
      });
    });
    $$('.ce_accordion').each(function(el) {
      el.setProperty('role', 'tablist');
    });
    $$('.accordion').each(function(el) {
      el.setProperty('role', 'tabpanel');
    });
  });
</script>

Um jetzt ein Akkordeon direkt aufzurufen, muss man der Link URL nur folgenden Parameter dranpappen: ?aid=id

Man beginnt, das erste Element mit 0 zu zählen, also nicht wundern. Als Beispiel für das fünfte Akkordeonelement ergibt sich folgender Link: https://nightwing.eu/cms-contao/?aid=4

 

Achtung:

Bitte die Templates im Backend unter Templates auswählen und speichern und dann dort editieren! Ansonsten sind die Änderungen nicht updatesicher.

Zurück