24th Jul '22
/
0 comments

Post Attachments Galleries in Bricks

This Pro tutorial shows how bricks/element/settings filter can be used to automatically replace the images of an Image Gallery element in Bricks builder with the images that are attached to the current post (can be of any post type).

Any image that is added to/inserted in a Post/Page etc. will automatically be attached to that post and will continue to remain so even if the images are deleted from the WP editor.

For the posts that do not have any image attachments, the images set in the Gallery element will be displayed. We'll also show how bricks/element/render filter can be used so that the Section having your gallery will not be output if the post being viewed has no attached images.

Step 1

Edit the Template that applies to single pages of your post type with Bricks.

Note: If you'd like to display the attached images in Bricks' gallery for a single static Page, edit that Page with Bricks and follow this step instead of editing the Page Template.

Add a Section and inside the Section's Container, add an Image Gallery element.

Add a few images (does not matter what images) so you can see how the gallery is going to look with your desired settings like item spacing.

Add the following in child theme's functions.php or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 610 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Programmatically populating ACF field values in WordPress

Programmatically populating ACF field values in WordPress

An example of how to set the values of a Select-type field with the names and labels of all public post types.
Categories:
Pro
Conditionally Excluding Elements from Bricks Editor

Conditionally Excluding Elements from Bricks Editor

In the past, we shared How to Exclude Elements from Bricks Editor. This Pro tutorial shows how specific elements can be excluded selectively based on…
How to create filters with IsotopeJS in Bricks (Part 1)

How to create filters with IsotopeJS in Bricks (Part 1)

This tutorial series will explore the IsotopeJS library's features inside the Bricks ecosystem.
Categories: