Working with Flexible Content Elements in TYPO3 Templates

Exclusive offer: get 50% off this eBook here
TYPO3 Templates

TYPO3 Templates — Save 50%

Create and modify templates with TypoScript and TemplaVoila

$26.99    $13.50
by Jeremy Greenawalt | November 2010 | Open Source

Working with Flexible Content Elements introduces one of the most powerful and useful technologies in TemplaVoila, flexible content elements. Flexible content elements allow developers to create new content types utilizing the power of TemplaVoila for specialized purposes such as displaying contact information or product ads consistently across a site. The article explains the main concepts and walks readers through multiple examples.

In this article, by Jeremy Greenawalt, author of TYPO3 Templates, 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 div tag for custom styling
  • Use an FCE to create multi-column layouts inside any TemplaVoila content area
  • Create a flexible content element for product displays

 

TYPO3 Templates

TYPO3 Templates

Create and modify templates with TypoScript and TemplaVoila

  • Build dynamic and powerful TYPO3 templates using TypoScript, TemplaVoila, and other core technologies.
  • Customize dynamic menus, logos, and headers using tricks you won’t find in the official documentation.
  • Build content elements and template extensions to overhaul and improve TYPO3’s default back-end editing experience.
  • Follow along with the step-by-step instructions to build a site from scratch using all the lessons in the book in a practical example.
        Read more about this book      

(For more resources on this subject, see here.)

Introducing flexible content elements

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.

Creating our first flexible content element

The first FCE we're going to create is going to be simple enough to show us the basic workflow, but it's also a pretty handy trick so that we can add our contact information onto multiple pages using consistent formatting across our site. We're going to create a new flexible content element for our contact information using microformats (http://microformats.org/) so that Google and some browsers can read our address, phone number, and email address easier. Normally, this would require a lot of extra work to place it on multiple pages, but we can create an FCE that our editors can add to any page just like a normal content element.

Building the content element

  1. Of course, the first thing that we should do is create an HTML file that we can use for our mapping. FCEs are normally mapped to a part of a complete HTML template, while page templates are mapped to the whole file. For our example, we will create one universal HTML file to hold all of our flexible content element HTML snippets called template_fce_snippets.html in the fileadmin/templates/ directory.
  2. At this point, we can create our HTML that the FCE will be based on. Like we said before, we are going to use microformats so that our contact information can be read by software more easily. To use microformats, we are just going to add some specific class names to the span and div tags around our information. If you would like to see more information about microformats, I recommend going to http://microformats.org/. For now, we can add this code into our template_fce_snippets.html file:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8" />
    </head>
    <body>
    <div id="contact_info_section">
    <h3 id="contact_info_title">Contact Us</h3>
    <div class="vcard">
    <div class="fn org">Example.com</div>
    <div class="adr">
    <div class="street-address">1214 Rebekah Ave.
    </div>
    <span class="locality">Dallas</span>,
    <span class="region">TX</span>
    <span class="postal-code">75154</span>
    <span class="country-name">USA</span>
    </div>
    <div class="tel">(212) 555-1212</div>
    <a class="email"
    href="mailto:jeremy@example.com">jeremy@example.com</a>
    </div>
    </div>
    </body>
    </html>

  3. We are ready to start creating the TemplaVoila structures now, so we can go to the TemplaVoila Control Center in the backend of our installation now. We can create a new data structure by going to the Template Files tab in the control center. To create a new template object and data structure simultaneously based on our new HTML file, we need to click on the Create... link for our template file, fileadmin/templates/template_fce_snippets.html.
  4. Now we need to choose the root data element. Go ahead and choose the main div tag (circled in the following screenshot). We need to make sure we set the mapping mode to OUTER (Include tag). Due to an oddity in TemplaVoila, outer mapping is the only way to make sure that we actually keep the contact_info_section class after mapping. It may be counter-intuitive, but TemplaVoila treats root elements exactly the opposite of all other elements in its implementation of outer and inner mapping modes. Click on Set to start creating our data structure.

  5. Now that we have set the root, we can add our own fields to the FCE data structure. All of our contact information can be static, so we will just create a field for the header. Like the page templates, we will create a new field by filling the in name, field_header, at the bottom of the page as shown in following screenshot, and click on Add.
  6. Now we can fill in the form for our new field. We will set the Title to Header, and we can set the Sample Data as [Header goes here]. As we are using this as a header, we can choose Header field as our Element Preset. After we have filled out the form as shown in the following screenshot, we can click on Add to save our settings.
  7. Map the header field to the h3 tag in our HTML template and click on Set to save the mapping.
  8. We've finished creating our small content element, so we can click on the Save as button in our builder screen and save our progress. We are creating a new data structure, so we will need to fill out the CREATE Data Structure/ Template Object portion of the TemplaVoila save screen. We will give our new element an easy title, Contact Information. We also need to make sure we choose Content Element from the Template Type drop down because we are creating an FCE instead of a page template this time.
  9. Our screen should look something like shown in the following screenshot before we click on the CREATE DS / TO button:

