An image is worth 1,000 words – unless the context is unclear. We love seeing project images on Devpost projects, but it's often hard to tell what they're showing (e.g., what's the point of this screen that's displayed? How does it fit into the project as a whole?)

There are also some styling problems with the image gallery section on the edit project page, as well as the project page image gallery itself.

Current implementation:

current views

What it does

Allows hackers to add captions to their project image gallery photos to provide context. We also improved the styling on the project edit page, and the image gallery itself.

New solution:

new stuff!

How we built it

We started by brainstorming ways to address the problems we identified above. We sketched some different layout options for displaying a caption form field with image gallery photos on the edit page, along with a concept for where to move the pagination arrows and dots on the project page:


Challenges we ran into

  • Zurb foundation orbit image gallery is a giant pain to style (we ended up removing the arrows entirely cause we couldn't get them styled inline with the pagination dots the way we wanted)
  • Rails form builder is difficult to use with form fields for associations of collections
  • too may snack breaks

Accomplishments that we're proud of

  • overcoming the challenges listed above
  • making it pretty!

What we learned

  • flexbox continues to be awesome and helped us with the grid of the caption/thumbnail layout on the form
  • css takes patience, but it's worth it in the end when things look great
  • it's amazing what you can get done in 1 day of hacking

What's next for Devpost image gallery captions

  • make the caption field work properly every time the user adds a new photo
  • add character limit for caption field
  • keyboard controls for paginating through image gallery
  • get it live on prod!
Share this project: