Data Publisher demo with WordPress media library integration
This responsive publication shows how the WordPress media library can be used to add media to a publication. Supported media types: images, audio, video and attachments. WordPress media library integration is a free feature.
Current active styles
- WP-Data-Access-Data-Publisher-Color-Black
- WP-Data-Access-Data-Publisher-Display-Wide
- WP-Data-Access-Data-Publisher-Rounded-Corners-Small
Actions
- Download and install the free Code Manager
- Use Publication Layout Panel below to change color, style and edges
- Download free current active styles
- Import downloaded styles into your Code Manager repository
- Activate downloaded styles
- Use shortcode cmruncode to add styles to your web page
- Use the Code Manager to customize styles
Or watch the video tutorial for detailed step by step instructions...
| 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 |
Shortcode arguments used for this demo
[wpdataaccess pub_id="3"]Image styling
Additional styling to images can be added with CSS. Column names are added to publication cells as classes, which allows you to style every table column differently. If you click on one of the images of the publication, 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:
td.bike_photo {
min-width: auto;
}
td.bike_photo img {
width: 100px;
height: 70px;
}Advanced options
This demo shows an integration of the WordPress media library (read more). It also shows how you can format specific table cells depending on their value. For this example the following line of code was added to column advanced table options in the Data Publisher:
{ "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).