Adding Profile Pictures to the Volunteer Page

[dreymoreau]

https://torontojs.com/volunteers

@jackli921 and I met today we had some thoughts about how to best build out the profile picture feature for the website.

At first we were thinking about a card component using grid, as this would ensure that we have a cohesive layout. We then talked about how we would input all of the photos? I was thinking that the photos were all being imported from Linkedin, but after clicking around on folks' links, we realized that some are linked to peoples twitters, personal portfolios, Linkedin's etc.

We then thought that maybe the best way to receive folks' photos is having a form submission posted in Toronto Volunteers channel, and then if folks do want to have their photo on the website they can submit through the form, if not then we can input the TorontoJS logo to ensure that there won't be any blank profiles on the volunteer page.

We wanted to hear some feedback about our thoughts and maybe helping set up the form submission if its the best way to move forward with this! :)

[dreymoreau]

cc: @usrrname @kieran

[jackli921]

the general layout idea

[dxnn]

Could maybe have folks do a PR on our repo to add their photo and other bio details.
(I'm not opposed to a form, just throwing out an alternate approach.)

[dreymoreau]

@dxnn this is also a good idea!! :) I am wondering if people might miss it, or if it would lead to the pr being super overwhelming with folks' details

[usrrname]

@dreymoreau @jackli921 Thanks for kicking this off! you're right in observing that I chaotically attached different socials to acknowledge our volunteers. Kieran and I were working in a slapdash way.

If I'm understanding correctly, you're hoping to use a form and create an API endpoint for js-volunteers to submit to? I feel like I'd be spending more time on integrating a form before I have any photos showing up in a grid.

To reduce the time-to-outcome (a grid of photos), I suggest asking the #js-volunteers channel to provide (yes you can @channel in this instance...) their preferred name, site link and photo url.

It might be easier as a first version, to iterate over an array of "volunteer objects" photo grid.

ie.

const volunteers = [
{
name: 'John Smith',
website: 'https://johnsmith.com',
img: 'https://....."   
}
...
]

The image URL can also be relative links to where images are in an images folder if we feel it's more stable to serve them statically.
I wouldn't worry about creating a perfect system here. Your time is precious!

[dreymoreau]

awesome ok!!! :)) thanks for this feedback!! :) @usrrname