Template FLEXIcontent - Part 1 : The structure

Understanding the Templating in FLEXIcontent. With code exemple and description !

FLEXIcontent is now to the 1.5.x version. Since the BETA 4 version, the template system has evolved, even if this is simple, I decided to make a tutorial to help you, in your first step, to create a template for "the indispensable CCK component" FLEXIcontent.

For this example, I will assume that we want to create content to be able to reference some football stadiums, and yes I'm a football fan.

We have for objective to display the following fields :

- Text & Textarea: the coordinates of the stadium
- Date: the date of construction
- Image: a stadium's picture
- File: the stand's plan
- Select: the official anthem at the entrance of the players
- Select Multiple: list of partners
- Text + plugin: a google map to locate it
- Checkbox images: a field to display the stade's services
- Weblink: a link to the club's official website
- Email: email address to the official contact ...

 

Of course you can adapt this example to your needs  !

  • Part 1 : The new template structure
  • Part 2 : Fields Type
  • Part 3 : Entering data into content
  • Part 4 : The content's template

 

This tutorial was realized under Joomla 1.5.15 and FLEXIcontent BETA 5.

The new template structure

Initial Parameters

Before going into the details of creating the template, you must first make sure to set correctly FLEXIcontent. I add a root category to the default settings that I called "Stades". I then add my type with the default settings that I called "Stade".

arborescence


Since the FLEXIcontent BETA 4, the template's path is :  /components/com_flexicontent/templates/

So I will create here a new folder I call "stade". Then I create blank files in order to create the same tree (see above), which we will fill in proportion to our state of progress.

 

Item.xml

It's this file who will determine the areas and parameters of the content's template.

 

 Maxime DANJOU
 www.netassopro.com
 maxime.danjou @netassopro.com
 GPLv2
 1.0
 18 janvier 2009
 Template pour afficher les informations sur un stade

 

  Then, it's possible to determine some parameters that we can be easily changed later through the templates's parameters, available in the back office of FLEXIcontent. In my case I will let the option to the user whether to display the GoogleMap associated with the stade. (Ideally I should have used the language file en-FR.com_flexicontent.ini, but hey I have no plans to make mutli-langage in this tutorial, maybe the next time ...)

NoYes

 

I determine the areas which I can add some différents fields.

 

 entete
 adresse
 contact
 image
 gmap
 description
 informations
 bas

 

In the last part of my file, I indicate the path of the css file that will be used in my template. If I  needed, I could also upload files Javascript ...

css/item.css

 

 

category.xml

It's this file who will determine the areas and settings of the template for displaying a list of contents.

I choose to view "stades" in list into a table (I would do another tutorial to show the display in blog). The beginning of the file is identical to item.xml and the rest is not very complicated because all fields will be in a table, so there is only one area. Also, I do not have to add parameters:

 

tableau


css/category.css



 

category.png and item.png

These two files are just meant to show the user how areas are positioned in the template. I create two images of 250 × 280 to properly represent my template.

itemcategory

 

item.php

This file is the template that will display the content, in a first part we will inform only the html code in order to determine our areas.

 

 
 
 
 
 
 
 
 

 

category.php, category_alpha.php, category_category.php, category_category.php, category_items.php, category_subcategory.php

I will use all this files to show my "stades" in a list, here is the usefulness of each.

  • catetegory.php: main template file is called by FLEXIcontent, it shows only the main title bar icon (print, pdf, mail) and loads the other files in the template
  • category_alpha.php: it displays an alphanumeric index that allows you to easily find content in a list according to its first character
  • category_category.php: This file displays information about the category that is displayed (image and description)
  • category_items.php: lists the contents as a table or blog (in my case it will be a table)
  • category_subcategory.php: displays the list of subcategories of the category being displayed with the option to show the number of content

I'll just make a single copy of the original files contained in the template "default", I will detail in Part 4 of my tutorial.

css/category.css, css/item.css

When loading a template, his css file is loaded automatically, category.css for displaying in category and item.css for displaying a single content. I leave the category.css file empty and I fill item.css very simply as follows:
 
 
div.stade_contenu{
 width:740px;
 overflow:hidden;
}
div.stade_entete{
 width:100%;
 height:30px;
 overflow:hidden;
}
div.stade_adresse{
 width:50%;
 height:100px;
 overflow:hidden;
}
div.stade_contact{
 width:50%;
 height:100px;
 overflow:hidden;
}
div.stade_image{
 float:left;
 width:50%;
 height:200px;
 overflow:hidden;
}
div.stade_description{
 width:50%;
 height:100px;
 overflow:hidden;
}
div.stade_informations{
 width:50%;
 height:100px;
 overflow:hidden;
}
div.stade_gmap{
 float:left;
 width:50%;
 height:200px;
 overflow:hidden;
}
div.stade_bas{
 clear:both;
 width:100%;
 height:30px;
 overflow:hidden;
}

 

 Setting up the template
 

In order to install my new template, I just copy the directory "stade" and all its contents, that I create previously, on my site in the following directory: components / com_flexicontent / templates
Once the files are copied, I can go to the back office of FLEXIcontent in the templates section to verify if my template is correctly installed.

liste_templates1
 

Additional configuration

To complete the installation and the configuration of our new template, I now assign it to my category and my type.

So I'm going in the back office FLEXIcontent, I click on "type" and then "stade". We will now assign a default template for each content which will be created with the"stade", then I change the value of template's content choosing from the list "stade". I note that I have the option "Settings templates, parameters: stade" that turns on and I find the option to display the GoogleMap that appears, its value is at false, I switch it to true.

Now I need to assign my template to display a view category, always in the back office, I head into "categories" and then I return to my editing class stade. In the "Standard Settings", I select "stade" in the option "template category", then I save the configuration. In my setup, there is no option that is assign to this template.

To enhance a little bit the tutorial, I will also add sub-categories that I call "East", "North and  Center", "West" and "South". When creating each of thess categories, I select the option "Copy all parameters: stades" and "Parent Category: stades" as well.

liste_categorie

 

 

That all for this first tutorial, next tutorial here : Part 2 : The field's types available to create your template

I hope you enjoyed this tutorial, feel free to discussing it in the forum, in the appropiate section.

 

Newsletter

Login

Live Support