If you care about making your WordPress data tables more user-friendly and dynamic, adding multimedia is a great way to spice things up! You can use images in your columns or rows to visualize products, services or add images as CTA buttons linked-to URLs. 

Your visitors and customers can make an informed decision using data table visualizations and action images. It reduces the bounce rate from your page and increases conversion.

Ninja Tables is a unique WordPress table plugin that comes with copious multimedia functionality. This post will cover how you can add media to WordPress tables using Ninja Tables.

Why use Ninja Tables multimedia feature

Adding media to a table in Ninja Tables is simple and fast. You can easily add images to your table columns and rows, and show image buttons. 

Let’s say an electric product seller wants to showcase his products online in Ninja Tables. To make things simple for customers, he can add tabular displays for the product image, name, price, and the “Buy Now” button.

The “Buy Now” can be an image button with a “Link to URL”. Users can add URLs to “Buy Now” images using them as CTA. Here’s a screenshot of our example table.

media table by Ninja Tables
Table with media

Before getting into the details of adding media to WordPress tables, here’s a video tutorial for Ninja Tables.

How to add media to WordPress tables: Ninja Tables

You can add images into your WordPress table’s columns and rows using Ninja Tables plugin. You can also add media to the table description as well. 

Add Media to Table Description

When you create a table using Ninja Tables the first step is to add table title and table description (optional).

add media using Ninja Tables WordPress plugin
Add media to table description

Click “Add Media” and upload files from your computer or media library.

Add Media to Table Columns and Rows

Now you want to add images to your columns and rows. Here is a sample table (pre-made) for our example. 

sample table with Ninja Tables
Pre-made sample table

We’re happy with the table so we will just add a new column now for images. Click the “Add Column” button on the right upper corner.

wordpress insert image into table
Add Table Column

We’ll name the column “images” for simple use and from “Data Type” select “Image/File/Lightbox”.

how to add images in WordPress
Adding Images Option

After this, you’ll see new options under it-

  • Image Only
  • Image Lightbox
  • Iframe Lightbox
  • Link to URL

Each option has its own function.

  • Image Only: Only image files can be added to this option
  • Image Lightbox: When an image is uploaded, it appears in a pop-up window when clicked
  • Iframe Lightbox: Add the image along with the iframe URL here
  • Link to URL: This option allows you to link the uploaded image to a URL

See our documentation for a detailed understanding.

wordpress data table with images by Ninja Tables
Other Images option

You can choose what you want. We’ll select “Image only” for now.

After clicking “Add Column”, you’ll see a new column has been added to the table. 

editing image column in Ninja Tables
Newly Added Images

Now click on the pencil icon from the left. 

A new window will open. You can upload images for this row. Click upload image and upload your desired image.

how to add tables to wordpress with images
Upload Image Option

Repeat this process for other rows. After uploading all images, click preview.

Ninja tables column with images
Newly Added Image Columns

And there you will find all the newly added images in your table!

Ninja Tables preview
Preview Table

Finish-Up

Ninja Tables comes with various other useful features like this PRO feature. You can add media to WordPress tables using this simple drag and drop function.

If you run a WooCommerce store or a product review website, Ninja Tables is highly recommended. Using this table plugin, you can create WooCommerce Product Tables with product images and videos and organize the store products in tabular format.

Having interactive tables allows visitors to easily view, filter, and sort your data according to their preferences, resulting in a better user experience in your website. Ninja Tables makes your WordPress tables more user-friendly by adding media and making your tables more aesthetically pleasing.

Ninja Tables special discount wpmanageninja
Grab Ninja Tables

Nishat Shahriyar

Nishat Shahriyar A.K.A "Nish" is a Writer and Digital Marketer. The vast majority of his interests relate to technology and the creator economy, as well as the WordPress community. He is a profound reader. Nish loves meeting new people, learning about new things, and discussing new ideas. He loves to spend time with his family when he is not writing or working.

2 Comments

  1. Only been using Ninja for a day, but so far, so good! At the moment I am trying to add a Woo product attribute inside the same cell as the product image. Is that even possible?

    1. Hi Sean. You can add product attribute inside the image cell. For this, you need to use Transform Value option.

      1. Add a new column for attributes. In the Dynamic Column Data Settings, add your preferred field type and value
      2. Add another column and move to Transform Value

      Screenshot: https://wpmanageninja.com/wp-content/uploads/2024/08/attributes-with-image.webp

      Hide the columns you don’t need to show and customize further.

      Please try this and if you encounter any problem, contact our support team or reach out to: [email protected]

Leave a Reply