✨ add fallback for explorer index page thumbnails

[ikesau]

Annoyingly this took more effort than I thought it would because I had to add it to the hyrdation pipeline.

I could have written a script tag in the footer like this:

<script>
  document.querySelectorAll('.explorer-index-page__card img').forEach(img => {
    img.onerror = function() {
      const errorDiv = document.createElement('div');
      errorDiv.innerHTML = '<svg /> <h2 />...';
      errorDiv.className = 'explorer-index-page__card-error';
      this.parentNode.replaceChild(errorDiv, this);
    };
  });
</script>

but idk, I feel like that's a dangerous path to start going down for the rest of my team's sanity 😅

I tested this in Chrome and Safari too (because apparently things can go wrong even when you're just rendering rectangles)

[owidbot]

Quick links (staging server):

Site Dev	Site Preview	Admin	Wizard	Docs

Login: ssh owid@staging-site-explorer-page-fallback

• Site-screenshots: https://github.com/owid/site-screenshots/compare/explorer-page-fallback
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/explorer-page-fallback

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-11-29 19:18:58 UTC
Execution time: 1.17 seconds

[marcelgerber]

Annoyingly this took more effort than I thought it would because I had to add it to the hyrdation pipeline.

Oh god, yes, that's annoying. I was aghast when I first found out that there's not a simple img::error CSS selector that one could use for that. Go innovate, browser people.

[marcelgerber]

Ahh, you need a bunch more here: Definitely runSiteNavigation, runCookiePreferencesManager, maybe also runSiteTools.