Hard-code thumbnail for each study in a grid

[will-moore]

In thinking about ideas for improving the IDR front page, I needed to generate some things with code. So this is just somewhere to save those changes and share ideas.

One idea is to hand-pick a thumbnail for every study (instead of picking a random thumbnail as we do now). This gives a nice overview of the studies in IDR (picking the first project/screen for studies with multiple to show 1 thumbnail per publication):

Without removing this 'duplication':

For comparison, these are the old randomly-picked thumbnails in the same grid:

Not sure if or how we might want to use these thumbnails yet...

cc @jburel @francesw @pwalczysko

[joshmoore]

Would it be too slow to load these via an annotation on the studies, @will-moore ?

[pwalczysko]

Without removing this 'duplication':

The duplication here means that you were considering every screen and Experiment, which gave you for studies with multi-experiments or multi-screens more than one thumbnail ? And then, you removed those extra thumbs from those multi-studies replacing them with just the first one ?

I think that the first screenshot (with the "duplication" removed) looks the best and is better looking than what we have now.

[will-moore]

Just seen https://shepherdjs.dev/ which might be useful to guide users

[will-moore]

From last commit...