Advanced Views Docs
Live PlaygroundDownload PluginGet PRO
  • 💡Help Centre
  • ⚡Getting Started
    • Introduction
      • Key Aspects
      • Creating Your First View
      • Creating Your First Card
      • Plugin Terms
      • Plugin Interface
        • Field Options
    • Installation
      • Advanced Views Lite
      • Advanced Views Pro
      • Comparison Table
      • Upgrading from Lite to Pro
    • Supported data vendors
    • Starter theme
  • 🌟Display Content
    • WordPress
      • Post
      • Taxonomy terms
      • User
      • Comments
      • Menus
    • WooCommerce Product
    • Meta fields
      • Basic fields
        • Number
      • Content fields
        • Image
        • File
        • WYSIWYG
        • oEmbed
        • Gallery
      • Choice fields
        • Select/checkbox/radio
        • True / False
      • Relationship fields
        • Link
        • Post_object
        • Page Link
        • Relationship
        • Taxonomy
        • User
      • Advanced fields
        • Google Map
        • Google Map Multiple Markers
        • ACF OpenStreetMap Field
        • Date/time picker
      • Layout fields
        • Group (Pro)
        • Repeater (Pro)
        • Flexible (Pro)
    • Object fields
    • Custom Data (Pro)
    • Custom Gutenberg Blocks (Pro)
    • Mount Points (Pro)
    • Front-end assets management (Pro)
  • 🦸‍♂️Query Content
    • Basic Filters
    • Meta Filters (Pro)
      • Current Post
      • Comparison
      • Dynamic Injection
    • Taxonomy Filters (Pro)
    • Pagination (Pro)
    • Custom Data (Pro)
  • 🏆Shortcode Attributes
    • Common Arguments
    • View Shortcode
    • Card Shortcode
  • 🧙‍♂️Templates
    • Customizing the Template
    • Template engines
      • Twig
      • Blade
    • CSS & JS
      • BEM Methodology
      • WordPress Interactivity API
    • File system storage
    • Pre-built components
    • Reusable components library (Pro)
    • Live reload
    • Multilingual
    • Custom Ajax & Rest API (Pro)
  • ☕Guides
    • Display Custom Post Type (CPT) on another post
    • Display Employees (CPT) of a Company (CPT)
    • Display Nested Repeater Fields
    • Map Marker from ACF Image
    • Display all CPT items on a single map
  • 🛠️Tools
    • Export/Import
    • Demo Import
    • Settings
    • Preview
  • 🏹Troubleshooting
    • Compatibility
    • Report a bug
    • Payment Issues
    • Lite Support (Forum)
    • Pro Support
  • ⚙️Customization
    • Filters and Hooks
      • View
      • Card
    • Suggest a feature
    • Performance
Powered by GitBook
On this page
  • How to use it
  • Display term details (Pro)
  • As a list
  • As a grid
  • Displaying items as a Grid (Pro)
  • Displaying items as a Slider (Pro)

Was this helpful?

  1. Display Content
  2. Meta fields
  3. Relationship fields

Post_object

PreviousLinkNextPage Link

Last updated 1 month ago

Was this helpful?

The Post Object field type (e.g. ) 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 the Lite version, 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 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 View. With Advanced Views Pro, you can do this.

To display post details, follow these steps:

  1. Use the Advanced Views Pro plugin, 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 post_object 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 post_object 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 post_object 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.

As a list

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

As a grid

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

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

Displaying items as a Grid (Pro)

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

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

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 post_object = this.querySelector('.acf-views__post-object');
if (post_object) {
	/* https://splidejs.com/guides/options/ */
	new Splide(post_object, {
		type: 'loop',
		perPage: 1,
		perMove: 1,
	}).mount();
}

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

Group Author fieldand Groups also have the option to choose a View.

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

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

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 . Simply add the following CSS code to your View to achieve the desired grid layout:

Advanced Views comes with a , so you can easily turn the post object items into a slider.

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

🌟
Meta Filter
(Pro)
Post (WordPress)
Taxonomy terms (WordPress)
Flexbox
CSS Grid
CSS Grid
set of pre-configured JS libraries
Splide options
ACF Post Object
Repeater items as a Grid