Templates & Anpassungen

Wir haben versucht, so wenig Templates wie möglich anzupassen, um dir den Einstieg in das Theme zu erleichtern. Aber auch, und im Falle eines Contao Updates weniger Schwachstellen zu bieten. Nachfolgend die Templates, die wir angepasst haben inklusive einer kurzen Erklärung.

Templates im Überblick:

• mod_article
• news_latest--grid
• news_latest--hero
• news_full--hero
• event_teaser
• event_upcoming
• ce_slider_stop

mod_article

Einzelne, farbig oder mit Hintergrundbild hinterlegte Abschnitte werden im SOLO-Theme über Artikel gelöst (siehe auch Layout/Artikel). Doch um den Inhalt innerhalb eines Artikels möglichst einfach in der Breite begrenzen zu können, haben wir dem Artikel noch einen zusätzlichen .inside-Container gegeben.

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

news_latest--grid

Zusätzlich zum Template news_latest haben wir ein Template news_latest--grid angelegt, das für die mehrspaltige Darstellung der News gedacht ist. Es basiert auf dem Template news_latest mit folgenden Änderungen:

• Meta-Infos wie Datum, Autor, Kommentare werden unterhalb der Headline angezeigt
• Es gibt keinen Teasertext
• Das Vorschaubild wird mit der Detailseite verlinkt

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">

  <?php if ($this->addImage): ?>
    <figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>

      <?php if ($this->hasText): ?>
        <a href="<?= $this->link ?>"<?= $this->attributes ?> title="<?= $this->alt ?>">
      <?php endif; ?>

      <?php $this->insert('picture_default', $this->picture); ?>

      <?php if ($this->hasText): ?>
        </a>
      <?php endif; ?>

      <?php if ($this->caption): ?>
      <figcaption class="caption"><?= $this->caption ?></figcaption>
      <?php endif; ?>

    </figure>
  <?php endif; ?>


  <h2><?= $this->linkHeadline ?></h2>
 
  <?php if ($this->hasMetaFields): ?>
    <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
  <?php endif; ?>
</div>

Original:

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">

  <?php if ($this->hasMetaFields): ?>
    <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
  <?php endif; ?>

  <?php if ($this->addImage): ?>
    <figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>

    <?php if ($this->href): ?>
      <a href="<?= $this->href ?>"<?= $this->attributes ?> title="<?= $this->alt ?>">
    <?php endif; ?>

    <?php $this->insert('picture_default', $this->picture); ?>

    <?php if ($this->href): ?>
      </a>
    <?php endif; ?>

    <?php if ($this->caption): ?>
      <figcaption class="caption"><?= $this->caption ?></figcaption>
    <?php endif; ?>

    </figure>
  <?php endif; ?>

  <h2><?= $this->linkHeadline ?></h2>

  <div class="teaser">
    <?= $this->teaser ?>
  </div>

  <?php if ($this->hasText || $this->hasTeaser): ?>
    <p class="more"><?= $this->more ?></p>
  <?php endif; ?>

</div

news_latest--hero

Zusätzlich zum Template news_latest haben wir ein Template news_latest--hero angelegt, das zur Hervorhebung der neuesten Nachricht gedacht ist. Es basiert auf dem Template news_latest mit folgenden Änderungen:

• .image_container wird von einem zusätzlichen Container .hero__image umschlossen
• Meta-Infos wie Datum, Autor und Kommentare werden unterhalb der Headline angezeigt
• Überschrift, Meta-Infos, Teaser und Weiterlesen werden von einem zusätzlichen Container .hero__text umschlossen

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">

  <?php if ($this->addImage): ?>
    <div class="hero__image">
      <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>

      <?php if ($this->href): ?>
        <a href="<?= $this->href ?>"<?= $this->attributes ?> title="<?= $this->alt ?>">
      <?php endif; ?>

      <?php $this->insert('picture_default', $this->picture); ?>

      <?php if ($this->href): ?>
        </a>
      <?php endif; ?>

      <?php if ($this->caption): ?>
        <figcaption class="caption"><?= $this->caption ?></figcaption>
      <?php endif; ?>

      </figure>
    </div>
  <?php endif; ?>

  <div class="hero__text<?= $this->floatClass ?>">
  <h1><?= $this->linkHeadline ?></h1>
 
  <?php if ($this->hasMetaFields): ?>
    <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
  <?php endif; ?>
 
  <div class="teaser">
    <?= $this->teaser ?>
  </div>
 
  <?php if ($this->hasText || $this->hasTeaser): ?>
    <p class="more"><?= $this->more ?></p>
  <?php endif; ?>
  </div>
