Panel - Display the current position on structure entry (+ kirby-snippetfield)

Kirby 2 Solved ✅
, ,
1

Hi all,
I’m using the structure field associated with the plugin kirby-snippetfield. I want to know if it’s possible to display the current position number of each items in the panel ?

Thanks !

2

If you use an additional field in your structure and update this with a hook, then yes.

3

Before I try to make a Hook, (And spend some hours :smiley: ) I’ve already check how to get the position of each items for the snippet-field snippet. And it look like that nothing is stored. I’ve found nothing about getting the position of each items of a structure when we use the default sort.

In case, here the blueprint part concerned:

clients:
label: Clients
type: snippetfield
snippet: panel/clients-list
style: items
fields:
  logo:
    label: Logo
    type: image
    required: true
  show:
    label: Afficher ?
    type: checkbox
    text: Cocher pour afficher ce client dans la liste.
  position:
    label: Position
    type: text
    help: Position dans l'ordre d'affichage des clients.
    readonly: true
4

At the beginning, nothing would be stored, you would have to store something via your hook when the page is saved. The downside of this approach is, that the display. doesn’t change when an entry is moved.

The other option would be a custom field with some Javascript that updates the position fields display whenever an. entry is moved. That requires some coding, though.

What. is your use case for such. a position. number?

come to think about it, it might actually be possible to show something in. the Panel via the snippet without any hooks or custom fields.What does your snippet look like?

5

Hi, thanks for your reply.

I just want to show the position number like this (on the left) and update it when we change the order:

image
image.png1046×597 91.1 KB

And the snippet currently look like this:

<?php
$image       = $page->file($values->logo);
$clientName  = $image->client_name();
$clientDesc  = $image->attr_title();
$statusLabel = 'Masqué';
$statusClass = 'hide';
$statusIcon  = 'fa-eye-slash';

if($values->show === '1'):
    $statusLabel = 'Visible';
    $statusClass = 'show';
    $statusIcon  = 'fa-eye';
endif;
?>

<div class="client">
    <div class="client__pos">1</div> <!-- Position number here -->
    <div class="client__logo"><img src="<?= $image->url(); ?>" width="100" height="0" alt="<?= $clientName ?>" title="<?= $clientDesc ?>"></div>

    <table class="table-structure">
        <thead>
            <tr class="table-structure__row">
                <th class="client__name">Client</th>
                <th class="client__desc">Description</th>
                <th class="client__status">Statut</th>
            </tr>
        </thead>

        <tbody>
            <tr class="table-structure__row">
                <td class="client__name"><?= $clientName ?></td>
                <td class="client__desc"><?= $clientDesc ?></td>
                <td class="<?= "client__status client__status--{$statusClass}" ?>">
                    <i class="icon fa <?= $statusIcon ?>" aria-hidden="true"></i><span class="txt"><?= $statusLabel ?></span>
                </td>
            </tr>
        </tbody>
    </table>
</div>
6

You could do this with css only (link to codepen).
Just make sure to change the.clients class accordingly.

Edit since anonymus pens can’t get embedded:

.clients {
  counter-reset: clients;
}

.client {
  counter-increment: clients;
}

.client__pos::before {
  content: counter(clients);
}

<div class="clients">
  <div class="client">
    <div class="client__pos"></div>
  </div>

  <div class="client">
    <div class="client__pos"></div>
  </div>

  <div class="client">
    <div class="client__pos"></div>
  </div>
</div>
2 Likes
7

Why not with CSS?

.structure-entry:nth-child(1) .structure-entry-content:before {
  content: '1';
}
.structure-entry:nth-child(2) .structure-entry-content:before {
  content: '2';
}
.structure-entry:nth-child(3) .structure-entry-content:before {
  content: '3';
}
.structure-entry:nth-child(4) .structure-entry-content:before {
  content: '4';
}
...

Edit: Oops, Lukas was faster. And cleaner.

1 Like
8

How I didn’t think to do it in CSS… Thanks you !