Tablepress – Admin table content img improvements

Dear Admin,

Another small change I have made to the plugin that might help others until (if possible) added as a feature update.

My customer needed to insert an image into their tables(s) without having to understand HTML markup. Even though it works it caused some confusion and allowed users to mess with the markup.

The only way I could resolve this was through JS within a function:

function tablepress_image_preview_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            function convertImageHTMLToElement() {
                $('td').each(function() {
                    $(this).html($(this).html().replace(/&lt;img.*?src="(.*?)".*?\/&gt;/g, function(match, src) {
                        return '<img src="' + src + '" style="max-width:150px; max-height:150px; width:auto; height:auto;" />';
                    }));
                });
            }

            // Run on initial load
            convertImageHTMLToElement();

            // Run after any AJAX content load
            $(document).ajaxComplete(function() {
                convertImageHTMLToElement();
            });
        });
    </script>
    <?php
}
add_action('admin_footer', 'tablepress_image_preview_script');

All this does is look for the html markup inside the table cell after inserting an image and convert it into an image. This removes the chance of anyone breaking the html code by changing it, or deleting what they do not understand, as well as making it easier for those to see what they will be injecting into the front end before saving.

One thing I would like to see, is a way to style the back end to make the UI of the table easier to work with. The editable fields need to be fluid, and each row width editable.

I have had to target the admin area with css like this:

.tablepress-edit-0g-floor .jexcel td[data-x="1"] {min-width 70vw !important}

etc. for some reason It doesn’t like %, only px and vw. I can only assume its down to the jexcel feature overriding or ignoring these rules.

If I stretch the table(s) it works but if I refresh the browser they reset. Maybe the tool used to make these fluid needs some tweaks to be able to keep your custom width active. The only other option is Default column width. This works but is applied to all.

Enjoy. P.S. Please do share if you find a cleaner solution to the above.