CFDB Plugin

Situation: You have a form with uploaded image files. You use a [cfdb-table] or [cfdb-datatable] shortcode. But the table displays a link to download the file. Instead you want the image files displayed in the table.

Solution: add Javascript to replace the link in the table with images.

Use this template with the following changes:

• Replace FORM_NAME to match your form name
• Replace COLUMN_NAME to match your column
• Change the img tag height and width values as desired
• Optionally change the table html id (“mytable” below) in both places it appears
• Optionally change cfdb-datatable to cfdb-table in both place it appears

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

[cfdb-datatable form="FORM_NAME" id="mytable"]
{{AFTER}}
<script type="text/javascript" language="Javascript">
(function($) {
    $(document).ready(function() {
        $("#mytable td[title='COLUMN_NAME'] > div > a").each(function() {
            var href = $(this).attr('href');
            var label = $(this).html();
            var imgTag = '<img height="30" width="30" src="' + href + '" alt="' + label + '" >';
            $(this).parent().html(imgTag);
        })
    });
})(jQuery);
</script>
{{/AFTER}}
[/cfdb-datatable]