Today I learned about a TYPO3 extension that aims to let you create your own content elements easily. It's called Mask. And it also allows you to create page templates. The description in the template repository says you can do this all with a drag & drop system. I tried it out.

There's a lot of options for each field, too. There's a tab in the field creation tool that allows you to customize the form validation of the fields you add to your content element.

For instance, the types of validation you can use include (but are not limited to):

  • Field is Required
  • Only "a-z A-Z" characters
  • Field has to be unique in table
  • Only domain names such as “example.com”
  • Don't allow spaces

I counted about 15 types of validation types in total. It's pretty complete.

There's an "Extended" tab that lets you do even more things with the fields you create in your extension. You can do things like "Activate HTML5-autocomplete", or convert the field to an MD5 hash. 

There are lots of options for what Mask lets you do with the fields you create in your content elements.

On some field types, there is the option to use joins on the database. There are options related to using files with fields. There is a wide range of options that should allow you to create any type of field with any requirements.

Installation

I didn't thoroughly read the manual at first, and I just went ahead and installed the extension from the repository. 

After you install Mask, there will be a new module in the TYPO3 back end under the ADMIN TOOLS section. One time that I tried installing Mask, I didn't see this module until I logged out of TYPO3 and then logged back in again. 

Include static templates

Before any of the content elements created by Mask can show up on your web site, the static templates, fluid_styled_content and mask, need to be included in your site template.

The fluid_styled_content template needs to be installed first, before the mask template.

End of installation

There are some other configuration options for Mask that can be modified but which are not necessary to start making content elements. The manual for the extension talks more about the configuration options available. These options mainly have to do with path names related to the various files related to the mask extension.

Start creating a content element.

To start creating a content element, click on the "Mask" module located in the "ADMIN TOOLS" section of the sidebar in the TYPO3 back end.

First run

The very first time you use Mask, you'll see two error messages which say that there are two directories that need to be created. Clicking the "Create missing directories" button will create these directories for you.

Creating a content element

The wizard is pretty cool. You'll see an empty list where all the content elements you create will be shown. 

If you go ahead and click the "+" button, you can create your first content element.

Mask shows you a nice form where you can enter all of the information about your custom made content element. You can choose an icon for your content element using FontAwesome icons, and you get to choose a color for your icon.

Underneath where you add the basic information for your content element, there's a nice selection of fields to choose from which you can add to your content element. You just click a "+" sign next to the field type that you want to add and it adds it. Fields can be rearranged using a drag & drop interface.

Front end rendering of your content element

Every content element needs to be rendered in some way in the front end. I noticed that if you click on the "</>" icon that is displayed next to your content element, you can view an automatically generated fluid template for your content element.

Below you can see the template that the Mask extension created for my generic content element.

<f:if condition="{data.tx_mask_personname}">
{data.tx_mask_personname}<br />
</f:if>

<f:if condition="{data.tx_mask_birthdate}">
<f:format.date format="d.m.Y">{data.tx_mask_birthdate}</f:format.date><br />
</f:if>

<f:if condition="{data.tx_mask_webpage}">
<f:link.page pageUid="{data.tx_mask_webpage}">{data.tx_mask_webpage}</f:link.page><br />
</f:if>

<f:if condition="{data.tx_mask_sex}">
<f:switch expression="{data.tx_mask_sex}">
  <f:case value="1">Value is: 1</f:case>
  <f:case value="2">Value is: 2</f:case>
  <f:case value="3">Value is: 3</f:case>
</f:switch><br />
</f:if>

<f:if condition="{data.tx_mask_biography}">
<f:format.html parseFuncTSPath="lib.parseFunc_RTE">{data.tx_mask_biography}</f:format.html><br />
</f:if>

<f:if condition="{data.tx_mask_thefile}">
<f:for each="{data.tx_mask_thefile}" as="file">
  <f:image image="{file}" alt="{file.alternative}" title="{file.title}" width="200" /><br />
  {file.description} / {file.identifier}<br />
</f:for>
</f:if>


Trying out a newly created content element

To try out my content element was easy. Mask takes care of everything needed to make your content elements that you create show up in the New Content Element Wizard. 

Everything about my newly created content element worked properly. There were no errors with anything having to do with the form. It was perfect. I entered all of my information and saved it.

Even the file upload part worked perfectly.

Viewing the content element in the frontend

I did notice that when I tried to view my new content element in the frontend, only the first field showed up. None of the other fields were shown in the frontend. This probably means that the example fluid template that Mask creates needs modifications to work properly. 

Actually, I found out that the example template that was created wasn't saved for some reason. I think it's only saved the first time you save your content elemrent, but I clicked save after creating the first field and my example template only included the first field. 

So, what I did was I edited the saved template in /fileadmin/templates/content. This is the template that is automatically created by the Mask extension - but remember that the HTML template is written only on the first save. If you add fields after the first save, it won't write them to the file but you can see an example template with all of your newly created fields made since the first save if you click on the code ("</>") icon next to your content element in the Mask backend module.

So I went back to the "Mask" module, and I clicked the "</>" icon for my content element, and it showed me the HTML and fluid code that I needed to render my new content element in the frontend.

I just copied that and then replaced the content of the automatically saved version of the Fluid/HTML template that Mask had created in /fileadmin/templates/content/

Now my content element works perfectly

After pasting the template example into my template, I cleared my TYPO3 frontend cache and reloaded the page with my new content element on it. And everything looked fine. All of the fields were there.

This is by far one of the coolest, fun, and most useful extensions I've seen for TYPO3. It had me a little confused when only fields created before the first save showed up in the frontend. But I can overlook that. Everything else about this extension is completely functional and the process of creating content elements for TYPO3 is streamlined with the Mask extension.