3 minutes reading time (687 words)

Content Templates - the Joomla Page Builder you didn't know you already had

2024---JCM-Template-content-templates

Why are you using a so-called page builder when Joomla has everything you probably need right in the box? Don't know what I am talking about? Well it's a fairly hidden feature of the TinyMCE editor called Content Templates.

The idea behind a page builder is that you can easily build an article with layouts that are more than simply paragraphs or lists by using some pre-built elements. Examples of this could be a pricing table or a hero section with image. 

You can do all of this and more with Content Templates in Joomla. The difference is that instead of being given a large, but limited, quantity of elements by the author of the page builder you have to create them for yourself. But don't let that put you off as they are extremely easy to create and you have a virtually inexhaustible supply available from all across the internet. 

This is because a Joomla Content Template is pure html and nothing more. You simply save the html in a text file located in your template's html/tinymce folder and they are available to use. Just don't forget to tell the TinyMCE editor plugin which of your site's templates to look for the content templates.

setting the folder in the editor plugin

 

For my sites I typically have four different types of content templates:

  1. Full Page
  2. Partial Page Elements
  3. Buttons 
  4. Repeating Text

Each of these content elements is completely formatted - all I have to do is to change the image and text as appropriate. It's no different to editing an existing article and then saving it as a copy. So if your user can do that, they will be able to use Joomla Content Templates, no matter if they create/edit content on the front end or in the administrator interface as long as the Content Template button is available, or has been added, to the TinyMCE toolbar. 

Creating new Content Templates is currently restricted to those users who have access to the Joomla Template Manager but maybe that will be changed in the future. Prior to Joomla 5.0 the code behind this was provided by TinyMCE but it is now "our" code that we can improve upon.

selecting the Content Template on the TinyMCE Toolbar

 

After you have created your Content Templates you can access them via the stamp button on the TinyMCE toolbar.

The templates are listed in alphabetical order so to make it easier for me to find the one that I want I usually create a dummy template that will load first and act as an index to the different types of Content Templates I have.

 

list of content templates to insert

 

A preview is shown for each Content Template that when selected you can insert into your article and edit the content and images as required. 

Power Tip 1

A content template is just html and the preview will show exactly what will be inserted. But - there is always a but - this Power Tip lets you add additional information to the preview that will not be inserted into the article.

show additional information and instructions

To achieve this you need to wrap the parts of the template that you wish to insert in an additional <div> with a class of "mceTmpl". Anything outside that div will be displayed in the preview only but not inserted.

Power Tip 2

I regularly have some buttons in my content and the markup can be quite complex. For these I have a Content Layout with a special feature so that instead of inserting the layout for the button in to the article and then changing the text I can do it the other way around. I select the text in the article that I want to make into a button and then select the required button template.

show preview of button with preselected text

To achieve this you need to wrap the sample button text in your template with an additional <span> with a class of "selcontent" Anything inside that span will be replaced with the content that you highlighted in the article.

Conclusion

  • unlimited content templates
  • works with all site templates
  • copy to any site
  • zero additional cost
  • an almost no-code solution
  • no dependencies
  • almost no learning curve.
  • zero Joomla upgrade impact
1
Making workflows that work for you
Templates for Joomla - Episode 1: Templates, Frame...
 

Comments 6

Already Registered? Login Here
Eoin on Monday, 20 May 2024 21:02
Wow impressive

You're right, I had no idea about this. What a time saver.

0
You're right, I had no idea about this. What a time saver.
Pat on Wednesday, 12 June 2024 16:55
Who Woulda Thunk It!

I never knew either! Thanks, Brian. I've always rather poo-pooed Tiny MCE, but I have a new respect for it.

0
:o I never knew either! Thanks, Brian. I've always rather poo-pooed Tiny MCE, but I have a new respect for it.
Brian Teeman on Sunday, 16 June 2024 13:39
Learn your tools

To be fair Pat the same feature is available in other editors. The problem is that people make a decision in 1999 and don't re-evaluate it over time.

0
To be fair Pat the same feature is available in other editors. The problem is that people make a decision in 1999 and don't re-evaluate it over time.
Pat on Sunday, 16 June 2024 16:44
Please elaborate.

Please elaborate. I only got in on the Joomla bandwagon in 2006, and yet you said a decision was made in 1999. No matter how much I do in Joomla, there is always more I don't know than I do know.

0
Please elaborate. I only got in on the Joomla bandwagon in 2006, and yet you said a decision was made in 1999. No matter how much I do in Joomla, there is always more I don't know than I do know.
Brian Teeman on Sunday, 30 June 2024 12:10
Times Change

What I meant was that people make a decision that tinymce is rubbish and that they need to use something else and they never revisit that decision to see if the opinion they formed then is still true today

0
What I meant was that people make a decision that tinymce is rubbish and that they need to use something else and they never revisit that decision to see if the opinion they formed then is still true today
Konstantinos Koulaouzidis on Sunday, 30 June 2024 14:27
Killerfeature: moving/dragging visual blocks

Great article, pointing out a very useful and not very known feature we have been using for years. As far as I can tell, this usefulness could be levelled up to a higher sphere, by allowing the visual blocks (if enabled in tiny) to be draggable! I did some research on this a year ago, and found out, that there used to be a tinymce drag helper (https://www.tiny.cloud/docs-4x/api/tinymce.ui/tinymce.ui.draghelper/). I did try my luck, but there is no useful info/docs, and tiny support was also not helpful at all. Any idea if this is worth to pursue, or possible to be developed at all?

0
Great article, pointing out a very useful and not very known feature we have been using for years. As far as I can tell, this usefulness could be levelled up to a higher sphere, by allowing the visual blocks (if enabled in tiny) to be draggable! I did some research on this a year ago, and found out, that there used to be a tinymce drag helper (https://www.tiny.cloud/docs-4x/api/tinymce.ui/tinymce.ui.draghelper/). I did try my luck, but there is no useful info/docs, and tiny support was also not helpful at all. Any idea if this is worth to pursue, or possible to be developed at all?

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/