View Categories

Image Element (Pro)

Table of Contents

Sometimes texts and numbers are not enough to express the information we want to present to users. We absorb information better with visual items like images.

Ninja Tables Drag and Drop has an image element for you to add media to the table.

Just drag the element to insert image in table.

Let’s add the image element in the drag and drop mode to show you how it works.

Image element in tables

When you drag the element on the table, it will show a default image. Change it to whatever you want.

Properties of Image Element #

Option NameType
Replace ImageMedia Upload
AlignmentLeft, Center, or Right
Image SizeNumeric Value
Image ShapeSquare or Round
Image Alternative TextText Edit
Image LinkText Edit for URL
  1. Replace Image: Replace the default image with your own image with the Media Upload button from your computer.
  2. Alignment: Align the Image to either Left, Center, or Right. By default, it is set to Center.
  3. Image Size: Change the size of the Image. By default, it is set to 50.
  4. Image Shape: Change the shape of the Image to either square or round. By default, it is set to Square.
  5. Image Alternative Text: The alt text of the HTML <a> tag or simply the Alternative text of the link of the image.
  6. Image Link: The URL of the link of the image which you can edit within the provided field.

Here’s how a table looks with images:

Images in data table

Conclusion #

If you run an online product store, you need a table with product images. This is where Ninja Tables’ “Image Element” comes in handy for you.

Insert images in WordPress tables easily.

Let us know your thoughts and questions.

What are your Feelings

6 Comments

Mohiuddin Omran •

Hello Mabel,

Thank you for getting in touch with us. To ensure that your images are not linked, follow one of these methods:

1. Leave the URL field empty when adding images to your table.
2. Alternatively, you can use javascript:void(0) in the URL field.

For method 2, follow these additional steps to prevent the images from opening as a link or in a new tab:

Click the Settings section in your table. Under the JS Custom field, paste the following JavaScript code:

jQuery(document).ready(function() {
jQuery(‘tbody a’).each(function() {
var hrefValue = jQuery(this).attr(‘href’);
if (hrefValue === ‘javascript:void(0)’ || hrefValue === ”) {
jQuery(this).removeAttr(‘target’);
}
});
});

This JavaScript code ensures that links within the

elements with a URL of “javascript:void(0)” or empty will not open in a new tab. Let me know if it helps.

Thank You.

Comment button Reply
Erick •

Hello! This action did not work. When I trying to add javascript:void(0) to the image link the message is shown: “Something went wrong, please try again.”.

The code:
jQuery(document).ready(function() {
jQuery(‘tbody a’).each(function() {
var hrefValue = jQuery(this).attr(‘href’);
if (hrefValue === ‘javascript:void(0)’ || hrefValue === ”) {
jQuery(this).removeAttr(‘target’);
}
});
});
also presented an error when being added to JS Custom field. Would you help us?

Comment button Reply