Jump to content
Robert Zelník

How to change the order of images

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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);
			}
		}
	}
});

 

  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...