Okay, so here is how I would approach it:
- Firstly, make an image of a blank table with the correct number of rows and columns, with no data except maybe the column headers, then upload that image to your Cloudinary image library.
- Cloudinary will generate a URL for that, which will be something like:
https://res.cloudinary.com/<your-cloudinary-key>/image/upload/table.png
- I just quickly created one (using HTML Table Styler β¦ CSS Generator | πππ©π§ππππ.ππ’π ), and it looks like this:
- The next thing to do is to start adding the text layers. This is a bit fiddly, and you essentially need to add a separate layer for every cell, but it only needs to be done once.
- After adding a first row of data to that table, I have a URL that looks like this:
https://res.cloudinary.com/<your-cloudinary-key>/image/upload/
l_text:arial_20:Jan%201,g_west,x_40,y_-10/
l_text:arial_20:11%3A45am,g_west,x_160,y_-10/
l_text:arial_20:Oranges,g_west,x_280,y_-10/
l_text:arial_20:Apples,g_west,x_400,y_-10/
table.png
- And that URL returns the following image:
- Rinse, lather repeat until youβve filled all the cells. The tricky part is positioning the text correctly (thatβs what the
g_west,x_40,y_-10etc options do). - Once done, youβll have a URL that you can use in a Glide template column, and then use replacements to dynamically fill the table rows with data.
To give you the idea, here is what the URL looks like for one of those tiles that I showed you earlier:
https://res.cloudinary.com/<key>/upload/w_300,h_200,b_rgb:A83C31/
l_text:arial_18:Productivity,co_white,g_north,y_10/
l_text:arial_16:Boxes,co_white,g_north,y_50,x_20/
l_text:arial_16:Rate,co_white,g_north,y_50,x_80/
l_text:arial_14:YTD,co_white,g_center,y_-10,x_-100/
l_text:arial_14:{ytd-boxes},co_white,g_center,y_-10,x_10/
l_text:arial_14:{ytd-prod},co_white,g_center,y_-10,x_80/
l_text:arial_14:Last%20Month,co_white,g_center,y_20,x_-100/
l_text:arial_14:{last-month-boxes},co_white,g_center,y_20,x_10/
l_text:arial_14:{last-month-prod},co_white,g_center,y_20,x_80/
l_text:arial_14:This%20Month,co_white,g_center,y_50,x_-100/
l_text:arial_14:{this-month-boxes},co_white,g_center,y_50,x_10/
l_text:arial_14:{this-month-prod},co_white,g_center,y_50,x_80/
l_text:arial_12:Last%20Updated%20{updated},co_white,g_west,y_80,x_15/
Port/blank300x300_r86auo.png
And the Glide template column looks like this:
- One thing to watch out for is reserved characters, specifically
, / : _- each of those needs special handling. Refer to this blog post. - And youβll find the Transformation URL Reference guide here.
Hopefully thatβs enough to get you started 