Frontend ignores image sorting via panel

[maxikowski]

Hello there,

I’m brand new to Kirby and cms usage in general. I get along with html/css but I’ve never worked with php. I have created a site on my local machine which is based on the plain-kit and everything’s running nice - but one thing won’t work: If I change the sorting of images in the panel this won’t be applied to the frontend. The frontend just sets the order of images by the file names. I spent hours and hours trying different things and I inspected the snippets, templates and blueprints of different themes but I can’t figure it out.

So, the question is: Where should I look or what could I show here to proceed? I’m suspecting some very general and easy issue but I’m completely stuck

Thanks for a hint.

Max

[fumatore]

You have to check if the blueprint or the template is organizing the order of the images. There are defaults as well as hierarchies when it comes to which is being implemented.

Sorting

Page blueprint

[maxikowski]

Ok, thanks for the reply. I will check if this helps

[kinkwilde]

You’re not the only one that is having this problem.

templates/album.php

<?php foreach ($gallery as $image): ?>
                <figure class="c-album__photo">
                    <a href="<?= $image->link()->or($image->url()) ?>" class="c-album__link">
                        <img src="<?= $image->thumb(['blur' => '100', 'q' => 10, 'fp-x' => $image->focusX(), 'fp-y' => $image->focusY()])->url() ?>" data-src="<?= $image->thumb(['fp-x' => $cover->focusX(), 'fp-y' => $cover->focusY()])->url() ?>" alt="<?= $image->alt() ?>" class="c-album__img j-lazy">
                    </a>
                </figure>
            <?php endforeach ?>

controllers/album.php

$images = $page->images()->sortBy('sort');
$gallery = $images->not($cover);

blueprints/pages/album.yml

  # images
  images:
    type: files
    label:
      en: Files
      de: Files
    template: image
    image:
      cover: true
      ratio: 5/4
    info: "{{ file.dimensions }}"
    layout: cards
    min: 3
    required: true
    size: small

No matter what I sortBy it does not change the order of my images.

[jimbobrjames]

@kinkwilde

$images = $page->images()->sortBy(‘sort’);

I dont think ‘sort’ is valid, it needs to be something like->sortBy('modified', 'asc') to sort them by date modified in ascending order. You can also sort on things like filename. sortby uses the value of fields to sort on though, so these field needs to exist in the files meta data.

To have precise control over the sorting, you can use a files field (this is not the same as a files section. A file section does not store anything.) Using the files field will allow you to set the order in the panel by drag and drop.

[kinkwilde]

Sorting

It’s in the documents and as I said no matter what I try to sortBy it does not change the order of the images.

And if you look at my blueprints/pages/album.yml for the files field I posted above I can already do drag drop bla bla…

[jimbobrjames]

@kinkwilde

And if you look at my blueprints/pages/album.yml for the files field I posted above I can already do drag drop bla bla…

You didnt post the whole blue print, it’s not easy to tell the difference without seeing it in context.

As i said the sort field needs to be present in the files meta, with a value to sort on.

[jimbobrjames]

@kinkwilde

why don’t you provide an example…

https://getkirby.com/docs/guide/content/files#meta-data-blueprints-for-the-panel

[jimbobrjames]

@kinkwilde

Do you honestly think you are helping?

Yes i do.

As ive explained - You need a field in the files metafile called “sort” - you can call it what you like, but it needs some kind of value. It needs some kind of value to sort on. If you give the field another name you need to change “sort” the whatever you called it. Thats a link to the help guide on setting meta data.

$files = $page->files()->sortBy('whateveryoucalledthefield');

[jimbobrjames]

@kinkwilde

Do you see the starterkit doing anything you’ve said? Do you see how the code I posted above is pretty much the same as the starterkit.

So unless you can actually give me a valid point anything you say is useless… Read the documentation and you will realise this is how you are told to do it…

Your attitude isn’t encouraging anyone to help you. May I suggest you change it?

Do your images actually have a value in the sort field in the meta data, like the original content does for the starter kit?

See the sort field entry right at the bottom?

