Related articles with structured field

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…

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.

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: