Image Tag Rendering

Please provide a way to treat a column value as the src value for an img tag in the rendered card.

 

Probably want to support Beast Mode or other derived values to provide easier support for converting relative links in the data to absolute URLs.

 

Given the security implications of arbitrary img links it seems reasonable to require a domain whitelist in the admin settings or something.

 

Nice to Have: Options to map a column to the width and height attribute values.

1
1 votes

· Last Updated

Comments

  • A great place to start with this would be to allow a sumo cell to be formatted as an image tag. I have merchandisers that would really benefit from being able to take image urls provided in an uploaded DataSet and use them to generate an img tag loaded from our website.

  • For any interested people out there, I was able to provide a tampermonkey/greasemonkey userscript solution to my end users by injecting jquery and running this once it's loaded:

            function checkForImageLink(e) {
    if (e.target.innerHTML.indexOf('/item_images') === 0) {
    $(e.target).html('<img src="https://www.artfulhome.com' + e.target.innerHTML + '" />');
    }
    }
    function waxOnWaxOff() {
    $('body').off('mouseenter', 'td[data-position] > div, div.kpi_chart td, div.kpi_chart td a', checkForImageLink);
    $('body').on('mouseenter', 'td[data-position] > div, div.kpi_chart td, div.kpi_chart td a', checkForImageLink);
    }
    // Reapply this every 3 seconds because angular rerenders break my event listeners.
    setInterval(waxOnWaxOff, 3000);

    This works for cells in a sumo table and the table card view.

     

    I'm not really experienced with angular, so I'm not sure how to achieve this without injecting jQuery. Hopefully, we get a native solution soon ?

     

This discussion has been closed.