https://github.com/getkirby/starterkit/blob/master/content/1_photography/1_animals/abba.jpg.txt

[lukaskleinschmidt]

No offense but your tone is way off. Always keep in mind that everyone around here is trying to help and most of us do this in their spare time too. These are some rude responses you throw at someone who is trying to help you. It is just inappropriate!

[maxikowski]

I’m sorry that my very first thread escalated that quickly.
On the other hand I’m thankful for the new insights.

The meta data files that match my actual images do contain values for the sort field like shown above when. And these values even change when I rearrange the images in the panel. But the frontend ignores these values. Is something else missing?

Here’s my markup (do I have to add something regarding sorting?):

<div class="image-gallery-container">
  <?php foreach ($page->images() as $image): ?>
    <figure>
        <a href="<?= $image->link()->or($image->url())?>" data-lightbox="gallery">
          <?= $image->resize(400) ?>
        </a>
    </figure>
  <?php endforeach ?>
</div>

It could be possible that it does not match the following code:

return function ($page) {

    $gallery = $page->images()->sortBy("sort");

    return [
        'gallery' => $gallery
    ];

};

I also have an image.yml (that one from the starter-kit) but it has no effect. Otherwise it does not contain anything related sorting, I guess. This makes me think if it is needed at all in this case. Just wondering.

Thank you very much for further help. I’d like to understand what’s happening here

Max

[maxikowski]

Yay! Got it!!

I just had to add ->sortBy(‘sort’) to my markup:

<div class="image-gallery-container">
  <?php foreach ($page->images()->sortBy('sort') as $image): ?>
    <figure>
        <a href="<?= $image->link()->or($image->url())?>" data-lightbox="gallery">
          <?= $image->resize(400) ?>
        </a>
    </figure>
  <?php endforeach ?>
</div>

Now I can sort the images via the panel!

[texnixe]

@maxikowski Glad you sorted it out.

And sorry to everyone who had to suffer the tone in this thread. This is not the way we usually communicate here and definitely not the tone we want in our community. As you can see, I deleted those posts. I wasn’t around yesterday to take immediate action.

Thanks @lukaskleinschmidt for taking the initiative.

[kinkwilde]

Sorry about Friday. I was getting frustrated, I know it doesn’t excuse my actions but there it is.

The source of my problem arises from the re-structuring of my blueprints.

Broken pages/album.yml

# TABS
tabs:

  # TAB: Photos
  tabPhotos:
    label:
      en: Photos
      de: Photos
    icon: image

    # SECTIONS
    sections:

      # SECTION: Photos
      photos:
        type: fields
        fields:

          # images
          images:
            type: files
            label:
              en: Files
              de: Files
            template: photo
            image:
              cover: true
              ratio: 5/4
            info: "{{ file.dimensions }}"
            layout: cards
            min: 3
            required: true
            size: small

Working page/album.yml

# TABS
tabs:

  # TAB: Photos
  tabPhotos:
    label:
      en: Photos
      de: Photos
    icon: image

    # SECTIONS
    sections:

      # images
      images:
        type: files
        label:
          en: Files
          de: Files
        template: photo
        image:
          cover: true
          ratio: 5/4
        info: "{{ file.dimensions }}"
        layout: cards
        min: 3
        required: true
        size: small

The problem was that files were ignoring the file blueprint and when saving an album, it would simply write the images in their order on the album.txt file and not store the sort order on the image.txt file.

After removing the section called photos that has a type of fields and making images the section with a type of files, everything works as expected.

If someone could shed some light on why / what’s wrong that would be great - I’m assuming I should be able to put type: files in a section of type: fields? If yes, i’m assuming that I should expect the same behaviour no matter where I put my type: files whether it be it’s own section or nested in another one.

[texnixe]

The difference here is that in your first example the “thing” with the images is a files field, in the second example, it is a files section. Both have similar options to some extend but work differently.

[kinkwilde]

What would be a use case for each? Why wouldn’t they work the same?

[texnixe]

Basically, a files field is an extended select field. Whereas a files section is an upload area.

See also here: Is it possible to make Upload default and only option in files field?