How do I add images to a WordPress table?

You add images to a WordPress table in wpDataTables with an image column, which renders pictures either in full size or as a thumbnail that links to the full-size image. “Image” link columns are used to render images in the table, either in full size, or as a link from a thumbnail to a full size image.

How does it work? Step-by-step

An image column reads the cell content and, using an optional two-stick separator, decides which image to show as a thumbnail and which to open at full size.

• Rendering rules: If the content of the cells contains a combination of “two sticks” – || – everything to the left of this combination is used as a link to the thumbnail, and everything to the right as a link to the full image size. If the “||” combination is not found in the content, the entire content will be used as a link to a full-size image.
• Sorting rules: alphabetical.
• Applicable filter types: text.
• Editor input type: One-line edit, Attachment

What should I keep in mind with image columns?

Because images are rendered as HTML links, note these points about sorting, thumbnails and lightboxes.

• Sometimes some issues may appear when you’re sorting on image columns, since it’s done alphabetically, and alphabetic sorting of HTML typically doesn’t make sense.
• Please note that the plugin does not create thumbnails (at least for the moment), so you will need to take care of this yourself.
• If you would like to open full-size images in lightbox, you can use a plugin for that, e.g. WP Lightbox 2 (please note that this is available for tables that aren’t editable)

The image column shows each picture directly in the row. See the “Photo” column in this table.

The documentation below covers the data sources and column types most often used with image columns.

• Create editable tables and fill in the data manually
• Create non-editable tables from Excel files
• Create non-editable tables from Google Spreadsheets
• String columns
• Integer columns
• Float columns
• Date columns
• DateTime columns
• Time columns
• Image columns
• URL link columns
• Currency/price columns, and other columns with labels
• Formula (calculated) columns
• Coloring and styling columns
• Hiding columns