Manual sorting of images does not work

trych · February 25, 2020, 9:32pm

I am trying to get images to show up in a manually sorted order in my front end, which does not work.

In my template I use

  <?php
    $imgs = $site->homePage()->images()->sortBy('sort');
  ?>

  <div>
    <?php foreach ($imgs as $img): ?>
      <img src="<?= $img->url() ?>" alt="">
    <?php endforeach ?>
  </div>

I realize this does not work since the images do not have a sort field in their accompanying text file (as I had in past projects). However, I am unable to find out how to automatically add this sort field, so the images can get sorted.

Help would be appreciated, thanks!

texnixe · February 25, 2020, 10:30pm

The sort field is added when you manually sort images in the Panel.

trych · February 25, 2020, 11:07pm

That’s what I initially thought as well. However, I sorted images in the panel and it still does not add a sort field to the images’ text files. Any idea what could be wrong?

texnixe · February 25, 2020, 11:11pm

Is it a single or multi language site? Does really none of the images get a sorting number when you drag&drop them into another position?

Are you using a files section? Or a files field?

trych · February 25, 2020, 11:15pm

It’s a single language site. Not a single one of the images gets a sorting field. I am using a file section.

I am using this file section in the site.yml file and use a parent: kirby.page("home") field with it, I wonder if that’s related to the issue?

texnixe · February 25, 2020, 11:17pm

Could you please post the blueprint?

trych · February 25, 2020, 11:18pm

Here is the complete blue print:

title: Site


columns:
  - width: 3/4
    sections:
      imgsection:
        headline: Bilder
        type: files
        template: image
        parent: kirby.page("home")
        layout: cards
        size: tiny
        limit: 100
        empty: Noch keine Bilder hinzugefügt.

  - width: 1/4
    fields:
      name:
        label: Name
        type: text
      phone:
        label: Telefon
        type: tel
      email:
        label: Email
        type: email

texnixe · February 25, 2020, 11:35pm

Hm, yes, I can reproduce this with 3.3.4. Are you using the same version?

There is already an issue: https://github.com/getkirby/kirby/issues/2342

trych · February 25, 2020, 11:50pm

I am using 3.3.2, but I guess since the issue is still open, there is no fix yet.

What would be my easiest way to work around that for now? The only thing I need to achieve is to have a files section on the first (‘site’) page of the panel. Any way to achieve this without the parent option?

texnixe · February 26, 2020, 7:24am

Try to not set the parent option, then files are stored in the site instead of the given page (in my test this worked). Not useful, if you actually want to store the images in the home folder, though.

trych · February 26, 2020, 9:51am

Ok, thanks, this easy fix works great for me in my specific case. Was not quite aware that the site itself can also hold media files.
Do I leave this question marked as issue or should I mark it as solved as there is already a GitHub issue to track the bug?

texnixe · February 26, 2020, 9:58am

Let’s leave it marked as an issue, so we can track this once the issue is solved.

bootbricks · March 28, 2020, 2:55pm

Hello had kirby 3.3.3 an I had this issue, updated to 3.3.5 and still have.
No sort data is saved in image.jpg.txt file
It just changes the sort order of the names of the images in the property.txt file

Can I do anything to solve it?

Thank You

In my template I have:

     <?php foreach($page->images()->sortBy('sort') as $image): ?>

<?php echo $page->title()->html() ?>

                <?php endforeach ?>

My Blueprint:
title: Property

status:
  draft: true
  listed: true

columns:
  - width: 1/2
    fields:
      text:
        label: Text
        type: textarea
        size: large
      metadescription:
        label: Meta Description
        type:  text
        icon:  info-circle

  - width: 1/2
    fields:
      codigo:
        label: Código Buscador 
        type: text
      calendario:
        label: Código Calendario
        type: text
      imagenes:
        label: Imagenes
        type: files
        layout: cards
        uploads: image
        image:
          ratio: 8/4
          cover: true
        min: 1
        size: small

And Blueprint Image:
title: Image

accept:
  mime: image/jpeg, image/png

columns:
  - width: 1/2
    sections:
      content:
        type: fields
        fields:
          caption:
            label: Caption
            type: textarea
            size: medium
  - width: 1/2
    sections:
      meta:
        type: fields
        fields:
          alt:
            label: Alternative Text
            type: text
          photographer:
            label: Photogapher
            type: text
            width: 2/3
          license:
            label: License
            type: select
            width: 1/3
            options:
              - Unsplash
              - CC BY 4.0
              - CC BY-SA 4.0
              - CC BY-NC 4.0
              - CC BY-ND 4.0
          link:
            label: Link
            type: urlPreformatted text

texnixe · March 28, 2020, 3:35pm

@bootbricks You are using a files field, not a files section. A files field is basically a select field for files and stores the selected files in the page’s content file. Sorting the order of these files doesn’t change the sort field in the file meta data.

More information field vs section: http://getkirby.test/docs/cookbook/setup/kirby-in-a-nutshell#sections-or-fields__files-section-vs-files-field

bootbricks · March 28, 2020, 7:51pm

Great! Thank You
Maybe that should be written in that page too:

Thank You

Bristolscript · August 20, 2021, 8:13am

For me its also not working… “foreach($item->images()->sortBy(‘sort’) as $image) {”
My blueprint looks like this:

  fields:
      images:
        type: files
        layout: cards
        template: image
        info: "{{ file.dimensions }} ({{ file.niceSize }})"
        image:
          ratio: 5/4
          cover: true
        size: small

Kirby version 3.5.0 So problem is in “type: files”? Is there way to convert to files section without loosing existing data and structure?

pixelijn · August 20, 2021, 8:28am

With $item->images()->sortBy(‘sort’) you fetch all images from the folder, not from your field.

Since your field has the same name as Kirby’s native method, you have to get your images via content and then convert into a files collection with toFiles():

$images = $page->content()->get('images')->toFiles();

This will give you the collection as stored in the content file.

If you instead want to sort by the sorting number in the file meta data, you can of course append sortBy('sort') to this collection, but I assume you want them in the order in which they appear in the field.

And yes, you can convert the field into a files section, of course, but keep in mind that a section will contain all images with the template “image” in the folder, not only the ones selected in the field.

In your template, you would then have to filter your files by that template.

Topic		Replies	Views
Manual sorting on files section does not reproduce on frontend until at least one file dragged Solved ✅	7	352	August 22, 2020
Image sorting does not work Kirby 3	7	356	December 10, 2020
Default sorting prior to "manual" sorting Questions 🤔 panel	2	465	August 13, 2020
Sortable files section does not return sorted collection Solved ✅	7	504	January 25, 2020
Images .txt files not recording sorting position Questions 🤔 panel	4	383	October 10, 2019

Manual sorting of images does not work

Related Topics