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:
| Field | Value |
| Find: | (.+jpg) |
| Replace With: | <img src="images/tabulizer/demo/\1" /> |
| Field | Value |
| 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:
| Description | Image |
| A nice car |  |
| A pretty house |  |
| An awesome guitar |  |
Here is the input table without the replacement rule:
| Description | Image |
| A nice car | car.jpg |
| A pretty house | house.gif |
| An awesome guitar | guitar.png |
Here are the replacement fields used in the previous table:
| Field | Value |
| 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> |
| Field | Value |
| 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.