</div>

news_full--hero

Zusätzlich zum Template news_full haben wir ein Template news_full--hero angelegt. Es basiert auf dem Template news_latest mit folgenden Änderungen:

• Das Vorschaubild wird für ein vollflächiges Hero .hero__image verwendet
• Überschrift und Meta-Infos werden von .hero__text umschlossen und auf dem Bild dargestellt
• Der Nachrichten-Text wird von einem Container .text_container umschlossen

<div class="layout_full block<?= $this->class ?>">
  <div class="hero">
  <?php if ($this->addImage): ?>
    <div class="hero__image">
      <figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
        …
      </figure>
    </div>
  <?php endif; ?>
    <div class="hero__text">
      <h1><?= $this->newsHeadline ?></h1>
 
      <?php if ($this->hasMetaFields): ?>
        <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
      <?php endif; ?>
    </div><!-- / hero__text -->
  </div><!-- / hero -->
 
  <div class="text_container">
    <?php if ($this->hasSubHeadline): ?>
      <h2><?= $this->subHeadline ?></h2>
    <?php endif; ?>
    …
  </div>

</div>

Original:

<div class="layout_full block<?= $this->class ?>">

  <h1><?= $this->newsHeadline ?></h1>

  <?php if ($this->hasMetaFields): ?>
    <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
  <?php endif; ?>

  <?php if ($this->hasSubHeadline): ?>
    <h2><?= $this->subHeadline ?></h2>
  <?php endif; ?>

  …

</div>

event_teaser

Um das Datum unabhängig von den Datumseinstellungen des Startpunkts nach dem Schema

Donnerstag,
09.
März

darstellen zu können und um sicherzustellen, dass die Umbrüche erhalten bleiben, haben wir das Datum manuell ausgegeben:

<?php if ($this->header): ?>
  <div class="header<?= $this->classHeader ?>">
    <?php if ($this->firstDay): ?><span class="day"><?= $this->firstDay ?>, </span><?php endif; ?>
    <span class="date"><?= $this->parseDate("d.", $this->startDate) ?></span>
    <span class="month"><?= $this->parseDate("F", $this->startDate) ?></span>
  </div>
<?php endif; ?>
…

Original:

<?php if ($this->header): ?>
  <div class="header<?= $this->classHeader ?>">
    <?php if ($this->firstDay): ?><span class="day"><?= $this->firstDay ?>, </span><?php endif; ?>
    <span class="date"><?= $this->firstDate ?></span>
  </div>
<?php endif; ?>

event_upcoming

Die tabellarische Darstellung der Events erweckt den Eindruck, dass auch das Datum klickbar wäre. Um diesen Eindruck zu bestätigen, haben wir das Datum ebenfalls verlinkt:

<div class="event layout_upcoming<?= $this->classUpcoming ?>">
 
  <a class="date" href="<?= $this->href ?>" title="<?= $this->title ?> (<?php if ($this->day) echo $this->day . ', '; ?><?= $this->date ?><?php if ($this->time) echo ', ' . $this->time;?>)"<?= $this->target ?>><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time></a>
  <a class="headline" href="<?= $this->href ?>" title="<?= $this->title ?> (<?php if ($this->day) echo $this->day . ', '; ?><?= $this->date ?><?php if ($this->time) echo ', ' . $this->time;?>)"<?= $this->target ?>><?= $this->link ?></a>

</div>

Original:

<div class="event layout_upcoming<?= $this->classUpcoming ?>">

  <time datetime="<?= $this->datetime ?>" class="date"><?= $this->date ?><?php if ($this->time): ?>, <?= $this->time ?><?php endif; ?></time>
  <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 ?>><?= $this->link ?></a>

</div>

ce_slider_stop

Der Standard-Slider verwendet die Begriffe „vorwärts“ und „zurück“ um zwischen den Slides zu wechseln. Wir haben die Begriffe über die Klasse .invisible ausgeblendet und verwenden stattdessen über CSS eingefügte Pfeile:

</div>
</div>

  <nav class="slider-control">
    <a href="#" class="slider-prev"><span class="invisible"><?= $this->previous ?></span></a>
    <span class="slider-menu"></span>
    <a href="#" class="slider-next"><span class="invisible"><?= $this->next ?></span></a>
  </nav>

</div>

Original:

</div>
</div>

  <nav class="slider-control">
    <a href="#" class="slider-prev"><?= $this->previous ?></a>
    <span class="slider-menu"></span>
    <a href="#" class="slider-next"><?= $this->next ?></a>
  </nav>

</div