Creating a Dynamic Gallery Page Template with ACF, GeneratePress & GenerateBlocks

When building a website for a construction company or similar client, a well-structured gallery template can be invaluable for showcasing individual projects or homes. Here’s a step-by-step guide to setting up a dynamic gallery template using Advanced Custom Fields (ACF), GeneratePress as the theme, and GenerateBlocks, ensuring that each gallery post maintains a cohesive, professional design.

Step 1: Add a Custom Post Type for Galleries

To begin, create a new custom post type for the galleries. This allows each project or home to have its own dedicated page.

1. In ACF, navigate to Post Types and select Add New.
2. Set up the post type:
   • Plural Name: Galleries
   • Singular Name: Gallery
3. For a clean, professional look, customize the icon for this post type:
   • Go to Advanced Configuration for your new post type.
   • Change the icon to something relevant, like a gallery or photo icon.

After saving your changes, you’ll see “Galleries” in the WordPress sidebar. This post type will now be used to create individual galleries.

Step 2: Create a Gallery Page Template with GeneratePress Elements

GeneratePress Elements is a powerful tool for creating reusable templates. Here’s how to set up a gallery template to display a page header and gallery content:

1. Go to Appearance > Elements in the WordPress dashboard.
2. Select Add New and choose Block as the element type. This will open the block editor.
3. Title your new element “Gallery Page Template” and set Element Type to Content Template.
4. Set the Editor Width to 100% for an optimal editing experience.

Designing the Template Layout

This layout will include a dynamic header with the gallery title and featured image, followed by a gallery block displaying the images.

Page Hero (Dynamic Header)

1. Add a Container Block as the outer wrapper, and nest an Inner Container Block within it.
   • Add padding (e.g., 80px top and bottom) to give some space around the title.
2. Inside the inner container, add an H1 Headline Block.
   • Set the headline text to Dynamic Data and select Current Post Title. This ensures the gallery’s title will automatically display in the header.
3. For the background, set it to the Dynamic Featured Image.
   • Insert a default background image (this acts as a fallback if no featured image is set).
   • Set a gradient overlay for better text readability. Choose a white gradient with opacity, making the text stand out.
4. Adjust the Z-index to ensure the title appears in front of the gradient overlay.

Gallery Content Section

1. Below the hero section, add another Container Block with an Inner Container.
   • Set the inner container width to around 800px for a contained, centered look.
2. Inside this container, add a GeneratePress Dynamic Content Block.
   • Select Post Content as the source to automatically display the WordPress Gallery Block content you’ll add in each gallery post.

Step 3: Configure Display Rules

Specify where this template will be applied:

1. In the Display Rules section, set this template to appear on All Galleries under the custom post type you created.
2. Save and publish your template.

Step 4: Create and Populate Gallery Posts

With your template ready, it’s time to create individual gallery posts.

1. Go to Galleries > Add New and title your first gallery (e.g., “Modern Home”).
2. In the post content, add a Gallery Block and select images relevant to the project.
3. Set a Featured Image for each gallery. This will serve as the background image in the page hero.
4. Save and publish.

Step 5: Set Up a Query Loop for a Gallery Showcase Page

To create a main gallery showcase page where all projects can be browsed:

1. Add a new page (e.g., “Our Work”).
2. Insert a GenerateBlocks Query Loop Block. Set it to pull in posts from your Gallery post type.
3. Style the query loop to display images, titles, and an overlay for each gallery item. Set up a gradient background for each post and adjust the Z-index to make the title legible over the image.
4. Publish this page as the main gallery overview.

Final Adjustments and Testing

1. Test the template and gallery posts on desktop, tablet, and mobile to ensure responsiveness.
2. For accessibility and readability, adjust padding and text contrast in your headers and overlays as needed.

Summary

With this setup, you’ve created a dynamic and reusable gallery page template that not only maintains a cohesive design across multiple posts but also gives your client an easy way to showcase their projects. By adding a query loop for a main gallery page, you provide users a clear overview, with seamless navigation to each project’s individual gallery.

This template-based approach is flexible, scalable, and works beautifully for any portfolio-focused website.