Testing our new content element

We can add our element to any page the same way we've been adding text or graphic elements in the past through the Page view.

  1. Go to the main page in the backend of TYPO3 and click on the new element button (circled in the following screenshot).
  2. Added to the choices of standard or extension-based elements, we can see our own flexible content element, Contact Information [Template], listed. Go ahead and choose it to add it to the page.
  3. The next screen we see is the content editing screen where we can fill in the header for our new element:

  4. Finally, we can save our new content element and see the output on the frontend (highlighted in the following screenshot):

Creating a flexible HTML wrapper

As a website grows, we sometimes run into times where we would like to assign a special style to a content element or group of content elements, but there is no easy way to do this in TYPO3 without creating a new page template. All we really want to do is wrap a div tag around the group of elements we are styling with a CSS class to give them any style we need from our own stylesheets. For example, we might want to highlight a group of content elements with a color background or border.

We will create a flexible content element to output a div tag with a blank class attribute that can contain normal page content elements. The FCE will have a field for the class, so our editors can fill in whatever class they need to use later.

We're also keeping control over the options that editors have. They are still restricted to using CSS classes, as opposed to arbitrary style attributes, so we have not given them too much freedom.

Building the content element

  1. First, we can create our HTML to which the FCE will be mapped. All we need is a div tag with a blank class attribute, so we can just add our snippet to the bottom of /fileadmin/templates/template_fce_snippets.html. We will also add some HTML comments around our new snippet so that we can always identify it in the HTML file:


    <!-- BEGIN HTML Wrapper -->
    <div class=""></div>
    <!-- END HTML Wrapper -->

  2. Now, we go back to the TemplaVoila module in the backend. From the Template Files tab in the TemplaVoila Control Center, click on Create... next to the file fileadmin/templates/template_fce_snippets.html label.
  3. Go ahead and choose our new div tag between the HTML comments (circled in the following screenshot) and click on Set to start creating our data structure.

  4. Again, choose OUTER (Include tag) as our mapping mode.
  5. The first field we need to create is the wrapper field for the content element. We have already set the div tag as the root element, but we still need to create a separate field to handle content elements or we won't be able to add content into our new FCE in the Page view. Like before, we can create a field by filling in the new field text area with a new name, field_wrapper, and clicking on the Add button. Now we can create the field with the following values just like we did when we added fields to our main templates. Like our page templates, we are going to use the Page-Content Elements preset because it allows us to place other content elements inside our new field:
    • Field: field_wrapper
    • Element
    • Title: Wrapper
    • Sample Data: [Content goes here]
    • Element Preset: Page-Content Elements
  6. Once we have created and saved our new field, we can map it to the div tag by clicking on the Map button. We can use inner mapping this time because we want to keep the tag and this is not the ROOT field.
  7. The next field we need to create is the class field so that we can edit the class from the page module. Instead of an element, we are creating an attribute. To create the new field, fill in the name, field_class, at the bottom of our page and click on Add. Choose Attribute from the drop down on the left side and fill out the field values:
    • Title: Class
    • Sample Data: [Class field]
    • Element Preset: Plain input field
  8. After we have created the new class attribute and saved it, we can map it to the class attribute in our div tag. If we click on the Map button for the class field, we see that we can only choose the div tag to map to; this is okay. If the div tag is grayed out or disabled, we probably need to check that the root element was set with OUTER mapping. After we click on the div tag, we are presented with a slightly different mapping screen than we have seen before. Up until now, we have been mapping tags instead of attributes, so our choice has been INNER or OUTER mode. When mapping attributes, this drop down will show any blank attributes that exist within the HTML template for that tag. If we wanted to set a relation attribute, for example, the HTML just needs to have rel="" present in the tag with or without a value. For now, we can choose ATTRIBUTE "class" (= ) from the drop down and click on the Set button to continue.
  9. We've created all of the fields we need for this small content element, so we can click on the Save as button to save our progress. We will give our new element an easy title, HTML Wrapper. We also need to make sure we choose Content Element from the Template Type drop down again.

