L’extension WEC Content Element permet de créer de nouveaux contenus TYPO3 (comme le contenu Texte/Image par exemple) configurés via un flexform (pour les champs backend) et du Typoscript ou un template Fluid pour le rendu Frontend.
Cet article va vous guider pas à pas dans la réalisation d’un nouveau type de contenu basé sur cette extension.
1/ Qu’est ce qui définit un nouveau contenu ?
L’extension WEC Content Element est livrée avec 4 nouveaux éléments de contenu (File Download, Slideshow, Vimeo, Youtube). Si on jette un oeil aux fichiers, on remarque que :
- Pour chaque nouveau contenu créé : un dossier est créé
Dans chaque dossier de contenu, on trouve :
- 1 fichier de rendu frontend (content.html pour Fluid et content.ts pour le TypoScript)
- 1 fichier de configuration backend : flexform.xml
- 2 fichiers de Langue (locallang.xml et locallang_csh.xml)
- 2 fichiers image (représentant le contenu)
Les fichiers les plus importants sont le fichier de rendu frontend et le fichier de configuration backend.
La première chose à faire est donc de créer un nouveau dossier pour un nouveau contenu. J’appele ce nouveau dossier “demo” car c’est le nom de nouveau contenu. Dans ce dossier, je créé les fichiers suivants : content.ts, flexform.xml, locallang.xml (+ mes 2 fichiers images)
Il faut ensuite déclarer le nouveau contenu dans les fichiers ext_tables.php et ext_localconf.php de l’extension wec_contentelements.
ext_tables.php
tx_weccontentelements_lib::addContentElement($_EXTKEY, 'demo');
ext_localconf.php
tx_weccontentelements_lib::addTyposcript($_EXTKEY, 'demo');
2/ Création du Flexform pour le formulaire backend
Voici un modèle de flexform nu (sans contenu) :
<T3DataStructure> <ROOT> <type>array</type> <el> <!-- Ici, la configuration Backend du contenu --> </el> </ROOT> </T3DataStructure>
Et voici le contenu “demo” que je souhaite créer :
Pour notre nouveau contenu, nous avons besoin de créer 4 champs paramétrables en backend :
- Titre (champ texte simple)
- Sous-titre (champ textarea)
- Image (champ image)
- Lien (champ lien)
Cela signifie qu’il va falloir rajouter la configuration de ces 4 champs dans le flexform. Où trouve t’on la configuration qui va bien pour chaque champ, vous allez me dire ? Et bien dans la doc TYPO3 : ICI
Champ titre
Je récupère l’exemple trouvé dans la doc et je l’adapte à mes besoins :
'username' => array( 'label' => 'LLL:EXT:cms/locallang_tca.php:fe_users.username', 'config' => array( 'type' => 'input', 'size' => '20', 'max' => '50', 'eval' => 'nospace,lower,uniqueInPid,required' ) ),
L’exemple de la documentation est écrit en PHP (TCA pour le développement d’extension) : il faut tout d’abord enlever ce dont je n’ai pas besoin dans ce code et ensuite le transformer en version XML pour l’intégrer à mon flexform.
Ajustements et simplification :
'titre' => array( 'label' => 'LLL:EXT:wec_contentelements/nom_de_mon_contenu/locallang.xml:flexform.demo.titre', 'config' => array( 'type' => 'input', 'size' => '20', ) ),
J’ai changé le nom du champ, supprimé quelques paramètres dont je n’avais pas besoin (eval,max). Il ne me reste plus qu’à transformer tout ça en XML, ce qui nous donne :
<titre> <TCEforms> <label>LLL:EXT:wec_contentelements/demo/locallang.xml:flexform.demo.titre</label> <config> <type>input</type> <size>20</size> </config> </TCEforms> </titre>
Vous remarquerez que je récupère les labels dans le fichier locallang.xml. Vous pouvez très bien écrire le label comme ceci :
Et voilà ! Maintenant je fais la même chose pour les autres champs. Ce qui donne :
Champ sous-titre :
<sous-titre> <TCEforms> <label>LLL:EXT:wec_contentelements/demo/locallang.xml:flexform.demo.sous-titre</label> <config> <type>text</type> <cols>24</cols> <rows>3</rows> </config> </TCEforms> </sous-titre>
Champ image :
<image> <TCEforms> <label>LLL:EXT:wec_contentelements/demo/locallang.xml:flexform.demo.image</label> <config> <type>group</type> <internal_type>file</internal_type> <allowed>gif,jpg,jpeg,png</allowed> <max_size>5000</max_size> <uploadfolder>uploads/tx_weccontentelements/demo/</uploadfolder> <maxitems>1</maxitems> <size>1</size> <selectedListStyle>width:200px</selectedListStyle> <show_thumbs>1</show_thumbs> </config> </TCEforms> </image>
Champ lien :
<lien> <TCEforms> <label>LLL:EXT:wec_contentelements/demo/locallang.xml:flexform.demo.lien</label> <config> <type>input</type> <size>15</size> <wizards type="array"> <_PADDING type="integer">2</_PADDING> <link type="array"> <type>popup</type> <title>Link</title> <icon>link_popup.gif</icon> <script>browse_links.php?mode=wizard</script> <params> <blindLinkOptions>page,file,mail,spec,folder</blindLinkOptions> </params> <JSopenParams>height=300,width=500,status=0,menubar=0,scrollbars=1</JSopenParams> </link> </wizards> </config> </TCEforms> </lien>
La configuration Flexform du contenu est terminée, voici ce que ça donne dans le backend :
3/ Construction du rendu Frontend de mon contenu
Le rendu est généré par un objet typoscript. Cet objet typoscript porte le nom du nouveau contenu. Comme j’ai appelé mon contenu “demo”, mon objet typoscript pour le rendu se nomme “tt_content.demo”.
Pour récupérer une donnée du flexform, on utilise data :
# Affichage des données de mon flexform 10 = TEXT 10.data = t3datastructure : pi_flexform->nom_de_mon_champ
Voici le rendu typoscript commenté du contenu “demo” :
tt_content.demo = COA tt_content.demo { # On récupère le titre général du contenu 10 = < lib.stdheader 20 = COA 20 { wrap = <div class="item">|</div> // Configuration de l’image 5 = IMAGE 5 { file { import.wrap = uploads/tx_weccontentelements/demo/| import.data = t3datastructure : pi_flexform->image width = 100c height = 100c } params = style="float:left;margin-right: 15px;" } 10 = TEXT 10.wrap = <h4 class="titre">|</h4> 10.data = t3datastructure : pi_flexform->titre 15 = TEXT 15.wrap = <p class="sous-titre">|</p> 15.data = t3datastructure : pi_flexform->sous-titre 20 = TEXT 20.value = Voir la suite 20.typolink.parameter.data = t3datastructure : pi_flexform->lien 20.typolink.ATagParams = class="url" 20.wrap = <p class="lien">|</p> } }
C’est terminé !
J’ai fait le choix d’un contenu basique pour ce tutoriel, mais il est possible de créer des éléments de contenu beaucoup plus complexes (impossible à réaliser à l’aide d’un RTE par exemple).
Laisser un commentaire