# Post\_object

The Post Object field type (e.g. [ACF Post Object](https://wplake.org/blog/acf-post-object-field/)) creates an interactive dropdown to select one or more posts, pages, or custom post type items. This field type uses the Select2 library to enable search and AJAX functionality.

## How to use it

In Advanced Views, if you add these type of fields to your *Layout* 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 term details (Pro)

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

To display post details, follow these steps:

1. Install the Advanced Views Pro plugin, which allows you to customize the appearance of object fields.
2. Create the Primary *Layout*: Start by creating the main *Layout.* Choose the target post\_object field and publish to save your *Layout*.
3. Create a ‘Post Details’ *Layout*:

   This *Layout* 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. Publish the 'Post Details' *Layout*: After assigning the fields, save the 'Post Details' *Layout*.
5. Select the Field Layout:

   Go back to the primary (main) *Layout*.

   In the field row, select the *Layout* in the 'Field Layout' dropdown.
6. Save the Primary *Layout*: Save the main *Layout* to complete the setup.
7. Customize as Needed: Now, each chosen post in the post\_object field will be displayed according to the *Layout* chosen in the Field Layout. You can further customize the markup and add CSS styles as needed in the CSS & JS tab.

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

<figure><img src="/files/oToSjXV5hSsYMuHLVHXI" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Use a Relational field to 'link' two Custom Post Types (CPT) together. Combine it with a [Meta Filter](/advanced-views/query-content/meta-filters-pro.md)[ (Pro)](/advanced-views/query-content/meta-filters-pro.md) to display related content.
{% endhint %}

{% hint style="success" %}
[Post (WordPress)](/advanced-views/display-content/wordpress/post.md) Group Author field[ ](/advanced-views/display-content/meta-fields/relationship-fields/user.md)and [Taxonomy terms (WordPress)](/advanced-views/display-content/wordpress/taxonomy-terms.md) Groups also have the option to choose a Field Layout.
{% endhint %}

### As a list <a href="#as-a-list" id="as-a-list"></a>

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__terms {
display: flex;
gap: 10px;
}
```

### As a grid <a href="#as-a-grid" id="as-a-grid"></a>

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__terms {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
 }

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

## Displaying items as a Grid (Pro)

<figure><img src="/files/IWrF29PtfYAcOkXWgP2l" alt=""><figcaption><p>Repeater items as a Grid</p></figcaption></figure>

To display items as a grid, start by creating a detailed *Layout* for each item by assigning a Field Layout, as described above. Once your Field Layout is set, you can transform the display into a grid using [CSS Grid](https://www.w3schools.com/CSS/css_grid.asp). Simply add the following CSS code to your *Layout* to achieve the desired grid layout:

```css
#layout__post-object {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

@media screen and (min-width:992px) {
#layout__post-object {
  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)

<figure><img src="/files/AdhHqJ4tVpuIL5xCOyFy" alt=""><figcaption></figcaption></figure>

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 post object items into a slider.

After adding the repeater field to the target *Layout*, 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:

```javascript
var post_object = this.querySelector('.avf-layout__post-object');
if (post_object) {
	/* https://splidejs.com/guides/options/ */
	new Splide(post_object, {
		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/).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wplake.gitbook.io/advanced-views/display-content/meta-fields/relationship-fields/post_object.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.