Testing our new content element

We now have a data structure and template object created as a flexible content element and mapped, so we are ready to test. We can test with almost any class from our stylesheet, but we'll make it easy by adding a new class style to the bottom of our style.css file with a color background, rounded corners, and a slight shadow to highlight content:

.alert {
background-color: #BBCCDD;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 2px 2px 5px #888;
-webkit-box-shadow: 2px 2px 5px #888;
-moz-box-shadow: 2px 2px 5px #888;
}

As an example, we can highlight a couple of bullet lists on the Bulletlist page that the TemplaVoila wizard created.

  1. Go to the Bulletlist page in the backend of TYPO3 and choose to add a new element like we did for the Contact Information FCE.
  2. This time, choose HTML Wrapper [Template] for our new element.
  3. The next screen we see is the editing screen, and we can see that the titles we gave our data structure fields are showing up along with the different form elements we just declared. We can add elements to the wrapper here, but it's easier in the page module. Instead, we'll just set the Class field to alert to match our stylesheet, and save our new element.

  4. Finally, in the page module, we can drag elements into our new content element, and our new div tag with a class we have set in the settings will wrap around them. We can drag two of our bullet lists into the FCE:
  5. If we look at our edited page on the frontend, we can see the new CSS styling applied immediately:

Creating a multi-column layout element

As helpful as a wrapping div tag can be, we should start getting a little bigger with our goals. One thing that we run into all the time in the real world of site development is the need to have multi-column elements. With the rise of grid-based design and content-heavy sites, it's getting more popular to start adding two columns into the main content area under a single column article or something similar. Unfortunately, there are a lot of variations on this idea of mixing and nesting multi-column layouts, and it's not always possible or smart to create a template for every possible variation in a limited amount of time. You can easily waste all your time creating templates with a two-column element over a three-column element over a two-column element over a single-column element. I know that sounded confusing, and that's the problem. Instead, we can create a handful of useful multi-column flexible content elements that our editors can use anywhere they need to and in any order they need to. They can even nest them inside of each other if we do this right.

Right now, we're going to make a quick FCE with two columns that take up roughly half of the current content area. We're just going to start by adding some basic styling to our main stylesheet, fileadmin/templates/style.css:

.multi_column_element {
display: inline-block;
width: 100%;
}
#nested_column_1 {
float: left;
clear: left;
}
#nested_column_2 {
float: right;
clear: right;
}
.half {
width: 49%;
}

As you can see above, we are using inline-block as the display setting for the entire element. If we don't set that, then the elements below it can creep up when we start using floats. For more information on CSS values like inline-block, I recommend the tutorials from w3schools.com (http://www.w3schools.com/css/).

In addition, our style floats the first column, nested_column_1, to the left and clears anything to its left. The second column, nested_column_2, floats to the right and clears anything to the right of it. If we assign the class half to both columns, then they will both take up a little under 50% of the total width with a little whitespace in the middle.

