Joomla Tabulizer

broken image


Joomla Tabulizer

Create professional looking tables with our templates, wizard for Joomla, Wordpress or Standalone sites. Tabulizer.com - Advanced Online HTML/CSS Table Template Generator with CSS3 and HTML5 support. Video tutorial on how to make a Joomla (or Wordpress) table responsive with a simple table rule. You can add other rules in similar way for pagination, sorti. Video tutorial on how to make a Joomla (or Wordpress) table responsive with a simple table rule. You can add other rules in similar way for pagination, sorti.

There are many ways to add images to your table, but in this tutorial we will discuss the use of replacement rules that are unique to Tabulizer. This process is highly recommended as it can save it a lot of time and it's easier to maintain.

Joomla Tabulizer

As you probably already know, with Tabulizer you can add replacement rules that will replace some text of your table with another. Like every other rule, you can specify the element on which the rule will be applied and the range, e.g. the first row, the last column, cells that contain the key phrase 'Jazz' all the table, etc.

What you may not know is that the arguments for the replacement rule are not plain text, but rather regular expression that follow the syntax used by ereg_replace. This gives us the extra power that we will need for our example. Let's assume that we want to add in our table a few selected images that are stored in the /images/tabulizer/demo folder of our web server. The most straightforward approach is to create the HTML table and then add the images using the editor's button for inserting media/images into your article/post. This is acceptable when the number of images is small and when the table is created statically, because if it's created dynamically via a data source then you don't have access to the produced HTML code. The other approach is to construct the image tag and put it in the cell that you want the image to appear. For instance, if the image file is car.jpg the related image tag is

But there is another approach and this is the use of the following replacement rule:
FieldValue
Find:(.+jpg)
Replace With:
or after base64 encoding, if you are working directly on the Tabulizer's back-end environment:
FieldValue
Find:KC4ranBnKQ
Replace With:PGltZyBzcmM9ImltYWdlcy90YWJ1bGl6ZXIvZGVtby9cMSIgLz4=

If you apply the rule to the whole table, all jpg images will be replace with the appropriate HTML image tag that will point to the /images/tabulizer/demo folder. Of course, there is nothing special about this folder and you can use any other folder you with. You can even make more advanced replacement rules and not only construct automatically the image tag but also add lightbox functionality as shown in the table below:
DescriptionImage
A nice car
A pretty house
An awesome guitar
Click on any image for the lightbox to appear.
Here is the input table without the replacement rule:
Joomla tabulizer vs
Joomla tabulizer tutorial
DescriptionImage
A nice carcar.jpg
A pretty househouse.gif
An awesome guitarguitar.png

Here are the replacement fields used in the previous table:
FieldValue
Find:(.+jpg)
Replace With:

Joomla Tabulizer Extension

or after base64 encoding, if you are working directly on the Tabulizer's back-end environment:
FieldValue
Find:KC4ranBnKQ
Replace With:PGEgY2xhc3M9IlwxIiBkYXRhLWxpZ2h0Ym94PSJcMSIgaHJlZj0iaW1hZ2VzL3RhYnVsaXplci9kZW1vL1wxIj48aW1nIGNsYXNzPSJleGFtcGxlLWltYWdlIiBhbHQ9IlwxIiBzcmM9ImltYWdlcy90YWJ1bGl6ZXIvZGVtby9cMSI+PC9hPg
Joomla Tabulizer

Create professional looking tables with our templates, wizard for Joomla, Wordpress or Standalone sites. Tabulizer.com - Advanced Online HTML/CSS Table Template Generator with CSS3 and HTML5 support. Video tutorial on how to make a Joomla (or Wordpress) table responsive with a simple table rule. You can add other rules in similar way for pagination, sorti. Video tutorial on how to make a Joomla (or Wordpress) table responsive with a simple table rule. You can add other rules in similar way for pagination, sorti.

There are many ways to add images to your table, but in this tutorial we will discuss the use of replacement rules that are unique to Tabulizer. This process is highly recommended as it can save it a lot of time and it's easier to maintain.

As you probably already know, with Tabulizer you can add replacement rules that will replace some text of your table with another. Like every other rule, you can specify the element on which the rule will be applied and the range, e.g. the first row, the last column, cells that contain the key phrase 'Jazz' all the table, etc.

What you may not know is that the arguments for the replacement rule are not plain text, but rather regular expression that follow the syntax used by ereg_replace. This gives us the extra power that we will need for our example. Let's assume that we want to add in our table a few selected images that are stored in the /images/tabulizer/demo folder of our web server. The most straightforward approach is to create the HTML table and then add the images using the editor's button for inserting media/images into your article/post. This is acceptable when the number of images is small and when the table is created statically, because if it's created dynamically via a data source then you don't have access to the produced HTML code. The other approach is to construct the image tag and put it in the cell that you want the image to appear. For instance, if the image file is car.jpg the related image tag is

But there is another approach and this is the use of the following replacement rule:
FieldValue
Find:(.+jpg)
Replace With:
or after base64 encoding, if you are working directly on the Tabulizer's back-end environment:
FieldValue
Find:KC4ranBnKQ
Replace With:PGltZyBzcmM9ImltYWdlcy90YWJ1bGl6ZXIvZGVtby9cMSIgLz4=

If you apply the rule to the whole table, all jpg images will be replace with the appropriate HTML image tag that will point to the /images/tabulizer/demo folder. Of course, there is nothing special about this folder and you can use any other folder you with. You can even make more advanced replacement rules and not only construct automatically the image tag but also add lightbox functionality as shown in the table below:
DescriptionImage
A nice car
A pretty house
An awesome guitar
Click on any image for the lightbox to appear.
Here is the input table without the replacement rule:
DescriptionImage
A nice carcar.jpg
A pretty househouse.gif
An awesome guitarguitar.png

Here are the replacement fields used in the previous table:
FieldValue
Find:(.+jpg)
Replace With:

Joomla Tabulizer Extension

or after base64 encoding, if you are working directly on the Tabulizer's back-end environment:
FieldValue
Find:KC4ranBnKQ
Replace With:PGEgY2xhc3M9IlwxIiBkYXRhLWxpZ2h0Ym94PSJcMSIgaHJlZj0iaW1hZ2VzL3RhYnVsaXplci9kZW1vL1wxIj48aW1nIGNsYXNzPSJleGFtcGxlLWltYWdlIiBhbHQ9IlwxIiBzcmM9ImltYWdlcy90YWJ1bGl6ZXIvZGVtby9cMSI+PC9hPg

Joomla Tabulizer Login

Since this replace rule covers only image files with the jpg extension, you can add two more rules for the gif and png or you can combine them into a single replacement rule if you adjust the 'replace with' regular expression.

You can download the ruleset archive used in this tutorial by clicking here. You can also examine a simpler case with image replacement rule done with the online wizard. Click here to preview the simple community ruleset built with the online wizard.

Joomla Tabulizer Vs

If you are using an Excel file as your input, you can insert the images directly into the Excel file and simply check the Read Images importation option. Nevertheless, as the size of the embedded images may increase significantly the total size of the Excel file (therefore it's processing time), it's not recommended for new files where you could simple add the filename instead of the actual image file.




broken image