This is a feature on the Staff site, which we will definitely never want to use on an unprotected site (because of spam), but for maintenance reasons, I’m documenting the process of how it works here.

For speed, it’s an entirely uncoded solution, utilising features of a couple of different plugins we use regularly; namely Gravity Forms, Gravity Wiz and Advanced Custom Fields.

Custom Post Type

The first stage was to create a new custom post type for User Photos, mainly so that we can isolate user submissions for this gallery from all the other photo uploads in the media gallery. I used ACF for this, rather than code it into the theme.

User Submission Form

I created a simple file-upload form in Gravity forms with just two fields. File upload and caption.

Post Creation

Gravity forms has a Post Creation add-on which allows you to create a new post from every form submission. I set this up and configured it to use the uploaded image as both content and featured image and to use the caption as the post title. Since you can only view the site when logged in, the site knows who uploads each picture, so we can also assign them as the post author

Home Page Slider

On the home page, I used the Post/Grid Carousel block, which is part of Kadence Blocks Pro. This can be configured to show either a grid or a slider of a specific post type

Gallery Page

The gallery page is also the Post/Grid Carousel block, but set to display as a grid, rather than a carousel. There are actually two seperate elements on the page, to facilitate the layout.

On the first row, we have one set to just display the latest post and nothing else, so we can have it on the same row as the user submission form.

The next row is set to offset by 1, so it doesn’t repeat the main image. The max per page is 10, so it is set to paginate beyond that.

Polaroid effect.

This is one of those things where the whole is more impressive than the sum of it’s parts.

  • We have a tiny javascript snippet on the page which randomizes the rotation of each image block on page load, to create the uneven effect
  • The sepia filter is applied as a default style on all images
  • some hover styles are set for each photo which: remove the filter, rotate the image back to 0deg, scale it up slightly and add z-index 10.