User field render options

By default, Advanced Views displays the User field as user link(s). You can customize the Layout template to change how it's rendered:

1. Users list

To display all the items in a single row, you can use the CSS Flexbox:

#layout__users {
display: flex;
gap: 10px;
}

2. Users Grid

To display all the items as a grid, you can use the CSS Grid:

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

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

3. Users slider (Pro)

Advanced Views comes with a set of pre-configured JS libraries, so you can easily turn the user items into a slider. Before activating the slider feature, read the 'displaying user details' section to learn how to setup the details look for each item.

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

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

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

4. Posts of the chosen User (Pro)

In addition to displaying user details, it can be valuable to query and display all posts or products related to a specific user. For example, let's say you have WooCommerce Products and an ACF User field called "Vendor" assigned to them. On a single product page, you might want to display all products linked to the same user.

To achieve this, you should create a Post Selection with Meta Filters and use dynamic injection to retrieve the field value dynamically. This approach allows the Post Selection to query all products made by the user chosen in the current product's field.