Nightwing

CMS Contao 4.11.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 aktuelleren ab Version 4.9.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! Manch Eintrag ist von Version 4.7.x / 4.8.x und mit dem Update auf 4.9.x weggefallen, allerdings lass ich es (noch) drin, da es noch jung ist...

Nächster Eintrag »

Akkordeoneffekt bei Newsliste / Eventliste

Die Newsliste / Eventliste sieht mit einem Akkordeoneffekt einfach schöner aus, daher hab ich die beiden Templates modifiziert. Desweiteren kann man sich die Ausgabe von Datum und Zeit frisieren, mehr dazu in diesem Artikel.

event_teaser_akkordeon.html5

Code eingefügt. 
<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): ?><?= $this->day ?>, <?php endif; ?><?= $this->date ?><?php if ($this->time): ?> <?= $this->time ?><?php endif; ?>)"<?= $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): ?>
		  <?php if ($this->teaser): ?>
		    <?php echo \StringUtil::substr($this->teaser,80); ?>
		  <?php else: ?>
		    <?php echo \StringUtil::substr($this->details,80); ?>
		  <?php endif; ?>		
        <?php endif; ?>
        <?php if ($this->addImage): ?>
          <?php $this->insert('image', $this->arrData); ?>
        <?php endif; ?>
        <?php if ($this->addBefore): ?>
		  <?php if ($this->teaser): ?>
		    <?php echo \StringUtil::substr($this->teaser,80); ?>
		  <?php else: ?>
		    <?php echo \StringUtil::substr($this->details,80); ?>
		  <?php endif; ?>		
	    <?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. 
<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">
		<?php if ($this->teaser): ?>
		  <?php echo \StringUtil::substr($this->teaser,80); ?>
		<?php else: ?>
		  <?php echo \StringUtil::substr($this->text,80); ?>
		<?php endif; ?>		
	  </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. 
<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. 
/* 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. 
<?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) {
        el.setProperty('aria-hidden', 'false');
        tog.addClass('active');
		tog.setProperty('aria-expanded', 'true');
		tog.getNext('div').fade(1);
        return false;
      },
      onBackground: function(tog, el) {
        el.setProperty('aria-hidden', 'true');
        tog.removeClass('active');
		tog.setProperty('aria-expanded', 'false');
		tog.getNext('div').fade(0.35);
        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>

Achtung:

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

Zurück