Template ce_text mit zusätzichen DIVs anpassen

[derRenner]

Hallo,

mein Ziel:
ce_text soll so aufgebaut sein:
eingetragener Text inkl. der eingegebenen Überschrift soll als <div> links stehen und das eingefügte Bild soll als <div> rechts stehen ... angeordnet via float:left
und unabhängig davon, wie ich die Bildausrichtung wähle.

das Bildchen soll es ein wenig veranschlaulichen - wobei <figure> eben rechts vom Block mit dem <h2><p>etc stehen soll.
Anhang 17657

Nun hätte ich das template ce_text.html5 her genommen und einfach mal <div>s eingefügt.
die DIV-Blöcke um Text und Image hätten geklappt, aber leider ist die Übrschrift nicht mehr mit drinnen. Jetzt vermute ich, dass ich 'block_searchable' mit in meine Überlegungen einbeziehen muss - doch leider fehlt mir hier der Plan wie.

Eine weitere Überlegung wäre eine Bildausrichtung "umzuschreiben" - also z.B. float_below - aber auch da weiss ich nicht, welches template ich angreifen könnte.

Oder aber habe ich mich in meiner Überlegung komplett verrannt und ich könnte mein Vorhaben auch anders lösen?

[tab]

Da du die Überschrift wohl in einem div gemeinsam mit dem Text haben willst, darfst du eben nicht das block_searchable erweitern, sondern musst alles ins ce_text Template integrieren. Bin da jetzt zwar auch nicht so der Experte, denke aber, das ce_text.html5 könnte z.B. so aussehen... (angesichts der Uhrzeit völlig ungetestet)

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

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

    <?= $this->text ?>
  </div>

  <?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 ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
      <?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; ?>

</div>

Mit den Klassen und dem Bild habe ich da jetzt noch nichts gemacht, nur das block_searchable integriert, die Reihenfolge von Text und Bild festgelegt und um die Überschrift und den Text dann ein div drumherum. Als Ausgangspunkt für deine weiteren Änderungen sollte es funktionieren, den Rest wirst du dann schon hinbekommen.

[Samuell]

Die Headline kommt aus "block searchable".
https://github.com/contao/core/blob/...archable.html5

Soweit ich mich erinnere könntest Du den Partauch wegwerfen und die Headline direkt einbinden

Die 4 Bildzustände werden alle in ce_text geregelt. Du brauchst da kein anderes Template.

edit: Da war der Tab wohl etwas schneller :-)

[mlweb]

Bei mir funktioniert der Link zum Anhang leider nicht.
Ich kann also nur hoffen, dass ich Deine Beschreibung richtig verstehe.

Wenn Du immer nur eine Ausrichtung haben willst, hast Du ja mehrere Möglichkeiten.

• alle float-Klassen von contao gleich gestalten
• im Template eigene Klasse vergeben und entsprechend stylen (entweder egänzend zum Rest oder als Ersatz)

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

oder

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

@Samuell
Headline direkt im tiny einbinden ist auch eine Möglichkeit, aber für manche Arten der Gestaltung fehlt Dir dann unter Umständen das zusätzliche div, z. B. für Gestaltungen mit display: flex.
Außerdem kommen Redakteure mit soetwas meist schlechter zurecht.


@tab
Wenn mit float bei figure gearbeitet werden soll, muß die Reihenfolge noch umgekehrt werden.

Nachtrag:
@Samuell
Mit "direkt" hattest Du gar nicht den Tiny gemeint. Hatte ich beim ersten Lesen mißverstanden. Ist wohl doch Zeit fürs Bett.

[tab]

@tab
Wenn mit float bei figure gearbeitet werden soll, muß die Reihenfolge noch umgekehrt werden.

Bin halt davon ausgegangen, dass sowohl das div mit Überschrift + sonstigem Inhalt als auch das Bild mit float:left; nebeneinander positioniert werden sollen. Den Anhang kann ich auch nicht öffnen. Aber ich verstand es so, dass das Bild komplett rechts neben dem anderen Block erscheinen, also nicht vom Text umflossen werden soll. Dazu müsste es im Qúelltext nach dem anderen div stehen und es müssten natürlich z.B. per CSS die Breiten so angegeben werden, dass auch beide nebeneinander passen. Die floatClass bei figure bräuchte man dann auch nicht ausgeben, weil man sowieso eine eigens dafür definierte Klasse ausgibt (meine_klasse bei deinem Beispiel) und immer dieselbe Ausrichtung haben will. Dem div um Überschrift und Text gibt man dann auch eine Klasse mit aus, um damit z.B. die Breite des div einzustellen.

[mlweb]

