[GELÖST] Individuelle Templates für Inhaltselemente (z.B. ce_text)

[Dexter Paris]

Seit Contao 3.3.x gibt es ja modifizierbare Templates für Inhaltselemente …

Jetzt dachte ich mir, fein, dann kann ich ja bequem im ce_text die Headline unter das Bild bringen.

Bloß kann ich mit dem Template nichts anfangen, ich hab keinerlei Idee wie diese da überhaupt reinkommt!?

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <?php if (!$this->addBefore): ?>
    <?php echo $this->text; ?>
  <?php endif; ?>

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

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

      <img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>"<?php if ($this->title): ?> title="<?php echo $this->title; ?>"<?php endif; ?>>

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

      <?php if ($this->caption): ?>
        <figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
      <?php endif; ?>

    </figure>
  <?php endif; ?>

  <?php if ($this->addBefore): ?>
    <?php echo $this->text; ?>
  <?php endif; ?>

<?php $this->endblock(); ?>

Kann mich bitte jemand darüber aufklären, was

• $this->extend('block_searchable')
• $this->block('content')
• $this->endblock()

bewirkt?

Und warum findet sich der Block

<?php if (!$this->addBefore): ?>
    <?php echo $this->text; ?>
<?php endif; ?>

einmal vor und einmal nach dem Bild? Und was bewirkt dieser Code?

Und die finale Frage: Wie bringe ich die Headline unter das Bild?

Leider konnte ich weder in der Contao-Dokumentation noch hier im Forum etwas dazu finden …

[magicsepp]

die block Struckturen sind für die Template Vererbung zuständig und erlauben das Überschreiben von HTML Markup (Details finden sich in der Keynote 2014 - Konferenz)

addBefore spiegelt die Einstellung der Image Position zum Text wieder.
Also Bild vor dem Text oder nach dem Text.

[Dexter Paris]

Das Keynote-Paper kenne ich bereits und habe es zur Sicherheit nochmal durchgelesen. Die Vererbung und dessen Möglichkeiten sind soweit auch halbwegs verständlich.

Leider erschließt sich mir immer noch nicht, wie ich z.B. im ce_text Template die Headline unter das Bild bringe …

Beispiel:

Aus dieser Struktur

<div class="ce_text block">
    <h1>Headline</h1>
    <figure>…</figure>
    <p>Text</p>
</div>

soll diese Struktur werden

<div class="ce_text block">
    <figure>…</figure>
    <h1>Headline</h1>
    <p>Text</p>
</div>

Wie stelle ich das an? Wie muss das Template geändert werden?

Vielen Dank im voraus!

PS: Eigentlich ging ich ja davon aus, im Template so Dinge wie IF THIS->HEADLINE etc vorzufinden. Scheint aber nicht so zu sein …

[magicsepp]

der Part mit ($this->headline) ist jetzt im block_searchable.html5 template

[Dexter Paris]

Vielen Dank für Deine Hilfe @magicsepp, aber ich blicke immer noch nicht durch …

Hier mal der Original-Code aus dem Template block_searchable.html5:

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

  <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
  <?php endif; ?>

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

</div>

Soweit so gut, hier wird das umschließende div erzeugt und die Headline haben wir auch hier drin. Aber:

Problem 1: Ein Versuch, die einzig sinnvoll erscheinende Zeile <?php $this->block('content'); ?> vor die Headline zu setzen, führt dazu, dass die Headline gar nicht mehr ausgegeben wird …

Problem 2: Das Template block_searchable.html5 wird auch in anderen ce_ Templates verwendet, also eigentlich dürfte ich das ja gar nicht umbauen , weil es mir dann andere CEs auch umbiegt …

Sorry für meine 1000 Fragen …

Mich wundert eigentlich nur, dass diese Neuerung, die ja eigentlich einen sinnvollen Mehrwert mit sich bringt, nirgendwo dokumentiert ist! Oder bin ich hier der einzige der das nicht behirnt?

[magicsepp]

So geht's:

erstell eine Kopie von block_searchable als block_searchable_hl_down
Inhalt: (Content und headline vertauscht)

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

  <?php $this->block('content'); ?>
  <?php $this->endblock(); ?>
  
  <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
  <?php endif; ?>

</div>

damit dieses Template aufgerufen wird erzeuge ein weiteres Template ce_text_hl
hier wird nur die erste zeile entsprechend angepasst:

