Frontend refactor needed: ability to see largest Tinder photos

[mayeaux]

Tinder supplies photos as 720px by 720px I believe. I've checked some of these photos out, they're great! We need to get this incorporated so we can see our match's photos better. It should be available on when matching and although through the profile view.

[SaturnusDJ]

84px, 172px, 320px, 640px, unless there is another image url.
It is available by changing the current image number inside {{user.photos[photoIndex].processedFiles[0].url}} for matches
and {{user.photos[user.photoIndex].processedFiles[1].url}} for swipes.
0=640.

[mayeaux]

Thanks @SaturnusDJ , what do you think of the overall strategy to incorporate the larger photos into the app?

[SaturnusDJ]

At this moment I have it in both master and unstable in this way:
Click 320px photo to open the 640px photo. Only in profiles of matches though, it behaves strange at the swipping page.

It's going to be a challenge if we want to use 640px in profile by default.
Even on my 1920x1200 desktop screen it looks huge.

Then again, this is Tinder Desktop, so why sticking to phone like designs.

We can create more space by having a single line header and using even smaller thumbnails.

Another solution can be to have the profile bio as 'image'. In other words, we will display the main picture and underneath only thumbnails. We add one extra thumbnail which will read 'bio' and it contains the profile text, work, school, Instagram, etc and in the future maybe even more like unmatch you are working on or export chat. This solution might sound a bit weird but at this moment it's the best I can come up with to handle the space.

A responsive design like you mentioned earlier would be the best. But that is probably a bit too much at this moment.

[mayeaux]

I've got a little design scribbled down that should work. I will probably come back to this later in the day and see if I can get a chart written out. But basically on the far left will be the 640x640 picture, then on the right stacked on top on top of eachother are thumbnail pics you can click to enlarge it to the 640x640 space, and then the bio is to the right of that. Ideal will be when we can use up and down on the keypad to scroll through the pictures and then left right to swipe, never will have to take hands off the keyboard. Anyways, have a few things to get done first before I move forward on this

[SaturnusDJ]

Going more widescreen is a solution indeed.
What I like concerning the current design is that when someone doesn't have a bio, there is no space lost. When the bio gets a horizontal place, this becomes harder.

[mayeaux]

With the design I have, the bio is displayed under their name and age , so we won't lose any space if there's no bio. Maybe we can even incorporate instagram photos just like is done in Tinder mobile client. :)