Creating custom TYPO3 content elements without TemplaVoila FCEs or PHP.

1. T3CON11-SF
WEC Content Elements
Custom Content Elements without TemplaVoila or PHP

2. Who we are
Ron Hall Jeff Segars
• BusyNoggin, Inc • Web-Empowered Church
• TemplaVoila Framework • TYPO3 Core Team
• ron@busynoggin.com • jeff@webempoweredchurch.org
• @busynoggin • @jsegars

3. Jeff’s Problem
• Web-Empowered Church provides a
customized version of TYPO3 as a free
download for churches around the world,
most without any TYPO3 experience
• How do we enhance TYPO3 with simple
content elements, making them available to
everyone and providing updates in the
future?

4. Ron’s Problem
• Speed up development compared to
TemplaVoila Flexible Content Elements
without needing PHP expertise.

5. The Options

6. Built-in Content Elements

7. Custom Plugins

8. Flexible Content Elements

9. Flexible Content Elements

10. The Solution
• Flexibility of FCEs, without tedious mapping
• Deeply integrated like built-in content
elements, but with custom fields
• Rapid development and (almost) no PHP due
to solid conventions
• Extension based, for easy distribution and
version control

11. WEC Content Elements
• Available in the TYPO3 Extension Repository
• Contains 5Slideshow,Vimeo,YouTube, File Download)
(Local Menu,
content elements
• Simple API for creating your own content
elements

12. WEC Content Elements

13. WEC Content Elements

14. WEC Content Elements

15. WEC Content Elements API

16. Extension Structure
- my_ext
- ext_emconf.php
- ext_icon.gif
- ext_localconf.php
- tx_weccontentelements_lib::addTyposcript($_EXTKEY, 'myCE');
- ext_tables.php
- tx_weccontentelements_lib::addContentElement($_EXTKEY, 'myCE');
- myCE/

17. Extension Structure
• my_ext/myCE
• icon.gif
• wizard-icon.gif
• locallang.xml
• locallang_csh.xml
• flexform.xml
• content.ts

18. myCE/flexform.xml
<T3DataStructure>
<ROOT>
<TCEforms>
<cshFile>LLL:EXT:my_ext/myCE/locallang_csh.xml</cshFile>
</TCEforms>
<type>array</type>
<el>
<name>
<TCEforms>
<label>LLL:EXT:my_ext/myCE/locallang.xml:flexform.myCE.name</label>
<config>
<type>input</type>
</config>
</TCEforms>
</name>
</el>
</ROOT>
</T3DataStructure>

19. myCE/content.ts
tt_content.myCE = COA
tt_content.myCE {
10 <= lib.stdheader
20 = TEXT
20.wrap = Hello, | !
20.data = t3datastructure : pi_flexform-
>name
}

20. Advanced Content Element

21. myCE/flexform.xml
<T3DataStructure>
<ROOT>
<TCEforms>
<cshFile>LLL:EXT:my_ext/myCE/locallang_csh.xml</cshFile>
</TCEforms>
<type>array</type>
<el>
... Insert some code for adding multiple images ...
</el>
</ROOT>
</T3DataStructure>

22. myCE/flexform.xml
<images>
<section>1</section>
<type>array</type>
<el>
<image>
<type>array</type>
<el>
<file>
<TCEforms>
<config>
<type>group</type>
<internal_type>file</internal_type>
</config>
</TCEforms>
</file>
</el>
</image>
</el>
</images>

23. myCE/content.ts
# Draw each image in the slideshow.
10 = FFSECTION
10
10 {
rootPath = t3datastructure : pi_flexform->images/el
stdWrap.wrap = <div id=gallery"> | </div>
10 = IMAGE
10.file {
import.wrap = uploads/my_ext/myCE/
import.data = flexformSection : image/el/file
width = 500
height = 500
}
}

24. myCE/content.ts
20 = INCLUDEJSLIBS
20.galleria = EXT:my_ext/myCE/res/galleria.js
25 = HEADERDATA
25.value (
<script>
$('#gallery').galleria({width:500, height:500});
</script>
)

25. ...one more thing

26. Fluid Support

27. Extension Structure
- my_ext
- ext_emconf.php
- ext_icon.gif
- ext_localconf.php
- tx_weccontentelements_lib::addFluid($_EXTKEY, 'myCE');
- ext_tables.php
- tx_weccontentelements_lib::addContentElement($_EXTKEY, 'myCE');
- myCE/

28. Extension Structure
• my_ext/myCE
• icon.gif
• wizard-icon.gif
• locallang.xml
• locallang_csh.xml
• flexform.xml
• content.html

29. myCE/flexform.xml
<T3DataStructure>
<ROOT>
<TCEforms>
<cshFile>LLL:EXT:my_ext/myCE/locallang_csh.xml</cshFile>
</TCEforms>
<type>array</type>
<el>
<name>
<TCEforms>
<label>LLL:EXT:my_ext/myCE/locallang.xml:flexform.myCE.name</label>
<config>
<type>input</type>
</config>
</TCEforms>
</name>
</el>
</ROOT>
</T3DataStructure>

30. myCE/content.html
<f:if condition=”{name}”>
<f:then>
Hello, {name}!
</f:then>
<f:else>
Hmm, what’s your name?
</f:else>
</f:if>

31. Further Exploration
EXT:wec_contentelements
EXT:wec_contentelements_demo

32. Extra Credit

33. Poor Man’s List View
tt_content.myCEList = COA
tt_content.myCEList {
10 <= lib.stdheader
20 = CONTENT
20 {
table = tt_content
select.where = CType='myCE'
wrap = <ul> | </ul>
renderObj = TEXT
renderObj {
wrap = <li> | </li>
data = t3datastructure : pi_flexform->name
}
}
}

34. Enhancing FCEs
tt_content.myCEList = COA
tt_content.myCEList {
10 <= lib.stdheader
20 = CONTENT
20 {
table = tt_content
select.where = CType='templavoila_pi1' AND
tx_templavoila_to='1'
wrap = <ul> | </ul>
renderObj = TEXT
renderObj {
wrap = <li> | </li>
data = t3datastructure : tx_templavoila_flex->->name
}
}
}

35. Questions?