<?php $this->extend('block_searchable_hl_down'); ?>

im textelemet unter Individuelles Template

ce_text_hl

auswählen.

[Dexter Paris]

Vielen Dank, die Vorgehensweise habe ich jetzt verstanden!

Aber, wie ich irgendwie schon vermutet habe, befindet sich die Headline jetzt ganz unten, also unter dem Textblock … :-/

<div class="ce_text block">
    <figure>…</figure>
    <p>Text</p>
    <h1>Headline</h1>
</div>

Erreichen möchte ich aber folgende Struktur:

<div class="ce_text block">
    <figure>…</figure>
    <h1>Headline</h1>
    <p>Text</p>
</div>

So wie ich das nun sehe, wird das aber wohl nicht funktionieren, weil der eigentliche Text und das Bild offenbar in der Variable/Objekt/Array(?) gekapselt sind und ich daher die die Headline die wiederum separat »reingerechnet« wird dadurch nicht dazwischenbekomme …

Von einem CE-spezifischen Template würde ich eigentlich erwarten, dass ich die enthaltenen Elemente frei anordnen kann. Symbolisch gesprochen würde ich gerne folgendermaßen zum Ziel kommen:

DIV + Klassen + ID etc.

WENN image DANN image

WENN headline DANN headline

Inhalt der Textbox

/DIV

Kann ja nicht so schwer sein … :-p

[magicsepp]

doch auch das geht:
block_searchable_hl_down:

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

  <?php $this->block('content'); ?>
  <?php $this->endblock(); ?>
  
</div

und
ce_text_hl

<?php $this->extend('block_searchable_hl_down'); ?>

<?php $this->block('content'); ?>

  <?php if (!$this->addBefore): ?>
     <?php if ($this->headline): ?>
       <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
     <?php endif; ?>
    <?php echo $this->text; ?>
  <?php endif; ?>

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

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

      <img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>"<?php if ($this->title): ?> title="<?php echo $this->title; ?>"<?php endif; ?>>

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

      <?php if ($this->caption): ?>
        <figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
      <?php endif; ?>

    </figure>
  <?php endif; ?>

  <?php if ($this->addBefore): ?>
    <?php if ($this->headline): ?>
      <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
    <?php endif; ?>
    <?php echo $this->text; ?>
  <?php endif; ?>

<?php $this->endblock(); ?>

[Dexter Paris]

YES! Funktioniert! Problem gelöst!

Warum hast Du das denn nicht gleich verraten … ^^

Vielen Dank!

[magicsepp]

ich musste das auch erst "behirnen"

[Kahmoon]

Ich habs noch immer nicht ganz gerafft.....aber ich schau mir das später an wenn ich das mal brauche :-)

*bookmark*


Mag das mal jemand ins Wiki schreiben?

[magicsepp]

Mag das mal jemand ins Wiki schreiben?

Template Vererbung und Blöcke

$this->extend() // legt fest, welches Template beerbt wird

$this->block('name') // markiert dem Anfang des Blocks

$this->parent() //fügt die Ausgabe des Orginalblocks ein

$this->endblock() // markiert das Ende des Blocks

[marcos]

Mag das mal jemand ins Wiki schreiben?

Hier gibt's schon eine kurze Erklärung dazu:
Das neue Template-System von Contao 3.3

Gruss
Marco

[ph!L]

Die oben von Sepp beschriebene Methodik ist super, hat aber leider einen Haken:

Das nachfolgende CE hat keine umgebenden <div> mehr, sondern nur noch den reinen Inhalt... Warum ist das nur?

[claus]

ich habe noch einen anderen Ansatz als magicsepp gefunden (siehe ticket#7580):
da für das Textelement eh ein eigenes Template (ce_text_hl) im Backend gewählt wird kann man auch dort alle nötigen Strukturen aus block_searchable einfügen.... sprich block_searchable bleibt unverändert und ce_text_hl sieht z.B. so aus (ohne die Block-Vererbung):

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

<?php if ($this->headline): ?> 
       <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>> 
     <?php endif; ?> 

  <?php if (!$this->addBefore): ?>   
    <?php echo $this->text; ?> 
  <?php endif; ?> 

  <?php if ($this->addImage): ?> 
   .......
  <?php endif; ?> 

  <?php if ($this->addBefore): ?> 
    <?php echo $this->text; ?> 
  <?php endif; ?> 

</div>