Tables with images and hyperlinks

Hi all, what recommendations do you have for a simple table that can be easily changed with new rows, inserting rows, deleting rows, so it can be kept in alphabetical order where the row cells can contain text, images and hyperlinks?

I should have added compatibility with TotalCMS if possible but not essential

@jwDave If I had a table or tables where I was going to be changing the data frequently then I would look for a table stack that read CSV files. There are a few of them out there.

For creating your CSV table I’d recommend the app Easy CSV Editor. Not very expensive and you can get it at the App Store. I believe it’s something like $6. More here: Easy CSV Editor – VDT Labs

I don’t know if you are already familiar with putting “stuff” directly on your website through something like Transmit. If you are then you’re in great shape: create/edit CSV file, put onto server, connect CSV file to Table stack.

You can create CSV files in Excel or Numbers but I find that more cumbersome. And sometimes Excel doesn’t export CSV in the right format.

It’s also easy to add hyperlinks and images: though you’d do so via HTML (simple copy/paste using the appropriate code).

In this case images could be trickier. Easy to add via HTML, but it’s the prep of the images that’s important: making sure they are all of the same size.

CSV files are small, lightweight, easy to edit and to upload to your server.

1 Like

Hi @Mathew , just to say that LibreOffice (free) allows creating CSV files much easier than Excel or Page.

Thanks all, I will check these options out.

Since you’re on a Mac, Numbers does CSV exports as well.

Of course I meant Numbers instead of Pages in my recent post. Sorry

As far as I can see these solutions do not permit an image in the table cells which is essential for me. Or have I missed something? Interestingly I am on the latest version of Monterey on a brand new MacBook Pro with the latest version of Office 365 and if you select a cell in Excell and go to insert a picture from file it crashes my Mac big time - every time!

@jwDave I don’t know about the crashing, but the approach of dragging images into Excel or Numbers or … whatever won’t work well.

The key is to have prepped the images (size, etc.) and then upload to a specific folder on your server. Copy the link to an image. Then insert as a link into your spreadsheet. The general link format for images is given below.

<img src="full-url-address" alt="text-description" width="100%" />

You don’t need the width part if you want to exclude.

Great thank you. I get it now!

Sorry to be a pain, is Table Stack the same as Table Builder? There seem to be a few Table ‘something’ stacks - but none just called ‘Table’ or ‘Table stack’?

@jwDave There are several table stacks. You need to find one that will work with CSV files. Not all do. Below are links to a couple of such stacks, but there are others. I’m linking to these ones at Stacks4Stacks because you can demo, or try them out, first before purchasing.

and

Note: I think TableBuilder used to accept CSV files but it seems it no longer does. Or my memory is getting worse!

and this one doesn’t work with CSV but still seems interesting:

1 Like

If you use one of the Frameworks (Foundry, Foundation, Source, etc.) then it may already come with a table stack that works with CSVs.

TableBuilder has never supported CSV data. The code architecture could never support it, while there were features like merged cells. That’s why I created the CSVtoTable stack as an alternative.

Where are you reading this or who told you that CSV is not supported in FlatPack? It’s one of the principle features of this stack!!

Thanks for the help, I cracked the add image to my csv file, how do I add a hyperlink? If possible can I add a hyperlink to the image?

You would use an HTML anchor element

<a href="https://www.example.com/">The text you want to be clicked</a>

More here:

The Anchor element - HTML: HyperText Markup Language | MDN (mozilla.org)

1 Like

Many thanks, works a treat.

@jwDave Yes, you can add link to an image. I think the page @teefers provided explains that. If you PM me then I can send you an example CSV file. The trickiest part, frankly, are the images. If they have already been prepped so they are the same size you’ll be in great shape.

Basic CSV file (note: some links to images in this case are very long)

and the result using very standard format in CSV to Table stack:

In this example all the images were not prepped ahead of time. So while they are all the same size, this means some are distorted when forcing them to be the same size.

1 Like

Using a CSV approach means when you need to change the table then do so in Numbers, Easy CSV Editor or whatever app you want. Then upload. No need to edit at all in RW unless you need to change formatting in some way. But updates to content are super simple.

1 Like

Or, edit the CSV directly on the server with Repository Stack.

1 Like