In this example we show you how a bi-directional relationship between a writer CPT and a book CPT can be worked into your Beaver Themer layouts.

Prerequisites

If you need help on how a relationship field works and how to implement ACF Post-2-Post, you can take a look at this doc page.

Layout walkthrough

The video shows you how to create the basic layouts in realtime, a little over 20 minutes from start to finish.

Twig templates used

You can find the used Twig templates below.

  • Twig template frontpage
      {% for item in posts %}
      <a href="{{item.link}}"<h3>{{item.title}}</h3></a>
    {% endfor %}</code></pre>
    
  • Twig templates Singular Writer
      {% if __field__|length > 0 %}
      <h3>Books by this writer:</h3>
      <div class="uk-child-width-1-1 uk-child-width-1-5@s uk-grid-small" uk-grid>
      {% for item in __field__%}
        {% set item = Post(item) %}
        <div>
          <div><a href="{{item.link}}"><img src="{{TimberImage(item.thumbnail).src('thumbnail')}}" alt="{{TimberImage(item.thumbnail).alt}}"></a></div>
        </div>
      {% endfor %}
      </div>
    {% endif %}
    
  • Twig template Singular Book
      {# get the first writer for this book as a post object #}
    {% set writer = Post(__field__|first) %}
    {# now get the writerbook_rel field (the books) on that writer #}
    <div class="uk-child-width-1-1 uk-child-width-1-5@s uk-grid-small" uk-grid>
    {% for item in writer.writerbook_rel|slice(0,5) if item != post.ID %}
      {% set book = Post(item) %}
      <div>
        <a href="{{book.link}}"><img src="{{TimberImage(book.thumbnail).src('thumbnail')}}"></a>
      </div>
    {% endfor %}
    </div>