Adding images as thumbnails for studies

[heidimok]

Context

In the design mockups we would like to enable researchers to link to a thumbnail image to be included for each study so that it can be differentiated from other studies.

Data file:

UI homepage display:

Further Discussion

There is some open discussion that we can still have around the use of images: Does a data provider want to upload an image? Point to an image already existing on the internet? Do they even want to deal with images?

Current Assumption

• Researchers will have the option to include a link to an image
• If no images is added, we will have a default image

Possible Paths Forward

• Absolute url for external images (e.g. https://example.com/my-image.png)
• Relative path for images added to the repo (e.g. my-image.png )
• We don’t really have any real-world examples of either

  
  ### Tasks

• [x] Validate workflow for external images
• [ ] Validate workflow for uploaded image

[heidimok]

@alukach To test out how an image link might 'flow' from data csv to UI, can we test out these urls for the existing building study:

• option 1: https://unsplash.com/photos/aerial-view-of-city-buildings-during-daytime-oJ3kmMy_7MU
• option 2: https://unsplash.com/photos/aerial-view-of-city-buildings-near-body-of-water-during-daytime-vn5tA8AsOYc
• option 3: https://unsplash.com/photos/aerial-photography-of-town-with-red-roof-houses-near-dome-gothic-cathedral-dz9wtvxLcSM
• We can assume the researcher will replace this with their own image of choice

Municipal

• option 1: https://unsplash.com/photos/a-bunch-of-buildings-that-are-next-to-each-other-g_vXxtCQQIg
• option 2: https://unsplash.com/photos/aerial-photography-of-mountain-under-white-sky-n68f3JvlP5o
• We can assume the researcher will replace this with their own image of choice

[heidimok]

Update from @alukach

• site with test image: https://tecnico-app.vercel.app/
• spreadsheet (new data): https://docs.google.com/spreadsheets/d/1Zwoohp8Zq8D4LgLY1aIrB5LTLRvxmV9dr8FAghphCV0/edit#gid=1485987722

[alukach]

In the above screenshot of the spreadsheet, we mistakenly labeled the field as Image. It should actually be Image Src moving forward.