Single photo page

[ryelle]

Figma link

• Add favorite button block #5
• Create the download button dropdown #6
• Style the featured image
• Display the alt text
• Single photo meta lists #7 (Image info & EXIF data)
• Attribution section #8
• License/usage (same text across all photos)

[ryelle]

@fcoveram What is the logic for the featured image + grey background? Initially, I had set it up so that the grey box is a square, so it's the same height across all photos and has that top or side spacing like in the mockup. But I realized that the grey in the mockup is not square, so I've also tried 16:9, but then this doesn't have the top spacing (it would need a photo with an aspect ratio more extreme than 16:9).

Examples:

	Landscape	Portrait	Square
Square
16:9

This should have the same container aspect ratio on large and small screens, which is also not currently the case in the mockup.

[fcoveram]

My mistake. I thought the mockups were 16:9. The desktop version is close to the ratio but not fully accurate.

The idea was having a 16:9 in both desktop and mobile. So the 16:9 tests in the table above are the expected outcome.

I was looking the mockups again and I'm not sure about the gray as background color to outline the image container. What do you think of it? The outcome on dev feels different than a mockup so curious about your thoughts.

[ryelle]

The idea was having a 16:9 in both desktop and mobile. So the 16:9 tests in the table above are the expected outcome.

great 👍🏻

I was looking the mockups again and I'm not sure about the gray as background color to outline the image container. What do you think of it? The outcome on dev feels different than a mockup so curious about your thoughts.

I like the grey, but it's fairly easy to change the style of that container if you wanted. Maybe wait for the theme preview to be live so you can see it for real?

[fcoveram]

Maybe wait for the theme preview to be live so you can see it for real?

Great. My main concern is users understand the grey area as part of the image.