Now that we know our way around TemplaVoila data structures and template objects, we're ready to introduce flexible content elements (or FCEs). As a core feature of the TemplaVoila extension, FCEs can almost be thought of as mini-templates for groups or chunks of content. Site developers use them in TYPO3 installations worldwide to create specialized content layouts for small groups of content like an advertisement where you might want a title, description, and image grouped together. There are actually so many places that you can use them that flexible content elements are used in many situations instead of custom extension development. By the end of this chapter, we'll all be creating custom FCEs to fill our special requirements.
In this chapter, you will:
- Learn about flexible content elements
- Create your first flexible content element to display contact information
- Create an FCE to wrap a group of content elements in a
divtag for custom styling - Use an FCE to create multi-column layouts inside any TemplaVoila content area
- Create a flexible content element for product displays
I just said flexible content elements are like mini-templates, but they are actually a little more sophisticated than that. TYPO3 templates, traditionally, are just used to design the pages of your website. Well, flexible content elements are there as a way to create our own specialized types of content elements. Flexible content elements give us most of the power that we've had in the main TemplaVoila templates; the workflow and structure is almost exactly the same. We still have a data structure and a mapped object for each template, and we can still create backend layouts and preview images to help our editors. So, we already have all the raw skills we need to start creating them, but we just need a few examples of where we would want them.
Creating a flexible content element really is just like creating a new content type for our sites utilizing the power of TemplaVoila. Once created, they can be embedded into any templates or even other FCEs. We can use references to link them across separate pages. We can copy them around between TYPO3 installations easily. We can even update the main template object or data structure of an FCE and watch our changes reach to every instance of that content element in our page tree. The best examples of this are going to be some of the ones we're about to build: a contact section, a div to wrap around other content elements, a multi-column element, and a custom product layout.