WEC Content Elements API

3,027 views

Published on

Creating custom TYPO3 content elements without TemplaVoila FCEs or PHP.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,027
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • We like TypoScript, but don’t like trying to repurpose fields for something else.\n
  • Overkill for something that is display only. Requires PHP knowledge from developer. Cast Iron Coding has a blog post on using Extbase for custom content elements for those who are developers.\n
  • Everything is saved in the database. This makes distribution and updating impossible. Also, version control doesn’t work.\n
  • Mapping interface is tedious and error-prone. I get nervous every time I remap content and create a backup copy. TemplaVoila Framework helps with this on the page level.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Demo Time!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • WEC Content Elements API

    1. 1. T3CON11-SF WEC Content Elements Custom Content Elements without TemplaVoila or PHP
    2. 2. Who we areRon Hall Jeff Segars• BusyNoggin, Inc • Web-Empowered Church• TemplaVoila Framework • TYPO3 Core Team• ron@busynoggin.com • jeff@webempoweredchurch.org• @busynoggin • @jsegars
    3. 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. 4. Ron’s Problem• Speed up development compared to TemplaVoila Flexible Content Elements without needing PHP expertise.
    5. 5. The Options
    6. 6. Built-in Content Elements
    7. 7. Custom Plugins
    8. 8. Flexible Content Elements
    9. 9. Flexible Content Elements
    10. 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. 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. 12. WEC Content Elements
    13. 13. WEC Content Elements
    14. 14. WEC Content Elements
    15. 15. WEC Content Elements API
    16. 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. 17. Extension Structure• my_ext/myCE • icon.gif • wizard-icon.gif • locallang.xml • locallang_csh.xml • flexform.xml • content.ts
    18. 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. 19. myCE/content.tstt_content.myCE = COAtt_content.myCE { 10 <= lib.stdheader 20 = TEXT 20.wrap = Hello, | ! 20.data = t3datastructure : pi_flexform->name}
    20. 20. Advanced Content Element
    21. 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. 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. 23. myCE/content.ts# Draw each image in the slideshow.10 = FFSECTION1010 { 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. 24. myCE/content.ts20 = INCLUDEJSLIBS20.galleria = EXT:my_ext/myCE/res/galleria.js25 = HEADERDATA25.value ( <script> $(#gallery).galleria({width:500, height:500}); </script>)
    25. 25. ...one more thing
    26. 26. Fluid Support
    27. 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. 28. Extension Structure• my_ext/myCE • icon.gif • wizard-icon.gif • locallang.xml • locallang_csh.xml • flexform.xml • content.html
    29. 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. 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. 31. Further ExplorationEXT:wec_contentelementsEXT:wec_contentelements_demo
    32. 32. Extra Credit
    33. 33. Poor Man’s List Viewtt_content.myCEList = COAtt_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. 34. Enhancing FCEstt_content.myCEList = COAtt_content.myCEList { 10 <= lib.stdheader 20 = CONTENT 20 { table = tt_content select.where = CType=templavoila_pi1 ANDtx_templavoila_to=1 wrap = <ul> | </ul> renderObj = TEXT renderObj { wrap = <li> | </li> data = t3datastructure : tx_templavoila_flex->->name } }}
    35. 35. Questions?

    ×