Missing images in biosecurity alerts email template

[kylie-m]

For the Biosecurity Alert emails, there are some cases where the occurrence record thumbnail image is missing.

• Typically, this is when the image is still processing.
• This is distinct from there being no image supplied at all, in which case we display a "no image available" placeholder

Screenshot of issue below:

• Note the link is still active, clicking on the broken image successfully linked to the occurrence record:
  https://biocache.ala.org.au/occurrences/2827a140-2252-4fa8-a918-39955e8bf2dc

To avoid the broken image, can we instead display the "no image available" placeholder in this scenario?

[qifeng-bai]

There is no way of CSS/HTML to know if the image is broken link. It relies on JS to process when 'onerror' is triggered.

Methods which have been tested and failed:
1, JS is forbidden by emails service.
2, Using element 'object' element works will on browsers , but Gmail and outlook does not support
3, Using CSS img:before fails on Gmail

 .species-thumbnail-img:before {
    content: url("${grailsApplication.config.grails.serverURL + '/assets/email/no-img-transparent.png'}");
  }

[qifeng-bai]

After using a default image or previous loaded image for missing thumbnail, Gmail prevents showing the pics, and some CSS controls are broken as well

The html content we sent has been modified by GMail. For example: CSS classes and URL have been modified by Gmail

When we use
.species-thumbnail-img:before { content: url("${grailsApplication.config.grails.serverURL + '/assets/email/no-img-transparent.png'}"); }

Chrom displayed:

Outlook displayed:

Gmail displayed:

Update

Now, both are not working

[adam-collins]

Underline species name so it is clear it is a link.

Swap Image and Map images so the map is displayed first.

Left align content so it does not centre.

[qifeng-bai]

[kylie-m]

the new changes are looking good in Outlook, gmail and yahoo mail on desktop