After we've modified the CSS, we need to update our HTML file. Once again, we'll add our new HTML code with identifying comments into our HTML template, /fileadmin/templates/template_fce_snippets.html. Go ahead and add some basic code to the main FCE HTML file to create two divs for columns:

<!-- BEGIN 1/2 + 1/2 Element --><div class="multi_column_element">
<div class="nested_column half" id="nested_column_1">Column 1</div>
<div class="nested_column half" id="nested_column_2">Column 2</div>
</div>
<!-- END 1/2 + 1/2 Element -->

Now we're going to follow most of the same steps from the previous examples starting with the creation of a new data structure:

  1. From the Template Files tab in the TemplaVoila Control Center, click on Create... next to the file fileadmin/templates/template_fce_snippets.html label.
  2. Choose the main div tag that wraps around the entire HTML template as the root field. Again, we need to make sure we set the mapping mode to OUTER (Include tag).
  3. Create a new field for the first column named field_column_1. As the float is set completely in CSS, we will not refer to the columns as left or right columns here. This means we could swap the columns in CSS or assign different identifiers in the HTML without breaking our data structure. Go ahead and create our new field with these values:
    • Field: field_column_1
    • Element
    • Title: Column 1
    • Sample Data: [Column #1 goes here]
    • Element Preset: Page-Content Elements
  4. Save the first field and map field_column_1 to the div tag with the ID nested_column_1. Make sure that you select inner mapping so that the classes and identifiers are left in the div tag.
  5. Create a new field for the second column with almost the same values as the first column:
  6. Field: field_column_2
  7. Element
  8. Title: Column 2
  9. Sample Data: [Column #2 goes here]
  10. Element Preset: Page-Content Elements
  11. Save the second column field and map it to the div tag with the ID nested_column_2 in the HTML.
  12. Click on the Save as button to save our new data structure and template object. Set the title as something memorable, Two-Column Element, before choosing Content Element as the Template Type and clicking CREATE DS / TO.

As easy as that, we've just created another FCE. We can test this one on the main page of our test site by creating a new content element with our new FCE, Two-Column Element, and dragging our current blocks into either side:

With two even columns, our front page should look something like this:

TYPO3 Templates Create and modify templates with TypoScript and TemplaVoila
Published: November 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

Extending the multi-column layout element

As you can see from our example above, two even columns are not always the best answer for a good layout. Thankfully, we can create multiple flexible content elements using the same data structure. In fact, the process is, like all of the FCE processes, almost exactly like the page template process. Just like when we created multiple template objects from the main data structure, we can create multiple FCE template objects from the multi-column data structure.

We're going to add two new template objects. Each will have a column using 33% of the total width and a column using 65% of the total width. Like the even columns, we're just using percentages as a quick way of getting up and running, and we're allowing a little less than 100% width so there will be some space between the columns. One template will have the large column on the right, and the other one will have the large column on the left. We'll just be building on the data structure that we've already built, so we can go through the process without too much explanation on each step.

  1. We need to add classes for the two new possible column widths to the stylesheet. Let's go ahead and add these to the bottom of our style.css file:

    .one_third {
    width: 33%;
    }
    .two_thirds {
    width: 65%;
    }

  2. We are going to create two new HTML snippets almost exactly like the previous one. The only difference will be in the classes of the columns. Before we set them both to half, now we will be using one_third or two_thirds. First, we'll add the HTML code with 33% width on the left with HTML comments that identify it as having 1/3 on the left and 2/3 on the right to template_fce_snippets.html:

    <!-- BEGIN 1/3 + 2/3 Element -->
    <div class="multi_column_element">
    <div class="nested_column one_third" id="nested_
    column_1">Column 1</div>
    <div class="nested_column two_thirds" id="nested_
    column_2">Column 2</div>
    </div>
    <!-- END 1/3 + 2/3 Element -->

  3. Next, we'll create the HTML with the smaller column on the right. The only difference in the HTML is that we have switched the one_third and two_thirds classes between the columns. We could make this editable like the HTML wrapper, but that would just add work for the editors. With this code, there's no possibility of putting two two_thirds columns next to each other:

    <!-- BEGIN 2/3 + 1/3 Element -->
    <div class="multi_column_element">
    <div class="nested_column two_thirds" id="nested_
    column_1">Column 1</div>
    <div class="nested_column one_third" id="nested_
    column_2">Column 2</div>
    </div>
    <!-- END 2/3 + 1/3 Element -->

  4. In the backend TemplaVoila module, we can go to the Flexible CE tab to see our current flexible content elements. To avoid confusion, we can rename the Two-Column Element [Template] template object. Go ahead and click on the pencil to edit it, and change the title to something more unique like 1/2 + 1/2 Element [Template]. Save the changes.
  5. Back in the TemplaVoila module, we will click on the Create new Template Object link under our template object labeled 1/2 + 1/2 Element [Template].
  6. When the editing screen comes up, we can fill out the fields for our new template:
    • Title: 1/3 +2/3 Element [Template]
    • File reference: fileadmin/templates/template_fce_snippets.html
    • Data Structure: Two-Column Element (or Static: Two-Column Element (fce) if you are using static data structures)
  7. After you have saved your changes, repeat the process to create another template object with similar settings:
    • Title: 2/3 + 1/3 Element [Template]
    • File reference: fileadmin/templates/template_fce_snippets.html
    • Data Structure: Two-Column Element (or Static: Two-Column Element (fce) if you are using static data structures)
  8. Next, we can click on the Remap button for the 1/3 + 2/3 Element [Template] to start mapping it. Map this new template object exactly like the template object with two even columns before.
    • Map ROOT to the main div with the class multi_column_element. Select OUTER for the mode.
    • Map Column 1 to the div with the id nested_column_1.
    • Map Column 2 to the div with the id nested_column_2.
  9. Click the Save and Return button.
  10. Repeat the mapping and saving process for the 2/3 + 1/3 Element [Template] template object.

Now we can return to the front page and update our layout. Just click on the pencil icon for our two-column element to edit it and change the Template Object drop-down to 2/3 + 1/3 Element [Template]. If we refresh our page in the frontend, we should see something that works at least a little better:

Creating a product display element

We've seen how we can use flexible content elements to give us better control over our layouts and give us multi-column layouts, but we haven't actually built a whole new kind of content element like we would expect from an extension or specialized installation. Well, it just happens that we need to work on integrating consistent product displays into our website so we have the perfect situation to learn more about the FCE system. We could use the old Image w/ Text content type everywhere or we could create our own new content element that would be on the same level as a customized Image w/ Text content element. What are the advantages of using an FCE for this little task, though?

  • Consistency: All of the product displays will inherently look the same because the image size, link structure, and even product name placement can be controlled through the FCE.
  • Flexibility: If we decide that we want all of the product images to be to the right of the descriptions one day, we can change the FCE, flush the cache, and see all product displays immediately change when we refresh our browsers. We can't do this with simple content elements styled in the RTE.
  • Speed: If we spend a few extra minutes laying out a nice flexible content element, our editors will save at least a few minutes on every single product display they create; that translates to plenty of saved time and money pretty quickly.

So, our final FCE will be a new element to display products. We want to be able to show the name, description, price, and a link to our product in the store with our own consistent layouts, and we need the ability to have a few different styles of products based on CSS classes. We also want to make sure that it's easy to buy the product, so the name of the product and the image will always link to our product in the store.

Creating the HTML and CSS

Just like before, our first step is to create a good HTML template to build from. Obviously, there are a lot of ways that we could build a good product display, but here is some example HTML code that will put us all immediately on the same page:

<!-- BEGIN Product Element -->
<div id="product_ad" class="">
<img id="product_image" />
<div class="product_text">
<p id="product_name"></p>
<p id="product_description"></p>
<p id="product_price"></p>
<p id="product_link"></p>
</div>
</div>
<!-- END Product Element -->

As you can see above, our template once again consists mostly of empty HTML tags with identifiers or classes that we will use in the CSS and TemplaVoila mapping. Right now, we can add our new HTML snippet to the template_fce_snippets.html file.

As part of our overall HTML/CSS template creation, we can go ahead and setup our stylesheet changes now. This is just for our example site, so there's no reason to go crazy on CSS customization, but we do want to make a few changes to make sure that the product graphic floats nicely to the left of the description. We're going to restrict the overall width of a product display to 450 pixels and the width of the text to 290 pixels. The image will float to the left, and its size will be set by the TypoScript in the data structure so that the server will handle any resizing that is necessary. Go ahead and add this small chunk of CSS to the bottom of your style.css file to make these updates:

 

#product_ad {
width: 450px;
}
#product_ad div.product_text {
width: 290px;
}
#product_description {
margin-bottom: 5px;
}
#product_price {
font-weight: bold;
}
#product_ad img {
float: left;
margin-right: 10px;
}

