Written by:John Cassel
11/27/2009 9:03 PM RssIcon

Well today I released the Private Assembly version of the HTML Template Repeater module. It is my first offering from Software's Edge. The plan is to release one fully cooked module every other month. Ideas for modules are easy it is the time to build them that I think may be a future issue. My day job is hectic and sometimes I don't even have enough time to even make a blog post so having a goal of 1 every 2 months should help push me to get things done.

Anyway let's talk about the HTML Template Repeater. The module is similar to the Core HTML module in that is allows you to add html to a page in the exact same way as the text/html module. That is where the similarities end. The words Template and Repeater are in the name of the module to highlight the other main features of the module. It is all about the template and it is all about repeating the same template for each data item in your data set.

The template feature is 2 fold. First it allows you to edit the FCK Editor templates and add your own through its editor interface. Second it improves on the tag replacement feature built into the text/html module. The standard tag replace replacement feature is maintained as in the core module. But you can also add your own tags in addition to the ones that are available now. The tags are custom to that module template. The repeater feature lets you create as many unique instances of the template one for each virtual data row you add to the module.

For example say you have 20 images and each will have a small bit of text that should appear next to it. Formatted somewhat like this.

Using the current text/html module you could achieve this in 3 ways; Create a custom module, Use a single text/HTML module and enter the html for each of the 20 images and text into that single module or the 3rd option would be to have a separate text/HTML module for each image + text set.

The first one could be expensive and the second and third are difficult to maintain. Forcing you to either maintain a large piece of HTML or lots of little ones. Ordering of these would be tedious and paging would be a kluge at best. These are the problems that the HTML Template Repeater solves.

With the HTML Template Repeater you get the manageability of a custom module without the cost and you can reuse it for any HTML Configuration. Lets take a look at what the process would be to produce those 20 image+text segments using the HTML Template Repeater.

First Define the template. In this case you would create the HTML for just one of the HTML Segments. You would write HTML something like this.

<p><img width="100" height="100" align="left" alt="" src="image URL here" style="margin-right: 10px;" /></p>

<h3>Type the title here</h3>

<p>Type the text here</p>

Once you have this all we need to do is replace the sections that will change for each segment with a replicable tag. Tags in the HTML Template Repeater are just unique words or phrases you use to name the part of the html to replace with your unique segment data. Each Tag is formatted by placing a "!" on each side of the word or phrase. For example "!Image URL!" would be a good tag to use where you need to replace an image src url with a specific url for the segment image. In our example it would be used like this.

<p><img width="100" height="100" align="left" alt="" src="!Image URL!" style="margin-right: 10px;" /></p>

<h3>Type the title here</h3>

<p>Type the text here</p>

As you can see I update the src value of the image in the above HTML to !Image URL!. This will allow us to replace that part of the html with a value for each segment we want to add to the module. When you use the [Add New Content Item] link or menu item you will be greeted with a data entry form that is specific to the Tags you have created for your template. In this case it would look something like this;

If we add another Tag for the Title, you would have this.


<p><img width="100" height="100" align="left" alt="" src="!Image URL!" style="margin-right: 10px;" /></p>

<h3>!Type the title here!</h3>

<p>Type the text here</p>

Entry form:

As you can see creating the Tags in easy and entering the data is even easier. Once the Template is complete all you have to do now is enter the data. There is also an option in the module to do paging and you can even adjust the order that the items are displayed.

If you enable paging you automatically get a pager at the top and the bottom of the page set. Shown here on a page of 1. The format of the pager can be customized in the module.css

Right now I am making the Private Assembly version available but I plan on making the Source available as well. I would like a chance at working out any issues that users might have before it is just set loose in the wild. So please if you have use for something like this, register and download the package. Please give me any feedback you have. I can't improve it unless I have users that are willing to share their thoughts good or bad.

In my next couple posts I will create some demo videos. The first will be a quick start for using the HTML Template Repeater Module and the second will show some of the more advanced features.


Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Security Code
Enter the code shown above in the box below
Add Comment  Cancel 
Copyright® 2013 Software's Edge inc.
Privacy Statement | Terms Of Use