Please wait...

Adding images to tables in WordPress

Video versionA video overview of image column in wpDataTables

Image columns in wpDataTablesImage column type and when to use it

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.

  • 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:

    http://domain.com/thumb.png||http://domain.com/fullsize.png
    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
  • Issues to note:
    • 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)

ExampleA demo table with Image columns

See the “Photo” column in this table.

Do you have the best

essential plugins installed?
Grab the best 46 plugins. Tested and sorted.

Plugins for SEO, Caching, Security, Design and UX, Stats & analytics, Social sharing. Only the best ones.

By clicking "subscribe" you consent that the information you provide via this form will be securely processed and stored in compliance with EU privacy laws (GDPR).

Thank you for subscribing!

Please check your inbox to download the WordPress goodies.