TYPO3 Templates Create and modify templates with TypoScript and TemplaVoila
Published: November 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

Creating a customized data structure

Now we're ready to create the actual data structure. The process is going to be basically the same as the other content elements, but we are going to spend more time tweaking each field to work exactly the way we want.

Our first step is always to create a new data structure again by clicking Create... next to the fileadmin/templates/template_fce_snippets.html label. Go ahead and map the root field to the main div tag with the ID of product_ad. Like before, we need to set the mapping mode to OUTER (Include tag) so that the product_ad ID attribute stays in the HTML tag.

Product name

The first field we are going to create is the product name field, so go ahead and create a new field named field_name with some basic settings:

  • Field: field_name
  • Element
  • Title: Product Name
  • Sample Data: [Product name]
  • Element Preset: Plain input field
  1. Go ahead and save the initial configuration by clicking on the Add button. After you have saved the original settings, go ahead and click on the Extra link under the Configuration heading (pictured in the following screenshot). We want to wrap a link to the product page around a few of our fields including the name field, so we are going to add some TypoScript to the Custom stdWrap parameter for field_name. We are going to use two lines of TypoScript for this:
  2. if.isTrue.current = 1
    typolink.parameter.field = field_link

    The first line checks to see that the field_name currently exists. We do this this so that TYPO3 only creates a link tag when the product name exists. The second line creates a typolink wrap around the field_name output. In addition, it gets the link parameters, or destination and target of the link, from a field named field_link. We will be creating this data structure field later on as a link to the product page, but we can go ahead and start using it to add dynamic links to specific data structure elements. Before we click on Update, our screen should look like this:

  3. We are almost done with the product name field, but we are going to tweak the form display itself before we're done. Go ahead and click on the Form link on the left side of screen (below the Extra link we just clicked on). You'll see that it shows the field label and some code in an XML format called FlexForm that TYPO3 uses for backend form configurations. We want to limit how large product names are, so we are going to change the size from 48 to 20. In addition, we want to add a checkbox to the field, so that it's easy to quickly unset the field. Some of our editors have probably already gotten used to using this for other fields, so we'll make their job easier by adding a checkbox to the text input. We will also leave trim in the eval field, which will trim the whitespace from before and after the name. After those two minor changes, here is our new form configuration code:

    <type>input</type>
    <size>20</size>
    <checkbox></checkbox>
    <eval>trim</eval>

  4. Now we can save our changes to the name field by clicking on the Update button. Click on the Map button to map the product name field to the paragraph tag with the ID of product_name.

