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).
Salut Cyril, effectivement c’est une bonne introduction par contre tu donnes direct de mauvaises habitudes aux néophytes. Modifier l’extension wec_contentelements pour lui ajouter des dossiers… J’ai comme un doute. Mieux vaut créer une extension vide, ou profiter d’une extension qui contiendrait, au hasard, tout le TS d’un site (http://www.test4u.fr/2012/05/20/typo3-sans-templavoila/) ;-), pour stocker ses nouveaux Fce en laissant l’extension d’origine vierge de toute modification. C’est quand même plus propre. Une autre bonne méthode peut être d’embarquer les scripts JS et CSS directement dans le dossier du Fce et de les importer avec le TS adéqua. Rendre les Fce facilement transportables d’un site à l’autre est un des gros points qui nous a fait choisir cette extension.
Je pense également que tu as dû créer un dossier dans upload pour ton Fce, ou que tu as automatisé dans l’ext_emconf de ton extension, sans quoi tu as un message d’erreur à l’ upload dans le backend.
Pour détailler un tout petit peu plus pour tes lecteurs, sans aller trop loin, sachez qu’il est possible de créer des boucles de contenus, très utiles pour des slideshow, carrousel,… Et que le code livré dans le slideshow de l’extension de base est assez clair là dessus.
Bon article en tout cas. Il incite à lutter contre le mal :-D
Tout d’abord, je rends à césar … c’est Guillaume Caron qui a rédigé cet article, mais j’ai eu un problème avec l’affichage de l’auteur en bas du post. Maintenant que c’est corrigé on y voit plus clair :)
Nous sommes d’accord à 100% avec tes remarques, qui complètent parfaitement l’article en rappelant les bonnes pratiques.
Est ce que tu as vu ça aussi: http://docs.typo3.org/typo3cms/extensions/content_designer/1.3.0/ je ne sais pas ce que ça vaut par rapport à WEC ?
Nop, je ne connais pas du tout mais je vais regarder à l’occaz. (là, en deux secondes de lecture, ça a l’air un poil plus complexe à mettre en place pour quelqu’un qui ne serait pas au taquet en TS, mais à surveiller).
Au final, pour nos besoins tout ce qu’il manque à wec_contentelements serait la possibilité de créer des colonnes de contenus, dans lequel on pourrait stocker d’autres objets. Nous passons actuellement par kb_nescefe et avons testé multicolumn, mais c’est vrai qu’un tout en un serait le top (sans tomber dans les travers de TV bien sûr :p)
Bonjour,
étant un nouvel utilisateur de typo3 je me documente en ce moment sur les différentes méthode de templating, création d’élément de contenu et d’extension.
Je m’y perd un peu d’ailleurs entre les différents terme : flexform, fce, fluid, flux, flex … (je n’ai pas réussi encore à trouver un site avec les définitions des différents termes)
Ma question en espérant qu’elle est du sens : est il mieux d’utiliser l’extension wec content element ou les élements de contenu fluid (ceux contenu dans le dossier extension/resources/private/templates/Content d’une extension de template fluid) ? quelles sont les différences ?
Bonjour Laurent,
Nous allons parler de ces questions lors de la T3UNI14, ce soir pendant la conférence : Quelle méthode de templating.
Vous pouvez la suivre en direct sur http://t3uni.typo3-fr.org ou en différé sur youtube.
A bientôt