Add images on top instead to the end of list in the panel

The CMS Questions
1

I searched the forum and found New uploaded file on first position in the panel - but flip:true turns around the whole set of images but sorts in alphabetical order.
I want to add images in the order I upload them to the panel. If I upload new images they shall be added to the top list - also in the order I uploaded them:
Uploading images 10 9 8 should end up in a list of 10 9 8
Afterwards adding images 1 2 3 should end up in the complete list of: 1 2 3 10 9 8

I also tried a hook in config.php

  'hooks' => [
    'file.create:after' => function ($file) {
      $page = $file->page();
      if (method_exists($page, 'changeFileSortOnUpload')) {
        $page->changeFileSortOnUpload($file);
      }
    }
  ],

the model for this looks like this album.php:

class AlbumPage extends Page {
  public function cover() {
    return $this->content()->get('cover')->toFile()
      ?? $this->images()->template('image')->first()
      ?? $this->images()->first();
  }

  public function changeFileSortOnUpload($file) {
    // Neue Datei bekommt Sort-Position 1
    $file->changeSort(1);

    // Alle anderen Dateien nach hinten schieben
    $i = 2;
    foreach ($this->files()->not($file) as $f) {
      $f->changeSort($i);
      $i++;
    }
  }
}

But that did not work either - ending up several images with Sort: 1 and mixed up with alphabetic sorting.

Any idea how I can achive my goal?

Thanks, Bernd.

2

It might help thinking about it differently. What you want is saving a timestamp the moment you upload a file and then sorting by that (descending).

3

hello thguenther, thanks for your suggestion. Sorting by date - which is updated, when picture is changed, is quite a good idea. But I don’t want to ruin the possibility to sort the pictures by hand.
I will explain, what I tried and how kirby behaves. I use an example, so it is more obvious.

I want to upload some pictures: A, B, C, D, E, F, G.jpg
First I upload: C, B, A reverting the name order in the upload control:
This will be sorted like this in panel and frontend: C, B, A with sort: C=1, B=2, A=3
That is correct.

Next I upload one additional picture to the album: D
This will be uploaded with the help of the hook in this order: D, C, B, A with sort: D=1, C=2, B=3, A=4
That’s correct too

Changing order of the files within the panel using drag and drop or the three dots … will work perfectly.

Next try: I will upload F, E
This is shown in panel as: E, F, D, C, B, A with sort: E=1, F=1, D=2, C=3, B=4, A=5
That is incorrect. Correct would be: F=1, E=2, D=3 … and the order should be F, E, D, …
The order of the pictures is now determined by name as sort is the same for the newly uploaded pictures.

Next uploads would mess up things even more.
To get the field sort at the first upload I had to change sort in image.yml:
sort:
label: Sortierung
type: number
alt:
label: Alternative Text
type: text

Summarizing the problem is within the multiple file upload and setting Sort with this control. I am now trying to figure out when the hookes are fired, so I could change the field sort accordingly.

Any suggestions are wellcome :slight_smile:

4

I don’t think this combination can work.

What you’d need for this to work is Kirby being aware of the file that’s being manually sorted. Because as far as I understand it, sorting will touch all the files, giving them the right values in their sort field.

5

After a lot of frickling, I managed to get a sort of solution. As long upload works fine and images are not too different in size it works.

Just in case someone else can use it or for ideas how to solve this better, I upload here the two files of the plugin:

index.php

<?php