Product class

We are going to create a class field so that we can change the style for different product types through CSS. The easiest way to modify the styling of our entire product display is to modify the class attribute on the main div tag, and we can use a drop-down to make sure that our editors only have to deal with a list of known categories or product types. They'll never know that they are dynamically altering the class attribute for the main display; they'll just know that sometimes the product image is on the other side or the product name is a different color. Like before, let's go ahead and create an initial field before we start modifying it with the following settings and make sure we set it as an Attribute:

  • Field: field_class
  • Attribute
  • Title: Class
  • Element Preset: Selector box

As we have a drop-down, or selector box, we are going to need to modify the form configuration using FlexForm XML to make it work completely. We will only be using basic FlexForm tags, but you can see more information about FlexForms in the TYPO3 Core API (http://typo3.org/documentation/document-library/coredocumentation/doc_core_api/current/).

  1. First, go click on the Form link on the left side like when we updated the product name field.
  2. Second, we can set the form label to Category in the text area labeled Form label: so that the backend form, at least, will show this as a category selection for the editors instead of a class selection.
  3. Next, we are going to create the drop-down values to replace the default code in the wizard. We are going to insert one blank option in the dropdown so it's not required, and then each option after that is numbered with an index as part of the select array (see the following code snippet). For each option, there are two pieces: the label and the value. We are just setting up a normal HTML form select input, so these are the same values that we would normally be adding by hand. In the first example below, the label Book will be shown in the drop-down, and the value product_book will be assigned to the class of the main div if it is chosen. Here is the FlexForm code for our new drop-down:

    <type>select</type>
    <items type="array">
    <numIndex index="0" type="array">
    <numIndex index="0"></numIndex>
    <numIndex index="1"></numIndex>
    </numIndex>
    <numIndex index="1" type="array">
    <numIndex index="0">Book</numIndex>
    <numIndex index="1">product_book</numIndex>
    </numIndex>
    <numIndex index="2" type="array">
    <numIndex index="0">CD</numIndex>
    <numIndex index="1">product_cd</numIndex>
    </numIndex>
    <numIndex index="3" type="array">
    <numIndex index="0">Pet</numIndex>
    <numIndex index="1">product_pet</numIndex>
    </numIndex>
    <numIndex index="4" type="array">
    <numIndex index="0">Widget</numIndex>
    <numIndex index="1">product_widget</numIndex>
    </numIndex>
    </items>
    <default>0</default>

  4. Now we can save the changes to our class field and map it to the main div with the ID product_ad. Choose ATTRIBUTE "class" (= ) in the drop down before clicking on Set.

Product image

Let's go ahead and create a thumbnail graphic area for the product now. We are going to restrict the size of the graphic to fit our design in the TypoScript this time, and we are going to wrap it in the product link if the image is present. We'll start with basic settings again:

  • Field: field_image
  • Element
  • Title: Product Graphic
  • Element Preset: Image field, fixed W+H

We just set the element preset to be an image with fixed width and height dimensions, so the wizard will fill in some preliminary TypoScript for us if we click on Add. We do want to update the default values a little to set maximum width to 150 pixels and the maximum height to 200 pixels. We can click on the Data processing link on the sidebar to edit the TypoScript code for our field. The TemplaVoila data structure can actually handle all kinds of arbitrary TypoScript code and constants, but we don't always have a reason to play with this. We are just going to update the TypoScript Code text area with our new dimensions to optimize for portrait layouts using some basic TypoScript (see the TSref at http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/current/ for more information):

10 = IMAGE
10.file.XY = 150,200
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.file.maxW = 150
10.file.minW = 150
10.file.maxH = 200
10.file.minH = 200

Again, we are going to wrap the product page link around our image by adding our two lines of TypoScript to the Custom stdWrap text area:

if.isTrue.current = 1
typolink.parameter.field = field_link

After we've saved our changes, we can map our product graphic to the HTML image tag in our template.

Product price

Next, we can add a special field for the price with an automatic currency symbol. We are going to use the US dollar symbol, but we could just as easily use TypoScript to pull the local value for our currency symbol. For now, we need to create the field:

  • Field: field_price
  • Element
  • Title: Price
  • Sample Data: [Price]
  • Element Preset: Plain input field

We are going to update the Custom stdWrap configuration again, but we are going to use it to prepend a currency symbol. Once again, we need to use a TypoScript conditional to make sure that the price exists with data because we never want a missing price to result in a currency symbol sitting by itself on a line. We can test that our price exists and prepend the currency symbol by adding the following to our Custom stdWrap area:

if.isTrue.current = 1
prepend=TEXT
prepend.value=$

A price should be a relatively short field, so we can limit its size in the form. In addition, we can add a checkbox for easy unsetting of the field by updating the form configuration just like the product name that we created earlier:

<type>input</type>
<size>10</size>
<checkbox></checkbox>
<eval>trim</eval>

Finally, we can save our price field and map it to the paragraph tag with the identifier product_price in our HTML template.

Product description

For our product description, we can use a default configuration for the field. Our only customization will be selecting Text area for bodytext as the element preset so that our editors will be inputting multi-line plain text without formatting a rich-text editor of any kind. We can create our new description field with basic settings:

  • Field: field_description
  • Element
  • Title: Product Description
  • Sample Data: [Product description]
  • Element Preset: Text area for bodytext

Go ahead and map the description field to the product_description paragraph tag in the HTML and set the changes.

Text for product link

We are almost done, but we need to have text for the link at the bottom of the product display so the editors can display "Buy now!" or "Click here to learn more". We can create a basic text field, and our only modifications will be wrapping the text in the product display link and limiting the input field to 20 characters in the backend form with the following settings:

  • Field: field_linktext
  • Element
  • Title: Link Text
  • Sample Data: [Link text]
  • Element Preset: Plain input field
  • Custom stdWrap:

    if.isTrue.current = 1
    typolink.parameter.field = field_link

  • Form Configuration:

    <type>input</type>
    <size>20</size>
    <eval>trim</eval>

Map the link text field to the paragraph tag on the bottom of our template with the product_link ID.

Product link

Finally, we are ready to create our link field for the main URL that we will be wrapping around our product name, graphic, and link text at the bottom of the display. First, we'll create the initial field to save our settings. Instead of Attribute or Element, we are going to choose Not mapped in the drop-down on the side. This means that we will not have to map the element to our HTML template, and it makes sense because we're using TypoScript in the data structure to use this element anywhere that we need it. We can create our final field with this configuration:

  • Field: field_link
  • Not mapped
  • Title: URL
  • Element Preset: Link field

The link field does not have to be mapped, so we're done. Click on Save as and create a new content element named Product before saving all of our changes with the CREATE DS / TO button.

Viewing our results

Now, we can go to the Page view in any page in the backend to test out our new flexible content element. Like before, we can just create a new element, choose the Product [Template] content element, and we'll see our own very specialized form based on the data structure we just created:

Now, all of the layout and design is already taken care of; we can just fill in some basic text fields and select a picture of any size to get a uniform product display:

Summary

In this article we have learned various details about Flexible Content Elements(FCEs).


Further resources on this subject:



About the Author :


Jeremy Greenawalt

Jeremy Greenawalt is a full-time developer and part-time writer with close to ten years professional experience in website and application creation. His first love was writing, but programming quickly followed.He is a co-founder of Vintage 56 where he helps develop websites, online shopping carts, web apps, iPhone/iOS apps, and anything else his friends can think up. Jeremy is also the web director of a large ministry, Generals International. Jeremy lives near Dallas, Texas with his wife, Rebekah, and their ever-youthful puppy, Aingeal. He loves spending time at home reading, playing around on the piano, or just relaxing on the couch with his family. You can read more from Jeremy at pocketrevolutionary.com, and you can follow him on Twitter at @jgreenawalt.

Books From Packt


TYPO3 4.2 E-Commerce
TYPO3 4.2 E-Commerce

TYPO3 4.3 Multimedia Cookbook
TYPO3 4.3 Multimedia Cookbook

Apache OfBiz Cookbook
Apache OfBiz Cookbook

CMS Design Using PHP and jQuery
CMS Design Using PHP and jQuery

Mastering phpMyAdmin 3.3.x for Effective MySQL Management
Mastering phpMyAdmin 3.3.x for Effective MySQL Management

Joomla! 1.5 Top Extensions Cookbook
Joomla! 1.5 Top Extensions Cookbook

Drupal 7
Drupal 7

TYPO3: Enterprise Content Management
TYPO3: Enterprise Content Management


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
G
1
W
9
L
4
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software