> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/field-types/relational/user-field/render-options.md).

# User field render options

By default, Advanced Views [displays the User field](/advanced-views/field-types/relational/user-field.md) as user link(s). You can [customize the *Layout* template](/advanced-views/layouts/code-fields/custom-template.md) to change how it's rendered:

## 1. Users list

To display all the items in a single row, you can use the CSS [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox):

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

## 2. Users Grid

To display all the items as a grid, you can use the [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid):

```css
#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](https://docs.advanced-views.com/display-content/front-end-assets-management-pro), 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:

```javascript
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](https://splidejs.com/guides/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](/advanced-views/post-selections/filters/meta-filters.md) and use [dynamic injection](broken://pages/gRAiUU7vNPN4UkU1NtLd) 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.