Kirby::plugin('sehfelder/ebid-upload-sort', [
  'areas' => [
    'site' => function () {
      return [
        'buttons' => [
          'page.sort-anti-alpha' => function ($page) {
            if ($page->intendedTemplate()->name() !== 'album') {
              return null;
            }

            return [
              'component' => 'k-sort-anti-alpha-view-button',
              'icon' => 'sort',
              'text' => 'Z-A',
              'title' => 'Bilder anti-alphabetisch sortieren',
              'pageId' => $page->id(),
            ];
          }
        ]
      ];
    }
  ],
  'api' => [
    'routes' => [
      [
        'pattern' => 'ebid-upload-sort/multiupload-finished',
        'method' => 'POST',
        'action' => function () {
          $pageId = $this->requestBody('pageId');
          $count  = (int)$this->requestBody('count');

          // Sicherheitsabfragen
          if (is_string($pageId) !== true || $pageId === '') { throw new Exception('Missing pageId'); }
          if ($count <= 0) { throw new Exception('Invalid count'); }
          $page = page($pageId);
          if (($page instanceof \Kirby\Cms\Page) === false) { throw new Exception('Page not found'); }
          if ($page->intendedTemplate()->name() !== 'album') { throw new Exception('Not an album page'); }

          $line = sprintf(
            "[%s] page=%s uploaded=%d%s",
            date('Y-m-d H:i:s'),
            $page->id(),
            $count,
            PHP_EOL
          );

          file_put_contents(
            $page->root() . '/.multiupload.log',
            $line,
            FILE_APPEND
          );

          // Sortierung ändern
          $sortedFiles = $page->files()->sortBy('sort', 'asc');
          $fileIds     = [];

          foreach ($sortedFiles as $file) {
            $fileIds[] = $file->id();
          }

          $count = min($count, count($fileIds));

          if ($count > 0) {
            $front = array_slice($fileIds, -$count);
            $back  = array_slice($fileIds, 0, count($fileIds) - $count);

            $sortedFiles->changeSort([...$front, ...$back]);
          }

          return [
            'status' => 'ok',
            'page' => $page->id(),
            'count' => $count
          ];
        }
      ],
      [
        'pattern' => 'ebid-upload-sort/sort-anti-alpha',
        'method' => 'POST',
        'action' => function () {
          $pageId = $this->requestBody('pageId');

          if (is_string($pageId) !== true || $pageId === '') {
            throw new Exception('Missing pageId');
          }

          $page = page($pageId);

          if (($page instanceof \Kirby\Cms\Page) === false) {
            throw new Exception('Page not found');
          }

          if ($page->intendedTemplate()->name() !== 'album') {
            throw new Exception('Not an album page');
          }

          $sortedFiles = $page->files()->sortBy('filename', 'desc');
          $fileIds     = [];

          foreach ($sortedFiles as $file) {
            $fileIds[] = $file->id();
          }

          if (count($fileIds) > 0) {
            $sortedFiles->changeSort($fileIds);
          }

          return [
            'status' => 'ok',
            'page' => $page->id(),
            'count' => count($fileIds)
          ];
        }
      ]
    ]
  ]
]);

index.js

const uploadState = new Map();
const FLUSH_DELAY_MS = 10000;

function currentPage(panel) {
  return panel.$panel?.view?.props?.model ?? null;
}

function scheduleFlush(panel, pageId) {
  const state = uploadState.get(pageId);

  if (!state) { return; }

  if (state.timer) { clearTimeout(state.timer); }

  state.timer = window.setTimeout(async () => {
    uploadState.delete(pageId);

    try {
      await panel.$api.post("ebid-upload-sort/multiupload-finished", {
        pageId,
        count: state.count,
      });

      panel.$events.emit("model.update");
      panel.$panel.notification.success({
        message: `${state.count} Bild(er) hochgeladen und umsortiert`,
      });
    } catch (error) {
      console.error(
        "[ebid-upload-sort] Batch-Ende konnte nicht gemeldet werden",
        error,
      );
    }
  }, FLUSH_DELAY_MS);
}

panel.plugin("sehfelder/ebid-upload-sort", {
  viewButtons: {
    "sort-anti-alpha": {
      props: {
        icon: String,
        pageId: String,
        text: String,
        title: String,
      },
      methods: {
        async sortAntiAlpha() {
          try {
            await this.$api.post("ebid-upload-sort/sort-anti-alpha", {
              pageId: this.pageId,
            });

            this.$events.emit("model.update");
            this.$panel.notification.success({
              message: "Bilder anti-alphabetisch sortiert",
            });
          } catch (error) {
            this.$panel.notification.error({
              message: error.message ?? "Sortierung fehlgeschlagen",
            });
          }
        },
      },
      template: `
        <k-view-button
          :icon="icon"
          :text="text"
          :title="title"
          @click="sortAntiAlpha"
        />
      `,
    },
  },
  created(panel) {
    panel.$events.on("file.upload", () => {
      const page = currentPage(panel);

      if (!page?.id) { return; }
      if (page.template && page.template !== "album") { return; }
      if (!uploadState.has(page.id)) { uploadState.set(page.id, { count: 0, timer: null }); }

      const state = uploadState.get(page.id);
      state.count += 1;

      scheduleFlush(panel, page.id);
    });
  },
});

I would greatly appreciate it if Kirby could do something to better sort uploaded images.