Create a custom template (for your article layout)

The default templates are only there to make F2C work immediately. Follow these steps to create, upload and link to your own custom article templates. From here on your articles will always look the same and the way you want them to look!

IMPORTANT: At this point we assume you have created your first Content Type and added some custom fields to your submission form. Adding an article through the F2C Article Manager works but you get an article with "This is the default layout ...."

The default template .. to show F2C works!

While you were creating a submission form and adding the different fields, F2C generated a default template (for both the intro and the main body). The unique names of the fields were inserted into the default template as Template Parameters.

Form2Content also by default links to these templates (in the content type settings, image 1), we will change those links later on.

DO NOT EDIT THE DEFAULT TEMPLATES UNLESS YOU HAVE SWITCHED OFF THE CREATE DEFAULT TEMPLATE SETTING IN THE CONFIGURATION!

Step 1: Create your two template files

Create two files (.tpl or .htm(l)) with any name on your computer. The first will be the template for your introduction text (which you see in Joomla in the category blog layout) and the second for the main body (Joomla article). Preferable extension is .tpl.

custom_intro.tpl
custom_main.tpl

NOTE: If you leave the second template empty or don't link to it, it will have the same effect as when you DON'T use a read more tag in your Joomla article.

Step 2: Add your layout, plugins and template parameters

Your custom templates need to show the data from your custom forms. This is done using Template Parameters.

Edit the files with a HTML editor and add your layout. You should now add your custom fields to your template. Remember, use the field names in CAPITALS.

Example:

Let's assume we build our form with two text area fields called intro_text and main_text and an image field called intro_image (set to RAW output!!).

Intro template could be as simple as:

<div class="f2c_intro">
{if $INTRO_IMAGE}
<img src="/{$INTRO_IMAGE}" align="right" alt="{$JOOMLA_TITLE}" />
{/if}
<p>{$INTRO_TEXT}</p>
</div>

And the main template:

{if $MAIN_TEXT}
<div class="f2c_main">
<p>{$MAIN_TEXT}</p>
</div>
{/if}

The Smarty IF statements are added so that if NO image is added it won't show and if NO main text is added there won't be a read more link (since the template file will be completely empty!)

Step 3: Save the template files & upload to your website

Using the template manager (image 3) to upload your template files.

Alternatively: Use a FTP/HTML editor to upload your template files and save them in the following folder.

/media/com_form2content/templates/

Step 4: Using/linking to your custom templates

Go back to the Content Type configuration and select the newly generated template files to be used as the default templates (image 1).

Menu: Components => Form2Content => Content Type Manager , select your content type and edit.

SAVE your changes.

Step 5: Update the templates in existing F2C articles

If you change the default used template files in the content type configuration and there are F2C articles using the old template, make sure to edit those articles in the back-end and select the new templates to be used for rendering (image 2).

If you save your NEW template with the same name of your existing template you don't need to update the articles you already made but just refresh them via the F2C Article manager (select all, click refresh).