How to change the order of images

[Robert Zelník]

Is there any way how to set the order of images in the backend editing so that the last added image would be placed at the top of the list instead of the bottom?

[dab]

Is this any use?

 

[Robert Zelník]

Let me explain my use case: I would like to create a photo gallery where the newly added images are placed on the top. There are two ways how to show newly added images on the top of the list in the frontend:

1. template renders the images in reverse order,

or

2. web site admin moves all the added images manually from the bottom to the top of the list.

Both ways are unintuitive.

I like the Children > Sort Children setting that allows to change the order of child pages in the backend. It would be useful to have a similar feature in the images field.

Is there any other way how to sort images in reverse order (new images on the top) and see them in the same order in both frontend and backend?

[ngrmm]

here are some solutions:

 

 

[Robin S]

1 hour ago, Robert Zelník said:

Is there any other way how to sort images in reverse order (new images on the top) and see them in the same order in both frontend and backend?

Yes, this is easiest to do if you apply the sorting as the page is saved. So you won't see the sorting immediately after the images are uploaded, but will see the sorting after the page is saved and Page Edit reloads. In the examples below you would add the hook code to /site/ready.php

1 hour ago, Robert Zelník said:

I like the Children > Sort Children setting that allows to change the order of child pages in the backend. It would be useful to have a similar feature in the images field.

The sort settings for child pages prevents the editor from making any other sort order apart from the one specified. So if you want something like that for images, where the newest images are sorted first, it's very simple:

$pages->addHookAfter('saveReady', function(HookEvent $event) {
	$page = $event->arguments(0);
	$pages = $event->object;
	if($page->template == 'your_template') {
		if($page->isChanged('your_images_field')) {
			// Sort the images from newest to oldest
			$page->your_images_field->sort('-created');
		}
	}
});

But if you want to sort newly uploaded images first once the page is saved, but still let your editors customise the sort order after that, then you can use this hook:

$pages->addHookAfter('saveReady', function(HookEvent $event) {
	$page = $event->arguments(0);
	$pages = $event->object;
	if($page->template == 'your_template') {
		if($page->isChanged('your_images_field')) {
			// Get the old version of the page, without the current changes 
			$old_page = $pages->getById($page->id, [
				'cache' => false,
				'getFromCache' => false,
				'getOne' => true,
			]);
			// Get the names of the existing images on the old page
			$existing_image_names = $old_page->getFormatted('your_images_field')->implode('|', 'basename');
			// Get the newly added images
			$new_images = $page->your_images_field->find("basename!=$existing_image_names");
			// Prepend the new images to the start of the Pageimages WireArray
			foreach($new_images as $new_image) {
				$page->your_images_field->prepend($new_image);
			}
		}
	}
});

 

[Robert Zelník]

It works as expected, thank you for all your solutions.