Related articles with structured field

The CMS Questions
1

Hi there

Alright, I am having trouble getting structured content to work despite having read some articles about the matter. Maybe you folks can lend me a tought and a code.

What I want to do

A simple way for editors to manage / edit related articles by panel usage. In front end, the outputted list is an horizontal image slider with the items created via the panel. The slider-list is made up of the first image from each related article and an accompanying headline; See below.

Current approach that works fine but is bad for editors

At the moment I am using a simple text input field for creating a list with urls of the articles that should be related to one another. However this is too difficult for the editor to always manually write down such a list:

Panel

- blog/lorem-ipsum
- blog/dolor-sit-amet
- blog/nunc-consecitur

Blueprint

related:
  label:   Related articles
  type:    textarea
  buttons: false

Snippet

<ul>
  <? $n=0; foreach($page->related()->pages() as $r): $n++; ?>
    <? if($r->images() != ''): ?>
      <li>
        <a href="<?= $r->url() ?>" class="item<? if($n==1) echo ' active' ?>" title="<?= $r->title()->html() ?>">
          <h4><?= $r->title()->html() ?></h4>
            <? $image = $r->images()->first() ?>
            <img src="<?= thumb($image, array('width' => 174, 'height' => 150, 'crop' => true), false) ?>" />
        </a>
      </li>
    <? endif ?>
  <? endforeach ?>
</ul>

How I want it to be editable

I would like to change the usability in the panel to have Structured Field Content do the magic. But I can’t get the image thing in my markup (See above) to work with the panel output :flushed:

Blueprint

related:
  label:   Related articles
  type:    structure
  entry:   >
    {{relatedarticle}}
  fields:
    relatedarticle:
      label:   Article
      type:    select
      options: siblings

I hope you get what I mean or am trying to do :ghost: I need to get the structure type thing to be included in my snippet, but can’t get it to work because of the image thing…

2

You can use the contents of the structure field in a template in this way:

<ul>
  <? $n=0; foreach($page->related()->yaml() as $R): $n++; ?>
    <?php $r = $pages->find($R['relatedarticle']); ?>
    <? if($r->images() != ''): ?>
      <li>
        <a href="<?= $r->url() ?>" class="item<? if($n==1) echo ' active' ?>" title="<?= $r->title()->html() ?>">
          <h4><?= $r->title()->html() ?></h4>
            <? $image = $r->images()->first() ?>
            <img src="<?= thumb($image, array('width' => 174, 'height' => 150, 'crop' => true), false) ?>" />
        </a>
      </li>
    <? endif ?>
  <? endforeach ?>
</ul>

I just changed pages in the first line to yaml. That will generate an array ($page->related()->yaml()) out of the structure field contents. This array contains a list of arrays containing the fields of a structure entry. I named these arrays $R and saved the according page to $r.

You may use a::show($page->related()->yaml()) and a::show($R) to see the contents of both arrays.

In the docs:

If you want to view the images in the panel it is not possible at the moment. At least not with a prebuilt field. See Using Kirby’s power in entry of structure field.

Getting inside structured content
3

Hi Tobias, sorry for the laaate response. Haven’t been around the forums for quite a while. Really need to test your code, actually it might help me with this problem as well! :flushed: