# Table as image URL **URL:** \ **Category:** Ask for Help\ **Created:** [September 20, 2021, 4:58pm UTC](https://community.glideapps.com/t/table-as-image-url/32047 "2021-09-20T16:58:33Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\ **Post date:** [September 20, 2021, 4:58pm UTC](https://community.glideapps.com/t/table-as-image-url/32047/1 "2021-09-20T16:58:34Z")
Does anyone know how I can get something similar to [quickchart.io](http://quickchart.io) but for HTML tables? I would like to display it in a card view. I tried GraphViz but its not the best design I have seen… ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [September 21, 2021, 1:50am UTC](https://community.glideapps.com/t/table-as-image-url/32047/2 "2021-09-21T01:50:26Z")
> [@Lin\_Altshuler](#): > > Does anyone know how I can get something similar to [quickchart.io](http://quickchart.io) but for HTML tables? Are you looking for something that returns an HTML table as an image? ---
**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\ **Post date:** [September 21, 2021, 7:40am UTC](https://community.glideapps.com/t/table-as-image-url/32047/3 "2021-09-21T07:40:04Z")
Yes ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [September 21, 2021, 7:51am UTC](https://community.glideapps.com/t/table-as-image-url/32047/4 "2021-09-21T07:51:02Z")
Are the number of rows and columns fixed, or dynamic? If fixed, it would be quite easy to do this with Cloudinary. You’d basically have the table outline as a template image, and then dynamically overlay the values. I’ve done something very similar to this recently, see following example: ![Screen Shot 2021-09-21 at 3.45.57 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/6/160766db38988283418161be4aeaff12c9a5610f.jpeg) The 4 red squares in that are an inline list using a tiles layout. The image is just a blank image, and the text is dynamically added using cloudinary. If the number of rows and/or columns is dynamic, it would still be possible - but quite a bit more of a challenge (and maybe not worth the effort). ---
**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\ **Post date:** [September 21, 2021, 7:53am UTC](https://community.glideapps.com/t/table-as-image-url/32047/5 "2021-09-21T07:53:04Z")
They are fixed. This is great! Thank you. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [September 21, 2021, 7:57am UTC](https://community.glideapps.com/t/table-as-image-url/32047/6 "2021-09-21T07:57:01Z")
Cool. If you decide to use this method and need any help, just let me know. ---
**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\ **Post date:** [September 21, 2021, 11:55am UTC](https://community.glideapps.com/t/table-as-image-url/32047/7 "2021-09-21T11:55:37Z")
Thank you. I think I do need help. I signed up to Cloudinary. Do I need to install SDK? How? Now what? I’m lost ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [September 21, 2021, 12:09pm UTC](https://community.glideapps.com/t/table-as-image-url/32047/8 "2021-09-21T12:09:47Z")
Oh… yeah if you’ve never used Cloudinary before then there is a bit of an intial learning curve. I found it quite overwhelming at first. Do you have a mockup of what the table should look like? Maybe I can give you a kick start. (No SDK required) ---
**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\ **Post date:** [September 21, 2021, 2:46pm UTC](https://community.glideapps.com/t/table-as-image-url/32047/9 "2021-09-21T14:46:06Z")
Not really, I still need to play around with it to see what I need exactly. I just need to figure out where is the HTML part and how I send the data. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [September 21, 2021, 3:38pm UTC](https://community.glideapps.com/t/table-as-image-url/32047/10 "2021-09-21T15:38:40Z")
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: ```auto https://res.cloudinary.com//image/upload/table.png ``` - I just quickly created one (using [HTML Table Styler ▦ CSS Generator | 𝗗𝗜𝗩𝗧𝗔𝗕𝗟𝗘.𝗖𝗢𝗠](https://divtable.com/table-styler/)), and it looks like this: ![Screen Shot 2021-09-21 at 10.54.39 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/c/8c7d021fddd984679b60bf9dbe0651dec6cd7232.png) - 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: ```auto https://res.cloudinary.com//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: ![Screen Shot 2021-09-21 at 11.24.11 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/5/9512947e0173f3d75a89c222ef853605f1d5013b.png) - 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_-10` etc 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: ```auto https://res.cloudinary.com//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: ![Screen Shot 2021-09-21 at 11.32.12 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c943e3d267dd71cb1a89f94925356a0b0b943a06.png) - One thing to watch out for is reserved characters, specifically `, / : _` - each of those needs special handling. Refer to [this blog post](https://support.cloudinary.com/hc/en-us/articles/202521512-How-to-add-a-slash-character-or-any-other-special-characters-in-text-overlays-). - And you’ll find the Transformation URL Reference guide [here](https://cloudinary.com/documentation/transformation_reference). Hopefully that’s enough to get you started 😉 ---
**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\ **Post date:** [September 21, 2021, 5:49pm UTC](https://community.glideapps.com/t/table-as-image-url/32047/11 "2021-09-21T17:49:19Z")
@Darren_Murphy cool post. Lots of details and shows what cloudinary can do. It would be nice though if something like this could be done natively in glide. Great job👍 ---
**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\ **Post date:** [September 23, 2021, 4:04am UTC](https://community.glideapps.com/t/table-as-image-url/32047/12 "2021-09-23T04:04:07Z")
This looks exactly like what I needed. Thank you! ---
**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\ **Post date:** [January 17, 2024, 4:50pm UTC](https://community.glideapps.com/t/table-as-image-url/32047/13 "2024-01-17T16:50:23Z")