rhyslawry
commented
7 years ago I fixed the fallback avatar image error quite easily using an onerror attribute
The code now looks like this
<img src="%ds__img_src^empty:./?a=2360879%" onerror="this.src='./?a=2360879'" />Where ./?a=2360879 refers to a fallback avatar asset in the cms
The non-square image compatibility is the main thing
Expected behaviour
https://web.unimelb.edu.au/components/people/#staff-listing-min Staff Listing Min should work with non-square images, exactly the same way that both the larger "Staff Listing Detailed" and "Profile Header" components do.
(I'm actually unsure if "Staff Listing Detailed" works with non-square images or not, but "Profile Header" definitely does - would be worth checking out)
Actual behaviour
Staff Listing Min currently stretches non-square images
Staff Listing Min also currently displays a broken image block when an image URL is incorrect, rather than fall back to the default avatar like "Profile Header".
Background: Currently with one of our use cases it's not possible to crop the photos to be square. This is because they are being fetched from an internal faculty database, and there is no way to mandate that they use square images in that database.
Steps to reproduce
Screenshot of stretching images:
Screenshot of broken image block
^The "fallback avatar" that you see above is a manually uploaded asset in the CMS that has to be manually added to each div when an image is not available. If a non-resolvable URL is used for the image then the broken image block appears.