Get full resolution images in your Power Pages Lists

Actually, this is expected behaviour for Dataverse Image columns. Regardless of what we set as the maximum file size, Dataverse stores the original full resolution image and also an optimised thumbnail, resized and cropped to 144px x 144px.

For performance reasons, what gets output in Lists is the thumbnail. The URL will look something like this. (note that it includes the logical name of the table, the image column and the GUID of the record it’s related to)
/Image/download.aspx?Entity=musdyn_track&Attribute=musdyn_artwork&Id=fe707d78-999d-ed11-aad1-0022481b5104&Timestamp=638103486073835852

All that we need to do to receive the full resolution / full size image is to append &Full=true to that URL, like so:
/Image/download.aspx?Entity=musdyn_track&Attribute=musdyn_artwork&Id=fe707d78-999d-ed11-aad1-0022481b5104&Timestamp=638103486073835852&Full=true

What we’ll cover in this post is how to use jQuery to amend that link in the list output to request the full resolution image.

Usually I get my code working in browser dev tools first (an easy place to test out selectors etc in real time without having to commit the code, clear the cache, etc.) and then I’ll combine with the correct trigger once I’m happy (step 3).

As with many of my jQuery and CSS tips, I’ll make use of data attributes to target the elements I want to work on.
In plain English, I need my selector to target:

Images within the rows of the body of the table within my grid (list or subgrid) whose source contain ‘Image/download.aspx’ but do not contain ‘&Full=true’

Here is the selector:

table[role="grid"] tbody img[src*="Image/download.aspx"][src!="&Full=true"]

Now I’ll write a function to loop over each of the results returned by the selector, using jQuery’s .each. Here’s how the empty function looks:

function getFullResImages() {
    $('table[role="grid"] tbody img[src*="Image/download.aspx"][src!="&Full=true"]').each(function () {
        // Add functionality here
    });
}

To complete that, we just need to add the steps to perform on each of those images…

I use $(this) to refer to the current image in the loop, and I need to get its src attribute. Knowing I’ll need a way to refer to that shortly, I store it in a variable.

Finally, I want to append text to the end of the existing value. In jQuery / JavaScript, I simply say set it to it’s current value + the new text like so:

var src = $(this).attr('src');
$(this).attr('src', src + '&Full=true');

Our full function looks like this:

function getFullResImages() {
    $('table[role="grid"] tbody img[src*="Image/download.aspx"][src!="&Full=true"]').each(function () {
        var src = $(this).attr('src');
        $(this).attr('src', src + '&Full=true');
    });
}

In case you haven’t added JavaScript to lists before, it’s worth knowing the correct event to use. You may be tempted to go with document ready. There are a few quirks to be aware of… window.load is more suitable due to lists loading asynchronously and also that lists reload each time we sort, filter, search or page through results so we need to listen for additional ‘loaded’ events beyond the page load.

Instead, on window loaded, we’ll add an event listener for each time the list loads / reloads so we’re covered in all scenarios.

To make this snippet reusable, I’m not referring to a specific list by ID. Instead, I’m targetting classes that will work with all lists / subgrids. Here’s the final snippet:

$(window).load(function () {
    $('.entity-grid.entitylist').on("loaded", function () {
        getFullResImages();
    });
});
 
function getFullResImages() {
    $('table[role="grid"] tbody img[src*="Image/download.aspx"][src!="&Full=true"]').each(function () {
        var src = $(this).attr('src');
        $(this).attr('src', src + '&Full=true');
    });
}

The final step is to copy that JS and paste into the Custom JavaScript field on your List in the Portal Management app / Power Pages Management app.

Enjoy :)