WEC Content Elements : Des FCE sans TemplaVoila !

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).

Guillaume CARON

Intégrateur TYPO3 certifié, je travaille essentiellement sur des projets grands comptes, dans un contexte d'entreprise. Je suis responsable d'équipe pour le plateau technique TYPO3 d'EXL Group. Passionné par la technique, j'effectue une veille technologique forte et participe aux évolutions du CMS.

5 commentaires

  1. Grégory Copin   •  

    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

  2. Cyril Wolfangel   •  

    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 ?

    • Grégory Copin   •  

      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)

  3. laurent   •  

    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 ?

    • Cyril Wolfangel   •  

      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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *