open-tacos
open-tacos copied to clipboard
OpenBeta
create standalone page to display media
Todo
Create a standalone page to display a photo in full screen. This page can be used as a child component in the user gallery and in area/climb page.
- [ ] Create
/media/[mediaUrl]/page.tsx - [ ] Dispay media using Image component
Notes:
- mediaUrl format:
u/abe96612-2742-43b0-a128-6b19d4e4615f/gbWD8LLrnb.jpeg - Page layout div should be minimal, full width & height since page will be called by other components that will provide the layout.
Related to #1212
Read more about slot / parallel routes to display this page inside of a modal
- https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals
- https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes
question: How will we get to this standalone page? If we go to area we can click on a photo, it appears in Gallery, then we click again and enter a full screen view. User Gallery we click on a photo and we enter slideshow. How would this new page be used?
I'm hoping we can simplify the user gallery component and have a common slideshow/full screen view that can be used both from the climb/area page gallery and user gallery. We'll have to re-do the user gallery slideshow.
- Climb/Area photo gallery --> click on photo --> slideshow/full screen
- User gallery --> click on photo --> slideshow/full screen
Docs: Nextjs modal
Makes sense, something like this may help too: https://vercel.com/blog/building-a-fast-animated-image-gallery-with-next-js as well as https://github.com/vercel/nextgram
I would like to work on this issue. @mikeschen Can you assign this to me?
Hi! I had picked this up earlier, but I couldn't make progress due to some personal commitments. I noticed that @clintonlunn is already working on this, so @mikeschen , you can unassign me and let him take it forward. I’ll look for another issue to contribute to. Thanks for your understanding!