@tab
Prinzipiell geht das "nicht umfließen" auch, wenn ich nur figure floate und für das div einen entsprechend margin festlege.
Ist meine bevorzugte Variante für Pseudospalten gewesen bevor es display flex gab.
Wie häufig im css - viele Wege führen nach Rom. Welche in welchem Einsatzfall die bessere ist, hängt nicht selten vom "umliegenden Layout" ab.

Was die Original-Klassen in geänderten Templates betrifft, behalte ich diese eigentlich ganz gern. Wenn man irgendwann mit dem gleichen Template z.B. die unterschiedlichen Einstellungen doch nutzen will, wundert man sich unter Umständen, das diese fehlen. Ist aber nur so eine Angewohnheit von mir. Bin ich glaub ich nicht mal immer konsequent.

@derRenner
Wenn die Bilder in allen Textelement so gesetzt werden sollen wie beschrieben, gibt es noch eine Variante. Über dca wird z.B. float_left vorbelegt und z.B. über die Erweiterung [ce_access] blendest Du diese Feldgruppe für Redakteure aus.

[Andreas]

@mlweb: ich glaube das mit der Klasse float_left oder dem CSS für das Element ist nicht sein Problem. Wenn ich das richtig verstanden habe, dann möchte er Inhalt um ein Bild herumfließen lassen. In diesem Fall die Überschrift und die Absätze um das FIGURE herum. Das geht nicht mit diesem Markup (core default):

<div class="ce_text">
  <h1>H1</h1>
  <figure class="float_left"></figure>
  <p>Absatz</p>
</div>

Das Markup müsste so aussehen

<div class="ce_text">
  <figure class="float_left"></figure>
  <h1>H1</h1>
  <p>Absatz</p>
</div>

Aber das müsste er über eine Templateanpassung leicht hinbekommen. Im Notfall kann er diese H1 noch mit JS greifen und unter das FIGURE legen. Die H1 oben in den RTE zu legen wäre das einfachste, ist aber in seinem Fall wohl keine Option.

[mlweb]

@Andreas
Das ist schon klar. Den Code für das Template dazu hatte @tab ja schon ganz zu Anfang gepostet.
Sein zweites Problemchen war, dass egal welche Bildausrichtung im BE eingestellt ist, die Bilder immer rechts (oder war es links?) stehen sollten.
Das kann man eben auf unterschiedliche Weise lösen. Auch abhängig davon ob man Spaltenoptik oder ein umfließen haben möchte.

[Andreas]

...egal welche Bildausrichtung im BE eingestellt ist, die Bilder immer rechts stehen sollten...

Ja, da müsste er nochmal die Logik im Template ändern, oder das Feld default vorbelegen und/oder dieses Feld für Redakteure ausblenden.

[mlweb]

... oder eben wie oben schon mal beschrieben im Template eine eigene Klasse verwenden.

[derRenner]

so - sorry Leute, dass ich erst jetzt antworte ... ich hasse 20-Stunden-Tage

also, wenn ich die posts jetzt mal richtig überflogen habe, dann hat mich @tab richtig verstanden - hier nochmals das Bildchen
2016-04-27 22_38_45-FVV - FVV Horn.jpg
Wobei das ja nur der Auszug des Entwicklertools ist.

Ich möchte die Überschrift verwenden, ich möchte den TinyMCE für den Text verwenden und ich möchte ein Bild mit einfügen können. Die Bildausrichtung die im CE Text vorhanden ist kann ignoriert werden.

Hierauf möchte ich hin:

<div class="ce_text">
  <div class="content_wrapper">
    <div class="h1-p_wrapper">
      <h1>H1</h1>
      <p>Absatz</p>
    </div>
    <figure class="image_wrapper"></figure>
   </div>
</div>

links sollte dann 'h-p_wrapper' und rechts 'image_wrapper' stehen.

Ich werde mir jetzt mal den Vorschlag von @tab genauer ansehen. Mal schauen, ob ich mit dem weiterkomme

[derRenner]

@tab trotz Uhrzeit der korrekte Ausgangspunkt DANKE dafür!

hier das template, welches nun auch funktioniert

<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
  <div class="content_wrapper grid16">
      <div class="h-p_wrapper grid8">
        <?php if ($this->headline): ?>
          <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
        <?php endif; ?>
        <?= $this->text ?>
    </div>
  <div class="img_wrapper grid8">
      <?php if ($this->addImage): ?>
    <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>

      <?php if ($this->href): ?>
        <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
      <?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; ?>
</div>
</div>
</div>

<?= $this->floatClass ?> habe ich entfernt ... damit ist die Bildausrichtung wohl auch ausgeschalten.