Änderung Template ce_code: Überschrift h4 / h5

**Nightwing** · 25.08.2019, 21:53

Hallo miteinander,

ich habe diese Anleitung gelesen und eine Frage dazu: Wie bekomme ich in der Überschrift den h Tag weg, bzw geändert in einen von mir festgelegten?
Gibt es dazu eine DCA Möglichkeit, das h Auswahlmenü zu erweitern?

Hintergrund ist: ich habe mir aus dem moo_accordion einen moo_codewrapper gebastelt, der Code Elemente ausblendet, wenn diese länger sind (wäre auch was fürs Forum hier

)
Einmal ist das ce_code Template für die direkte Anzeige von kurzem Code, einmal zum ausblenden:

ce_codewrapper:

Code:

<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
  <div class="wrapper"> Code eingef&uuml;gt. Hier klicken zum Ein- / Ausblenden </div>
  <div class="code"> 
    <pre><code class="<?= $this->cssClass ?>"><?= $this->code ?></code></pre>
  </div>
<?php $this->endblock(); ?>

ce_code_nowrap:

Code:

<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
  <div class="code-no-wrap">
    <pre><code class="<?= $this->cssClass ?>"><?= $this->code ?></code></pre>
  </div>
<?php $this->endblock(); ?>

Meine Frage bezieht sich auf das Styling mittels CSS, denn da muss ich den h4 / h5 Tag missbrauchen, um das gewünschte Ergebnis zu erzielen:

Code:

/* Code Wrapper Dateiname */
h4 {
    width:40%;
    display:inline-block;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("../../layout/svg_icons/file-text.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-size:1em;
    font-weight:bold;
    background-size: contain;
}

/* Code No Wrapper Dateiname */
h5 {
    width:40%;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("../../layout/svg_icons/file-text.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-size:1em;
    font-weight:bold;
    background-size: contain;
}

/* Code Wrapper Inhalt */
.code {
    padding-right:2em;
    padding-left:2em;
}

/* Code No Wrapper Inhalt */
.code-no-wrap {
    padding-right:2em;
    padding-left:2em;
}

/* Code Wrapper Toggler */
.wrapper {
    display:inline-block;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("../../layout/svg_icons/maximize-2.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-weight:bold;
    background-size: contain;
    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;
}

/* Code Wrapper Toggler Hover */
.wrapper: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;
}

/* Code Wrapper Toggler Aktiv */
.wrapper.active {
    background-image:url("../../layout/svg_icons/minimize-2.svg");
    background-position:left center;
    background-repeat:no-repeat;
    background-size: contain;
}

Ich bin mal gespannt, wie Eure Ideen zur Lösung sind (ohne eine eigene Erweiterung basteln zu müssen)

ToM

PS: Wäre sowas eigentlich als Feature in Contao gut? Normalerweise sind die Codeblöcke ja nicht die kürzesten, siehe mein Beitrag hier...

**tab** · 25.08.2019, 23:06

So ganz habe ich deine Frage nicht verstanden.

Wenn es tatsächlich nur darum geht, die Templates so zu ändern, dass statt h4 und h5 hier irgendein anderes Tag ausgegeben wird, dann kannst du das auf einfache Weise analog zur Lösung hier erreichen. Betrifft dort zwar ein anderes Template und es sollen auch nicht die Überschriften geändert werden, aber es ist ja eigentlich das selbe "Problem". Was geändert werden soll steht nicht im entsprechenden Template sondern im block_searchable.

**Nightwing** · 26.08.2019, 05:09

Zitat von tab

Was geändert werden soll steht nicht im entsprechenden Template sondern im block_searchable.

Genau das war das mir Fehlende, ich danke Dir!
Lösung folgt...

ToM

**Nightwing** · 26.08.2019, 11:13

Okay, dank tab schaut das jetzt so aus, und funktioniert.

ce_code_nowrap.html5:

Code:

<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
  <?php $this->block('headline'); ?>
    <?php if ($this->headline): ?>
      <div class="nowrap"><p><?= $this->headline ?></p></div>
    <?php endif; ?>
    <div class="code-no-wrap">
      <pre><code class="<?= $this->cssClass ?>"><?= $this->code ?></code></pre>
    </div>
  <?php $this->endblock(); ?>
</div>

ce_codewrapper.html5:

Code:

<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
  <?php $this->block('headline'); ?>
    <?php if ($this->headline): ?>
      <div class="wrap"><p><?= $this->headline ?></p></div>
      <div class="wrapper"> Code eingef&uuml;gt. Hier klicken zum Ein- / Ausblenden </div>
    <?php endif; ?>
    <div class="code">
      <pre><code class="<?= $this->cssClass ?>"><?= $this->code ?></code></pre>
    </div>
  <?php $this->endblock(); ?>
</div>

layout.css:

Code:

/* Code Wrapper Dateiname */
.wrap {
    width:40%;
    display:inline-block;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("../../layout/svg_icons/file-text.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-weight:bold;
    background-size: 18px;
}

/* Code No Wrapper Dateiname */
.nowrap {
    width:40%;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("../../layout/svg_icons/file-text.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-weight:bold;
    background-size: 18px;
}

/* Code Wrapper Inhalt */
.code {
    padding-right:2em;
    padding-left:2em;
}

/* Code No Wrapper Inhalt */
.code-no-wrap {
    padding-right:2em;
    padding-left:2em;
}

/* Code Wrapper Toggler */
.wrapper {
    display:inline-block;
    padding-left:2em;
    vertical-align:middle;
    background-image:url("../../layout/svg_icons/maximize-2.svg");
    background-position:left center;
    background-repeat:no-repeat;
    font-weight:bold;
    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;
}

/* Code Wrapper Toggler Hover */
.wrapper: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;
}

/* Code Wrapper Toggler Aktiv */
.wrapper.active {
    background-image:url("../../layout/svg_icons/minimize-2.svg");
    background-position:left center;
    background-repeat:no-repeat;
    background-size: 18px;
}

Ich hoffe @tab, es ist so korrekt?

Anhand dem Beispiel mit dem fe_page Template (= mit insert etwas dazufügen) in der Dokumentation, stellt sich mir eine (Verständnis)frage:
Ist es so quasi updatesicher(er) möglich, z.B. den title Tag zu modifizieren?

Code:

<title><?= $this->replaceInsertTags('{{page::alias}}') == 'index' ? $this->mainTitle : $this->mainTitle.' | '.$this->pageTitle ; ?></title>

ToM

**tab** · 26.08.2019, 11:58

Korrekt ist es, funktioniert ja wohl auch. Ich würde die Zeilen mit dem
<?php $this->block('headline'); ?> und
<?php $this->endblock(); ?>
noch rauslöschen, viel Sinn macht das da jetzt wohl eh nicht mehr.

**Nightwing** · 26.08.2019, 12:51

Perfekt, ich danke Dir!
Kannst Du mir auch mit SQL Voodoo helfen?
Das Template ce_codewrapper wird nicht mehr erkannt, ich musste es in ce_code_wrapper umbenennen.
Bevor ich jetzt alle Einträge manuell durchgehe, gibts doch bestimmt eine DB Funktion dafür?
A la: Suche in tl_content nach x und ersetze mit y...
Gelöst: ein UPDATE tl_content SET customTpl = REPLACE(customTpl, "ce_codewrapper", "ce_code_wrapper") sollte es tun...

ToM