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 :
Titre de mon contenu

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