Teaser als Akkordeon aufklappen in Contao 5.3

Hi Leute,

wie lässt sich in Contao 5.3 die Teaser als Akkordeon aufklappen?

Anhang 28278

Dazu wurde in den vorherigen Contao-Versionen das Template "news_latest" geändert, und zwar so hier:

PHP-Code:

---

<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): ?>
   <?php $this->insert('image', $this->arrData); ?>
 <?php endif; ?>
 
 <h2><?= $this->linkHeadline ?></h2>
 
 <div class="ce_text block">
   <?= $this->teaser ?>
<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>
 
 <?php if ($this->hasText || $this->hasTeaser): ?>
   <p class="more"><?= $this->more ?></p>
 <?php endif; ?>
 
 <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,120); ?>
       <?php else: ?>
         <?php echo \StringUtil::substr($this->text,120); ?>
       <?php endif; ?>
     </div>
     <?php if ($this->hasText || $this->hasTeaser): ?>
       <p class="more"><?= $this->more ?></p>
     <?php endif; ?>
   </div>
 </div>
</div>
 
<?php
 
// This template is used as a news list template by default, so we only add
// JSON-LD data in case this is a news article without a reader
if (!$this->hasReader) {
   $this->addSchemaOrg($this->getSchemaOrgData());
}

---

Wie kann das Ganze jetzt in Contao 5.3 umgesetzt werden?
Was muß da an dem neuen "news_latest" in Contao 5.3 wie und wo geändert oder ergänzt werden, damit das klappt?
Ich steh da bissl uffn Schlauch mangels technischen Wissen :-/

Zitat:

---

Zitat von Schnippel

Hi Leute,

wie lässt sich in Contao 5.3 die Teaser als Akkordeon aufklappen?

Anhang 28278

Dazu wurde in den vorherigen Contao-Versionen das Template "news_latest" geändert, und zwar so hier:

PHP-Code:

---

<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): ?>
   <?php $this->insert('image', $this->arrData); ?>
 <?php endif; ?>
 
 <h2><?= $this->linkHeadline ?></h2>
 
 <div class="ce_text block">
   <?= $this->teaser ?>
<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>
 
 <?php if ($this->hasText || $this->hasTeaser): ?>
   <p class="more"><?= $this->more ?></p>
 <?php endif; ?>
 
 <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,120); ?>
       <?php else: ?>
         <?php echo \StringUtil::substr($this->text,120); ?>
       <?php endif; ?>
     </div>
     <?php if ($this->hasText || $this->hasTeaser): ?>
       <p class="more"><?= $this->more ?></p>
     <?php endif; ?>
   </div>
 </div>
</div>
 
<?php
 
// This template is used as a news list template by default, so we only add
// JSON-LD data in case this is a news article without a reader
if (!$this->hasReader) {
   $this->addSchemaOrg($this->getSchemaOrgData());
}

---

Wie kann das Ganze jetzt in Contao 5.3 umgesetzt werden?
Was muß da an dem neuen "news_latest" in Contao 5.3 wie und wo geändert oder ergänzt werden, damit das klappt?
Ich steh da bissl uffn Schlauch mangels technischen Wissen :-/

---

Im Beispiel von Handorgel.JS gibt es ein Markup, wie es auszusehen hat + die Skriptinitialisierungen:
https://oncode.github.io/handorgel/

Übrigens nur so am Rand - das news-latest des Cores ist nicht wirklich neu. Ist immer noch ein HTML5-Template und hat m.E. keine großartigen Veränderungen gegenüber der 4.13 erhalten.
Neu ist das in Contao verwendete Akkordeon.

Hmm,

aber ich muß schon das Template in 5.3 "news_latest" mir zur Hand nehmen, was so hier ausschaut:

PHP-Code:

---

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

  <?php $this->block('info'); ?>
    <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?></p>
  <?php $this->endblock(); ?>

  <?php if ($this->addImage): ?>
    <?php $this->insert('image', $this->arrData); ?>
  <?php endif; ?>

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

  <div class="ce_text block">
    <?= $this->cspInlineStyles($this->teaser) ?>
  </div>

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

</div>

<?php

// This template is used as a news list template by default, so we only add
// JSON-LD data in case this is a news article without a reader
if (!$this->hasReader) {
    $this->addSchemaOrg($this->getSchemaOrgData());
}

---

Was muß da jetzt wo genau hinzugefügt werden?

Ich hatte damals diese Seite hier: https://nightwing.eu/cms-contao/akko...ste-eventliste

Anhang 28279

Geht sicherlich für Contao 5.3 nicht mehr, oder?

Das Template ist schon das richtige, aber das Akkordeon in Contao 5.3 ist ein anderes. Ein Beispiel für den Aufbau des Codes beim neuen Akkordeon hat Dir zoglo oben gepostet.

Ich habe dir mal die Templates visuell markiert, welche Gemeinsamkeiten die haben, das musst du nun zusammenbauen. Bin gerade nicht mehr an meinem Arbeitsgerät, ist Wochenende.. daher schnell mit MS Paint gemalt:
Anhang 28280