How to manage DB images by density in web applications

The way to manage different Image object densities depending on the display resolution is explained in How to use responsive images in a web application. This is done automatically by GeneXus.

Here we explain how to achieve the same result for images that are not image objects, but blobs or Image data type attributes.

The scrset HTML5 tag has to be manually built and included in the form using the Caption property of a textblock with Format property = HTML.

Example

Suppose that you want to show the Customer's photo depending on the display density of the user's device.

1. The Customer transaction is as follows. Note that there is an image appropriate for each display resolution.

2. There is a procedure (GetImageCandidateString) that, given the CustomerId, returns the image candidate string composed of the different images followed by the display density where they are more suitable to be displayed.

parm(in:customerId,in:&ImageClass,out:&HTMLvar);

for each Customer
    &HTMLvar = !'<img src="' + CustomerPhoto.ImageURI + !'" ' 
    if not customerPhoto1x.IsEmpty()
        &HTMLvar += !'srcset="' + customerPhoto1x.ImageURI + !' 1x,'    
    else
        &HTMLvar += !'srcset="'
    endif
    if not customerPhoto2x.IsEmpty()
        &HTMLvar +=  customerPhoto2x.ImageURI + !' 2x,'    
    endif
    if not customerPhoto3x.IsEmpty()
        &HTMLvar +=  customerPhoto3x.ImageURI + !' 3x,'    
    endif
    if not customerPhoto4x.IsEmpty()
        &HTMLvar +=  customerPhoto4x.ImageURI + !' 4x'    
    endif
    if not &ImageClass.IsEmpty()
        &HTMLvar += !'"' + !' class=' + &ImageClass + !'>'
    else
        &HTMLvar += !'"' + !'>'
    endif
endfor

3. When the Customer's photo has to be displayed, call the previous procedure and use the string returned to build the HTML to display the image.

GetImageCandidateString(&CustomerId,"",&HTMLvar)
if not &HTMLvar.IsEmpty()
   textblockImage.Caption = &HTMLvar
endif

Note that it's possible to display different images depending on the pixel density, viewport width, or both.

Download the sample from Manage multiple density images sample