Modification de tt_content afin d'ajouter un cadre autour des contenus

Cette page explique comment modifier en TypoScript l'interface backend afin de personnaliser la propriété "cadre" de chaque contenu afin de générer un code HTML permettant la création de différents cadres.

Il est possible avec Typo3 de modifier le rendu des pages et de leurs contenus directement depuis le backend (et ainsi depuis votre navigateur sans avoir à écrire une ligne de PHP).

Note: il est aussi possible d'atteindre les mêmes objectifs en concevant une extension, mais celle-ci présentera le désavantage d'être globale à toutes les pages (voir l'extention "asfk_shadowborder"). La méthode ci-dessous est plus flexible dans le sens où elle peut s'appliquer à l'ensemble du site comme à une partie de l'arborescence.

Le contenu HTML recherché

Afin de pouvoir créer un cadre avec des contours arrondis ou une ombre portée, nous chercherons à générer un code HTML qui sera structuré ainsi :

<div class="arrondi_bleu">
  <h2>Mon titre </h2>
  <p>mon contenu </p>
</div>

Plus exactement, ce même contenu avec Typo3 sera légèrement plus riche :

<div class="arrondi_bleu">
    <div class="csc-header csc-header-n2"><h2>Mon titre</h2></div>
    <p class="bodytext">mon contenu</p>
</div>

Cette structure HTML suffira à la réalisation d'un tel cadre à la condition de connaître la largeur de la colonne dans laquelle le cadre sera inséré.

Nous allons utiliser la propriété "cadre" présent lors de l'édition d'un contenu et prévu à cet effet. Dans la base de données, cette propriété correspond à la colonne "section_frame" de la table "tt_content".

Pour modifier le backend, sélectionner une page de votre site et éditer ses propriétés. Ces changements seront répercutés sur toutes les pages enfants. Dans le champ "TSconfig", insérer les lignes ci-dessous:

TCEFORM.tt_content.section_frame.removeItems=1,5,6,10,11,12,20,21
TCEFORM.tt_content.section_frame.addItems.120 = bleu
TCEFORM.tt_content.section_frame.addItems.121 = orange

Pour tester l'impacte de ces changements, créer un nouveau contenu de type "TEXT". Les valeurs "bleu" et "orange" devraient être seules dans la boîte de sélection de la propriété "Frame"

Modification du rendu Frontend

Maintenant, il s'agit de récupérer la valeur champ "cadre" et de la substituer à la valeur de l'attribut "class" de la balise "div".

Aprés s'être rendu dans le module "Gabarit" et avoir afficher le TypoScript de la page sélectionnée plus haut (sélectionner "Info/Modify" puis cliquer sur "setup", ou cliquer sur "Click here to create an extension template"), copier/coller le code ci-dessous :

tt_content.text.stdWrap {
  innerWrap.cObject = CASE
  innerWrap.cObject {
    key.field = section_frame
    120 = TEXT
    120.value = <div class="bleu">|</div>
    121 = TEXT
    121.value = <div class="orange">|</div>
  }
}
tt_content.list.stdWrap < tt_content.text.stdWrap