WordPress media library integration demo
Demonstrated features
- WordPress media library integration
- cell formatting
- responsive table
- default styling
Required skills
- novice
Required license
- free
This demo shows how the WordPress media library can be used to add media to a data table. Supported media types are: images, audio, video and attachments.
| Brand | Brand Type | Color | Photo | Attachments | Price | Licence Plate | Category | Fuel Type | Mileage | Engine Capacity | No Cylinders |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Brand | Brand Type | Color | Photo | Attachments | Price | Licence Plate | Category | Fuel Type | Mileage | Engine Capacity | No Cylinders |
Image styling
Additional styling to images can be added with CSS. Column names are added to table cells as classes, which allows you to style every table column differently. If you click on one of the images of the table, you’ll see that css class bike_photo was added, which is the name of the column holding the image data. To change the width and height of the image we could add the following CSS to this page:
Custom CSS added to this table:
td.bike_photo img, tr.bike_photo img {
max-width: 300px;
width: 150px;
border: 1px solid #ccc;
}Advanced options
Custom JavaScript added to this table:
{
"fnRowCallback": "function(row, data, index) { if (data[1]=='Z 800 E ABS') { jQuery(row).find('td:eq(1)').css('color','black'); } else { jQuery(row).find('td:eq(1)').css('color','green'); } }"
}Advanced table options must be written as a JSON string and needs to be on one line. Function fnRowCallback was used in this demo, but the advanced table options column allows you to use any jQuery DataTables option (jQuery DataTable options).
0 Comments