FCE (Flexible Content Element). This post will help you to understand following points about FCE in typo3 templates.
What is FCE?
How to create FCE?
How to use FCE in website pages / templates?
Before you start: FCE is a area in your typo3 temaplte. You have to map the area from your typo3 template to place any perticular FCE. So very first thing you must have is, a typo3 template with place holder for our FCE. If you dont have a typo3 template then click here Free typo3 templates.
What is FCE?
Flexible content element is a typo3 element which can be created by user Or in simple words we can say a "User created Element". It is very simple to understand if you go step by step.
When we want to add any new element on pur page, Typo3 system asks us to click on any element(e.g. sitemap / regular HTML / bullet list). When we add any one of this in our page then related form opens up say if we click on sitemap then the form contains fields about sitemap only. But if at any position you want to add a element to your page which will give you 2 fields (one image link one textarea), then typo3 system is not supported to give such element directly. Here is the need of Flexible content element. User can create your own element and name them and can use them any where in project as a regular typo3 element.
This is what FCE, isn't it simple to understand.
FCE is nothing but user form elements with user templates.
How to create FCE?
Here I will explain how to create FCE with simple steps. I am assuming that you have already mapped your template using templavoila. If yes then proceed with this post otherwise click here to read how to map the template in templavoila.
Step1
Creating FCE using templavoila is nothing but defining some area in template file as a separate contain holder. So if your original template in fileadmin folder has some area that can be defined as content holder then proceed with next step else just write following HTML in your template. This new content area is nothing but your FCE i.e. Flexible content element.
Step2
Go to the File > Filelist module and go in the directory where your template file is located.
Once you get your template file then click on blue icon beside your template file. It will open a small context menu then click on templavoila. It will take you to the Templavoila's mapping wizard. This wizard should come with root element unmapped. If it is coming with some previous mapping then click on clear button.
Step3
Here you have to map the ROOT in your FCE element. Remember you have already done this for your template mapping. But that was a page mapping and this is a FCE mapping so you have to select HTML element other than body tag. In our case you have to click on our first div(i.e. id="FCE1"). This click will tell typo3 system that your new FCE's ROOT is id="FCE1".
Remember we are going to create a simple FCE with one header field and one body field ( thats why we have created div structure in step1).
Step4
You have mapped the ROOT of your your FCE. Now you have to map header and body of your FCE. For this you have to create a element first. So click on a small textbox below mapping options which already has value field_. Edit it and write field_head.
Will continue this post later about how to create a new FCE and how to use FCE in our page.
What is FCE?
How to create FCE?
How to use FCE in website pages / templates?
Before you start: FCE is a area in your typo3 temaplte. You have to map the area from your typo3 template to place any perticular FCE. So very first thing you must have is, a typo3 template with place holder for our FCE. If you dont have a typo3 template then click here Free typo3 templates.
What is FCE?
Flexible content element is a typo3 element which can be created by user Or in simple words we can say a "User created Element". It is very simple to understand if you go step by step.
When we want to add any new element on pur page, Typo3 system asks us to click on any element(e.g. sitemap / regular HTML / bullet list). When we add any one of this in our page then related form opens up say if we click on sitemap then the form contains fields about sitemap only. But if at any position you want to add a element to your page which will give you 2 fields (one image link one textarea), then typo3 system is not supported to give such element directly. Here is the need of Flexible content element. User can create your own element and name them and can use them any where in project as a regular typo3 element.
This is what FCE, isn't it simple to understand.
FCE is nothing but user form elements with user templates.
How to create FCE?
Here I will explain how to create FCE with simple steps. I am assuming that you have already mapped your template using templavoila. If yes then proceed with this post otherwise click here to read how to map the template in templavoila.
Step1
Creating FCE using templavoila is nothing but defining some area in template file as a separate contain holder. So if your original template in fileadmin folder has some area that can be defined as content holder then proceed with next step else just write following HTML in your template. This new content area is nothing but your FCE i.e. Flexible content element.
Step2
Go to the File > Filelist module and go in the directory where your template file is located.
Once you get your template file then click on blue icon beside your template file. It will open a small context menu then click on templavoila. It will take you to the Templavoila's mapping wizard. This wizard should come with root element unmapped. If it is coming with some previous mapping then click on clear button.
Step3
Here you have to map the ROOT in your FCE element. Remember you have already done this for your template mapping. But that was a page mapping and this is a FCE mapping so you have to select HTML element other than body tag. In our case you have to click on our first div(i.e. id="FCE1"). This click will tell typo3 system that your new FCE's ROOT is id="FCE1".
Remember we are going to create a simple FCE with one header field and one body field ( thats why we have created div structure in step1).
Step4
You have mapped the ROOT of your your FCE. Now you have to map header and body of your FCE. For this you have to create a element first. So click on a small textbox below mapping options which already has value field_. Edit it and write field_head.
Will continue this post later about how to create a new FCE and how to use FCE in our page.
