Relationship

The Relationship field type (e.g. ACF Relationship field) provides a dual-column component to select one or more posts, pages or custom post type items, providing search, post type and taxonomy filtering controls to help find results.

How to use it

In the Lite Edition, if you add these fields to your View they will be displayed as links. For example you could use the field to link to a different post or post type or to create a read more link.

Display fields from related View (Pro Edition feature)

Sometimes, instead of displaying the selected post as a link, you may need to display some fields of the selected post with your current View. With the Pro Edition, you can do this.

To display post details, follow these steps:

1. Use the AVF Pro Edition: Ensure you have the AVF Pro edition, which allows you to customize the appearance of object fields.

2. Create the Primary View: Start by creating the main View, which will act as the master View. Choose the target relationship field as save the View.

3. Create a ‘Post Details’ View:

   This View will be responsible for displaying post details.

   In the Fields tab, select the post fields you want to display, such as the WordPress excerpt and Featured image.

4. Save the 'Post Details' View: After setting up the fields, save the 'Post Details' View.

5. Link the Views:

   Go back to the primary (master) View.

   In the relationship field settings, select the 'Post Details' View in the 'View' setting.

6. Save the Master View: Save the master View to complete the setup.

7. Customize as Needed: Now, each chosen post in the Relationship field will be displayed according to the 'Post Details' View. You can further customize the markup and add CSS styles as needed.

That's it! By following these steps, you can display detailed term information and have full control over the layout and styling.

Use a Relational field to 'link' two Custom Post Types (CPT) together. Combine it with a Meta Filter (Pro) to display related content.

Post (WordPress) Group Author field and Taxonomy terms (WordPress) Groups also have the option to choose a View.

Displaying items as a Grid (Pro)

Repeater items as a Grid

To display items as a grid, start by creating a detailed layout for each item by assigning a View, as described above. Once your item layout is set, you can transform the display into a grid using CSS Grid. Simply add the following CSS code to your View to achieve the desired grid layout:

#view__relationship {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

@media screen and (min-width:992px) {
#view__relationship {
  grid-template-columns: repeat(3, 1fr);
 }
}

Make sure the class in the CSS fits the field class from the markup. By changing the value of the grid-template-columns property, you can control the number of columns in your grid.

Displaying items as a Slider (Pro)

AVF comes with a set of pre-configured JS libraries, so you can easily turn the relationship items into a slider.

After adding the repeater field to the target View, change the 'Enable Slider' option to 'Splide v4' and press the Save button. It'll automatically change the field markup to incorporate the necessary classes, and add the default JS instance:

var relationship = this.querySelector('.acf-views__relationship');
if (relationship) {
	/* https://splidejs.com/guides/options/ */
	new Splide(relationship, {
		type: 'loop',
		perPage: 1,
		perMove: 1,
	}).mount();
}

You can customize it according to your needs, using any available Splide options.