Image Gallery
Check out a live demo of a responsive, grid-based image gallery.
Link: Responsive Image Gallery
More info: the images used for the demo gallery were uploaded as attachments to this post. The image gallery is standalone and works with any images, but I wanted to demonstrate how to create responsive image galleries using my User Submitted Posts plugin. So behind the scenes, here’s what’s happening:
- User submits a post and images via frontend submission plugin
- The submitted post (i.e., this post) includes nine images uploaded as attachments (custom fields), as seen below
- Then on the gallery page, a custom loop is setup that displays all images attached to the latest user-submitted post
So, there is always a fresh image gallery that displays the latest user-submitted images.
For reference, here’s a list of the custom fields attached to this post:
is_submission - 1
user_submit_image - https://wp-mix.com/wp/wp-content/uploads/gallery/001.jpg
user_submit_image - https://wp-mix.com/wp/wp-content/uploads/gallery/002.jpg
user_submit_image - https://wp-mix.com/wp/wp-content/uploads/gallery/003.jpg
user_submit_image - https://wp-mix.com/wp/wp-content/uploads/gallery/004.jpg
user_submit_image - https://wp-mix.com/wp/wp-content/uploads/gallery/005.jpg
user_submit_image - https://wp-mix.com/wp/wp-content/uploads/gallery/006.jpg
user_submit_image - https://wp-mix.com/wp/wp-content/uploads/gallery/007.jpg
user_submit_image - https://wp-mix.com/wp/wp-content/uploads/gallery/008.jpg
user_submit_image - https://wp-mix.com/wp/wp-content/uploads/gallery/009.jpg
user_submit_ip - 123.456.789
user_submit_name - Test User
user_submit_url - https://wp-mix.com/
Note also that these have nothing to do with the gallery page, which is just a custom page template containing the custom loop.