How to insert images into your HTML table (the right way!)

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 <img src="images/tabulizer/demo/car.jpg">

But there is another approach and this is the use of the following replacement rule:

FieldValue
Find:(.+jpg)
Replace With:<img src="images/tabulizer/demo/\1" />
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 carcar.jpg
A pretty househouse.gif
An awesome guitarguitar.png
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:<a class="\1" data-lightbox="\1" href="images/tabulizer/demo/\1"><img class="example-image" alt="\1" src="images/tabulizer/demo/\1"></a>
or after base64 encoding, if you are working directly on the Tabulizer's back-end environment:
FieldValue
Find:KC4ranBnKQ==
Replace With:PGEgY2xhc3M9IlwxIiBkYXRhLWxpZ2h0Ym94PSJcMSIgaHJlZj0iaW1hZ2VzL3RhYnVsaXplci9kZW1vL1wxIj48aW1nIGNsYXNzPSJleGFtcGxlLWltYWdlIiBhbHQ9IlwxIiBzcmM9ImltYWdlcy90YWJ1bGl6ZXIvZGVtby9cMSI+PC9hPg==

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.
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.