The ‘Fields Pattern’ is a powerful feature in Advanced Grid Builder that allows you to customise the layout of each cell in your grid. This feature uses a unique input system that includes draggable fields. These fields, when dragged into a specific pattern, determine the information included in the grid.
Understanding the Input System
The input system for the ‘Fields Pattern’ feature is divided into two sections.
The top section is for fields that are included in the grid. This section indicated between angle brackets <> is called the content area. Fields can be dragged anywhere in and around the content area. The order of these fields and their placement within or around the content area directly influences the layout of each cell in your grid.
The bottom section contains all the fields that are available to include in the grid. These fields can vary depending on how your website is configured. You can drag any of these fields into or around the content area in the top section to include them in your grid.
The ‘Fields Pattern’ feature provides a flexible and intuitive way to customise the layout of your grids in Advanced Grid Builder. By understanding and utilising this feature, you can create grids that perfectly suit your website’s needs.
Please refer to the diagram below for a visual representation of how the ‘Fields Pattern’ feature works.
Exploring the Demo Grid
To help you better understand the ‘Fields Pattern’ feature, we’ve included a demo grid that is set up using the pattern shown in the diagram above. By comparing the diagram to the demo grid, you can see how the placement and order of fields in the pattern directly influence the layout of the grid.
So you can more easily see the area inside the content wrapper, we’ve set its background colour to grey. The grid cell itself has a white background surrounded by a red border.
This demo grid is not just for observation – it’s interactive. You can access the grid’s configuration using the blue gear icon and make changes to the pattern. As you adjust the pattern, you’ll see the corresponding changes in the grid layout. This hands-on experience is an excellent way to further cement your understanding of how the ‘Fields Pattern’ feature works.
Post 8
Post 7
Post 6
Post 5
Post 4
Post 3
Post 2
Post 1
Available Fields
< >
The grey angle bracket fields represent the “content wrapper” and cannot be removed or reordered. You can arrange other fields in and around these brackets as needed.
Title, Content, Excerpt
In Advanced Grid Builder, the content displayed by the ‘Title’, ‘Content’, and ‘Excerpt’ fields varies depending on the query source. The query source can be a ‘post’, the ‘Media Library’, or ‘Taxonomies’. Each of these sources provides different types of information for each field. The table below summarises what each field displays for each query source:
| Field | Post | Media Library | Taxonomies |
|---|---|---|---|
| Title | Displays the title of the post. | Displays the attachment title. | Displays the term name. |
| Content | Displays the post content, including fully resolved shortcodes. | Displays the attachment description. | Not available. |
| Excerpt | Displays the post excerpt. | Displays the attachment caption. | Displays the term description as set on the term edit page. |
In this table, each row represents a field (‘Title’, ‘Content’, ‘Excerpt’), and each column represents a query source (‘Post’, ‘Media Library’, ‘Taxonomies’). The cells in the table indicate what content each field will display for each query source. This table provides a clear and concise overview of how the content displayed by each field varies depending on the query source.
In addition to the ‘Post’, ‘Media Library’, and ‘Taxonomies’ query sources, there’s another important query source in WordPress known as ‘The Loop’. ‘The Loop’ is a fundamental concept in WordPress that refers to the process of fetching and displaying posts. When the query source is set to ‘Loop’ in Advanced Grid Builder, the ‘Title’, ‘Content’, and ‘Excerpt’ fields will display information based on the current post in The Loop. This means that the content displayed in your grid will dynamically change depending on the specific page you’re on. For example, if you’re on an archive page, The Loop will cycle through each post in that archive, and these fields will display the corresponding information for each post. Similarly, if you’re on a single post page, these fields will display the information for that specific post.
Image
Inserts an image for the current query source.
For posts:
Inserts the posts featured image.
For media library:
Inserts the media library image.
For taxonomy:
AGB attempts to find an image source link and source set for the current term in a variety of ways, depending on the plugins that are installed and active on your site.
If you have the Advanced Custom Fields (ACF) plugin installed and active, the plugin will use the ‘taxonomy_image’ field assigned to the taxonomy if available to find the image source link and source set for the current term.
If you have the WooCommerce plugin installed and active, the plugin will attempt to use the assigned term image supported by Woocommerce.
If you have the Category and Taxonomy Image plugin installed and active, the plugin will attempt to use the image supported by the plugin.
If none of these plugins are installed or active, the plugin will attempt to find the first post with the current term assigned and a featured image set. It loops through all post types and queries for posts that have the term assigned and a featured image set. If a valid post is found, it sets the image source link and source set and breaks out of the loop. If no valid post is found, it does not set the image source link and source set.
See the Image Settings panel for many more image configuration options
Button
The ‘Button’ field includes a button that links to the underlying post. The link destination is controlled separately. You can configure the button label using the “Button text” field.
Social Sharing and Download Buttons
Enhance your grid’s interactivity and functionality with social sharing buttons for Twitter, Facebook, and LinkedIn. These buttons enable visitors to share your content on their social media platforms, increasing your website’s visibility
Social Sharing and Download Buttons
Enhance your grid’s interactivity and functionality with social sharing buttons for Twitter, Facebook, and LinkedIn. These buttons enable visitors to share your content on their social media platforms, increasing your website’s visibility and reach. Additionally, the ‘Download’ field adds a download button to your grid, allowing users to download a full-resolution file of the featured image in each grid cell.
Date
The ‘Date’ field displays the published date of the source data.
Author
The ‘Author’ field displays the author of the content.
Taxonomies (orange)
Taxonomies are additional drag and drop fields for lists of terms that relate to the current post. They differ from standard (blue fields) in that:
- The available taxonomies will depend on your WordPress installation. All publicly configured taxonomies will be shown (Pro version only).
- Each taxonomy is output as a comma-separated list of terms attached to the current content source.
Custom Fields (green)
If you have the ACF plugin installed, any configured fields will appear in green. If you drag one of these fields into your grid pattern, a value will only be visible in the grid if that field has a value in the underlying post.