How to display ACF Relationship posts in a grid

ACF Relationship component for Elementor free version is a very useful widget with which you can build posts grid with the ACF relationship field which is valued on the current post.
The ACF Relationship/Post objects are fields that allow you to create ‘Parent/Child’ type relationships, establish related content link or share data of the same nature.

The component also works fine with the ACF ‘Post object’ field.

Table of Contents

How to activate ACF Relationship grid

The Relationship field provides a dual-column component to select one or more posts, pages or custom post type items.
You have created the group and the ‘Relationship’ type field in ACF.

You have selected the posts / pages / CPTs and saved the post.

Open it in the Elementor editor.

The ‘Elementor‘ plugin is installed and active.

The ‘ACF‘ plugin is installed and active. 

The ‘EAC components‘ plugin is installed and active.

From the settings panel you have to drag & drop the ‘ACF Relationship‘ icon on the panel preview.

Select the source and filter the post types

As you can see, you can select any of the Relationship or Post objects field as the source. These fields support ‘Post object‘ or ‘Post id‘ formats.

The field ‘Posts count‘ lets you to select how many posts you want to display in the grid. Very useful if you want to display, for example, the first three posts as related posts.

With the section Layout you can select the rendering mode between a grid or a slider the number of columns per row that will be showed for each device.
For the Slider mode you will find in this post the description of the elements and their behavior.

Select the content you want to display

In the Content section you will select what parts you want to show for each post and add the post link on the picture.

Image gallery content

By default il the grid layout mode the Image ratio feature is enabled and you can position the image vertically.

Image gallery image

Styling the post grid

Global section: Select the desired style who will be applied to the posts and the bottom margin.
Title, Date and Excerpt sections: Change font size and font color.
For the Image you can add a border radius and stylize the border.

9 thoughts on “How to display ACF Relationship posts in a grid”

  1. Cześć! Hi! I have a problem. Unfortunately, in the “Relational Field” list, I cannot see the relationship fields I have created in AFC. What may be the problem? Thank you in advance!

    Reply
    • Hi Marcin,
      I assume you are up to date with ACF and EAC versions and saved the post well before editing it with Elementor.
      First, in your post, add a ‘Text editor’ widget, open the list of dynamic tags and select the entry ‘ACF relational’ and tell me if you find the field in the list
      Second, proceed in the same way and select, this time, the entry ‘ACF Text’ and tell me if you find the field in the list
      Finally you can look at the traces in ‘Elementor/System info’, section ‘Log’ if you find data related to EAC.
      Rgds

      Reply
  2. Hi,
    Incredible plugin! You need to publish it on the wordpress repository !
    The images on the ACF RELATIONSHIP GRID are not displayed. The Feature Image option is checked and is configured on the displayed items. And then I check “date” or “except”, they show up.

    Reply
    • Hi Valentin,
      Sorry for the inconvenience but i just tested the ‘ACF Relationship grid’ component with version 1.9.6 and the behavior of the image is consistent and displays correctly with or without the ‘Date and/or excerpt’ options checked.
      Rgds

      Reply
      • Ok my bad.
        After a some research, I didn’t authorized featured images request from my ACF plugin.

        Thanks a lot !

        Reply
  3. Hi There,

    Thanks for providing this nice plugin. I have two questions:

    1. loading the relational posts into another post works fine, but somehow mij ACF (custom) shortcodes all just return ” (an empty string) even if i include a fallback value. It seems it does know (from within the template header files) that the shortcode is active, but seems unable to actually run the shortcode function. Could you help out here? Or is this a limitation of this plugins post query?

    2. How can we add custom styling/formatting templates apart from the 20 (pretty flamboyant) versions included? It would be lovely to created custom standards per theme/site and not having to add custom css each post template.

    Reply
    • Hi Tije
      Thank you for your feedback
      1) I understand that you want to execute a shortcode in a template of which at least one of the parameters is an ACF (Relationship) dynamic field.
      You know that the scope of each ACF field is limited to the post in which it is filled in.
      Perhaps you should use the ‘ACF Options Page‘ which have field values ​​global to the site.
      2) At the moment our development roadmap does not include extending ‘custom CSS’ to a theme or site.
      Rgds

      Reply
      • Hi Chichille,

        Thanks for the quick reply! For point 2 you could look into supporting another elementor plugin that already fixes this.

        For point 1, which is more important to me… i’m aware of this and wrote a custom function to get an acf from the parent page (embedding the related posts). This works on all other instances. And the shortcode gets called since the [field text] is replaced with nothing. But it always replaced with “” (empty string) even when i skip the function and try to replace a dummy text. So it looks like the eac blocks this somehow. Any pointers where i should look?

        Reply
        • Hi Tije,
          It’s tricky to orient you without code and without precise context, except that the dynamic tags (ACF included), as you know, look for their values ​​for the ID of the current post and not in the parent.
          Really sorry for not being able to help you more but you could replace the dynamic tag in your shortcode with a function of this type:
          “function get_inherited_field( $field ) {
          $value = get_field($field);
          if (!$value)
          $value = get_field( $field, wp_get_post_parent_id( get_the_ID() ) );
          return $value;
          }”
          Rgds

          Reply

Leave a Reply to valentin Cancel reply