WP-Mix

A fresh mix of code snippets and tutorials

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:

  1. User submits a post and images via frontend submission plugin
  2. The submitted post (i.e., this post) includes nine images uploaded as attachments (custom fields), as seen below
  3. 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.

★ Pro Tip:

Banhammer ProBlackhole ProBBQ Pro