I have a website where a user can upload their own photos and browse them.
For my existing website, the user can already browse photos and there is a "select" function.
- You just make a button that add the id's of selected photos to local storage.
And then you will be making this new page called "album":
1. Display all the photos added to the photo album (API method will receive array of photo ids)
2. Show a small simplistic preview for each page in the album
3. Each page consists of 1, 2 or 3 photos (see attachment)
4. When the user changes page type, then the photos are moved around automatically.
Page 1: PhotoA, PhotoB
Page 2: PhotoC, PhotoD, PhotoE
Page 3: PhotoF, PhotoG
Then if the user changes Page1 to 3 images, it will automatically be changed to this:
Page 1: PhotoA, PhotoB, PhotoC,
Page 2: PhotoD, PhotoE, PhotoF
Page 3: PhotoG
Default is the layout with 2 images per page.
5. At any time, the user can press "preview", then the HTML will be generated and converted to PDF (with existing API method) and the user will be presented to a link to this PDF so they can see how it looks.
6. The settings for each page layout is saved in local storage so it will be retained in case the user leaves the page and comes back a little later.
7. Each photo can contain a description which may already be entered, but the user must be able to alter it. It is automatically saved while typing and shows "saved" text briefly each time it is saved.
8. A button will order the photo album. This will simply be a matter of sending the link to the PDF to an API endpoint.
9. The user can rearrange the photos with drag''drop. The logic is simple, when a photo is dropped on another photo it is inserted at that location.
When PhotoD is dropped on PhotoB, it is changed to this order:
- The 4 page layouts the user can choose from.
- A screenshot from the existing web page (so you can get a sense of the simple styling expected)