Jump to content

Sorting images in Backend


Recommended Posts

Hello all,

My page has a lot of images. I created a gallery_image field to upload and display them. Unfortunately they are sort of unordered in the backend, though the filenames are numbered sequentially. I understand that this reflects the order of finished uploads. I figured out how to sort them on the frontend, but is there a way to do the same in backend?

I guess this HookAfterPagesSave.module
found here https://processwire-recipes.com/recipes/extending-page-save-process/
might do the trick but I'm too new to processwire and too unexperienced in coding to see what code to write.

Anyone can help?
Thanks in advance

Link to comment
Share on other sites

This is what would need to be in the afterSaveReady function. But keep in mind that this will deny any attempt to sort images in the backend manually. 

// Get the soon to be saved page object from the given event
$page = $event->arguments[0]; 

// Sample condition and changes
    $page->images = $page->images->sort("basename");
    // Page will be saved right after this hook, so no need to call save().
    // Every other page you load and edit here needs to be saved manually.
    $this->message("Images have been sorted");
  • Like 1
Link to comment
Share on other sites

Hi Hanna,

I have used another approach on a site with many images where the user want his images sorted in alphabetical order only initially, but want to be able to reorder them manually later on a bit.

Maybe this sounds a bit clumpsy now, but we have added a link for the imagesorting to the frontpage only for superusers or imageauthors, like with the common edit-this-page link in PW's default site-profiles:

if ($page->editable()) {  // add edit link(s) to it, if the current user has edit rights
    $s .= "<li class='left'><a id='editpage' title='diese Seite bearbeiten' href='" . wire('config')->urls->admin . "page/edit/?id={$page->id}'><i class='fa fa-edit fa-lg'></i></a></li>\n";
    if ('gallery' == $page->template) {  // add an imagesort-link to it, if it is a gallery page
        $s .= "<li class='left'><a id='editpageSortimages' onclick=\"return areUreallySure('Bilder für dieses Archiv ({$page->archivnummer}) jetzt alphabetisch sortieren?');\" title='sortiere Bilder alphabetisch' href='/pwSortPageimages.php?id={$page->id}'><i class='fa fa-sort-alpha-asc'></i></a></li>\n";

So, from the backend the user has to click on the view button first, then in frontend click the sort-my-images button, which calls the following bootstrap-script which resides in the pw root (pwSortPageimages.php):


// define userroles that are allowed to work with this script, like: superuser|editor|author
$userRolesSelector = 'superuser|publisher|author';


// check if we have got an id
$pageId = isset($_GET['id']) && is_numeric($_GET['id']) ? intval($_GET['id']) : false;
if (false===$pageId) {
	header('HTTP/1.1 403 Forbidden');

// bootstrap PW
require_once(dirname(__FILE__) . '/index.php');

// check user-account
$validUser = false;
$roles = explode('|', $userRolesSelector);
foreach($roles as $role) {
    if (wire('user')->hasRole($role)) $validUser = true;
if (!$validUser) {
	header('HTTP/1.1 403 Forbidden');

// check if id points to a valid page
$p = wire('pages')->get($pageId);
if ($p->id != $pageId || 'gallery' != $p->template) {   // check for a valid page id and also if the template matches the a gallery page
	header('HTTP/1.1 403 Forbidden');

// now we reset the order for the images field (change the name of your field if it is not named: images)

// and redirect to the page edit screen
$url = wire('pages')->get(2)->url . "page/edit/?id=$pageId";
header("location: $url");

This way the user has to click two times more if he want to sort his images in alphabetical order, but it gets only triggered on demand, plus the user can reorder them afterwards.

The link to start the sorting can also be injected into the admin-editscreen, what would be a bit nicer and saves one click.

Link to comment
Share on other sites


That sounds definitely clumpsy. What about some buttons in the page editor? Put this as is in /site/ready.php:

$wire->addHookAfter("ProcessPageEdit::buildForm", function(HookEvent $event){
	$process = $event->object;
	$form = $event->return;
	$page = $process->getPage();

	// Update to fit your fieldnames
	$imageFields = array("images");

	$multiple = $page->fields->find("name=" . implode($imageFields))->count() > 1;

	foreach ($imageFields as $field) {
		if($page->fields->has($field) && $page->editable($field)){

				$page->set($field, $page->get($field)->sort("basename"));
			$button = wire('modules')->get("InputfieldSubmit");
			$button->attr("id+name", "hook_sort_$field");
			$button->value = __("Bilder Sortieren");
			$button->value .= ($multiple ? " (" . $field->get("label|name") . ")" : "");
			$button->icon = "sort-alpha-asc";

			$form->insertBefore($button, $form->get("id"));
Edited by LostKobrakai
Small changes to the order
  • Like 6
Link to comment
Share on other sites


yes its definetly clumpsy, it is a solution from my early PW days where I wasn't able to inject buttons into the admin and I believe the ready.php wasn't introduced. :)

Your code is the perfect, none-clumpsy addition to the bootstrap-sorting-script. ^-^

Link to comment
Share on other sites


This is awsome!

Thanks so much for this piece of code. I still have to learn a lot till I can do this on my own.

Works like a charm ... I only had to update my PW from master 2.6.1 to the dev branch (Use of ready.php requires at least PW 2.6.7 I guess).

The module code you helped me with in your first answer would probably do, but adding an extra button is of course much nicer.


Thank you very much for your code as well.

I'll take it to study how things work in PW. Maybe it helps me with other tasks later on ...

Again ... Thanks to both of you.

  • Like 3
Link to comment
Share on other sites

I only had to update my PW from master 2.6.1 to the dev branch (Use of ready.php requires at least PW 2.6.7 I guess).

You could still create a simple module to implement the functionality without using ready.php. Just replace the hook and the function in the save snippet you linked. Further information about hooks are also to be found here: http://processwire.com/api/hooks/

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

hi LostKobrakai,

thanks for that cool snippet of code! I will use it on my next project. unfortunately the button appears an all tabs of the admin (also on children, delete, settings...).

how can we hide the button on the other tabs?

Link to comment
Share on other sites

ah, of course! thank you :)

changed it to this:

$form->insertAfter($button, $form->get($field));

edit: got an error on unpublished pages so i excluded the button there:

$process = $event->object;
$form = $event->return;
$page = $process->getPage();

if($page->is(Page::statusUnpublished)) return; // added this line
Link to comment
Share on other sites

  • 2 weeks later...

I'm using it with insertBefore the image field and it works fine, regardless of PageStatus.

I also have added two lines to the AdminCustomFiles/AdminThemeXXXXX.css files to move it to the right:

#wrap_hook_sort_images { float: right; }
#wrap_hook_sort_images:after { clear: both; }


Such a nice and helpful snippet from @LostKobrakai, I really love it.  ^-^:lol:

  • Like 4
Link to comment
Share on other sites

  • 2 months later...


can you confirm that when clicking this button the page is NOT saved. so if you edit other fields the changes will get lost. any way to change this behaviour?

the reason is i created a button "create invoice" for a client and if he changes some fields (address for example) and clicks the button "create invoice" without saving the page before this changes will get lost :(

Link to comment
Share on other sites

  • 1 month later...

ok last time it was not critical but now it was, so i implemented this little hook to check unsaved changes via javascript when clicking on the button defined at line

var buttons = '#button_example_id';

when the user clicks the button the confirm-dialog appears



 * show warning message on button click if there are unsaved changes in the form
public function confirmUnsavedChanges($event) {
    $page = $event->object;
    // only add this to admin pages
    if($page->template != 'admin') return;

    ob_start(); ?>
    <script type="text/javascript">
        $( document ).ready(function() {
            // buttons to observe
            var buttons = '#sendLoginLinkButton, #newInvoice';

            $('body').on('click', buttons, function(e) {
                var msg = InputfieldFormBeforeUnloadEvent(true);
                if(typeof msg != "undefined" && msg.length) {
                    if(!confirm(msg)) {
                        return false;

    $script = ob_get_clean();
    $event->return = str_replace("</body>", $script."</body>", $event->return); 
  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 4 years later...
On 11/9/2015 at 11:25 AM, horst said:

I'm using it with insertBefore the image field and it works fine, regardless of PageStatus.

I also have added two lines to the AdminCustomFiles/AdminThemeXXXXX.css files to move it to the right:

#wrap_hook_sort_images { float: right; }
#wrap_hook_sort_images:after { clear: both; }



are you still using this hook with the latest PW version?
I'm trying to display the button on the right like you, but it's just not displayed on the right. 🤔

I must confess I do not use the module "AdminCustomFiles" now however it should go with this Hook nevertheless also?

$wire->addHookAfter('AdminTheme::getExtraMarkup', function (HookEvent $event) {
	$parts = $event->return;
	$parts['head'] .= '<style type="text/css">
		#hook_sort_images { float: right; }
		#hook_sort_images:after { clear: both; }
	$event->return = $parts;

But it does not currently...

Link to comment
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.

  • Similar Content

    • By Robin S
      Select Images
      An inputfield that allows the visual selection and sorting of images, intended for use with the FieldtypeDynamicOptions module. Together these modules can be used to create a kind of "image reference" field.

      Integration with FieldtypeDynamicOptions
      InputfieldSelectImages was developed to be used together with FieldtypeDynamicOptions (v0.1.3 or newer):
      Create a Dynamic Options field. Choose "Select Images" as the "Inputfield type". Select Images appears in the "Multiple item selection" category but you can set "Maximum number of items" to 1 if you want to use Select Images for single image selections. Define selectable options for the field via a FieldtypeDynamicOptions::getSelectableOptions hook. See some examples below. FieldtypeDynamicOptions is recommended but is not a strict requirement for installing InputfieldSelectImages in case you want to use an alternative way to store the field data.
      Selection of Pageimages
      In this example the field allows selection of Pageimages that are in the "images" field of the home page.
      The field will store URLs to the Pageimages so it works as a kind of "image reference" field. You can use the "Format as Pagefile/Pageimage object(s)" option for the Dynamic Options field to have the formatted value of the field be automatically converted from the stored Pageimage URLs to Pageimage objects.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get Pageimages within the "images" field on the home page foreach($event->wire()->pages(1)->images as $image) { // Add an option for each Pageimage // When the key is a Pageimage URL the inputfield will automatically create a thumbnail // In this example the label includes the basename and the filesize /** @var Pageimage $image */ $options[$image->url] = "{$image->basename}<br>{$image->filesizeStr}"; } $event->return = $options; } }); Selection of image files not associated with a Page
      When not working with Pageimages you must add a "data-thumb" attribute for each selectable option which contains a URL to a thumbnail/image.
      In this example the field allows selection of image files in a "/pics/" folder which is in the site root.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get files that are in the /pics/ folder $root = $event->wire()->config->paths->root; $path = $root . 'pics/'; $files = $event->wire()->files->find($path); // Add an option for each file foreach($files as $file) { $basename = str_replace($path, '', $file); $url = str_replace($root, '/', $file); // The value must be an array with the following structure... $options[$url] = [ // The label for the image 'label' => $basename, 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => $url, ], ]; } $event->return = $options; } }); The field values don't have to be image URLs
      The values stored by the Dynamic Options field don't have to be image URLs. For example, you could use the images to represent different layout options for a page, or to represent widgets that will be inserted on the page.
      Also, you can use external URLs for the thumbnails. In the example below the options "calm" and "crazy" are represented by thumbnails from placecage.com.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "calm_or_crazy" if($field->name === 'calm_or_crazy') { $options = []; // Add options that are illustrated with thumbnails from placecage.com $options['calm'] = [ // The label for the option 'label' => 'Nicolas Cage is a calm man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/260/260', ] ]; $options['crazy'] = [ // The label for the option 'label' => 'Nicolas Cage is a crazy man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/c/260/260', ] ]; $event->return = $options; } }); Field configuration
      You can define labels for the button, notices, etc, that are used within the inputfield if the defaults don't suit.

    • By Robin S
      Process Images
      A basic, proof-of-concept Textformatter module for ProcessWire. When the Textformatter is applied to a rich text field it uses Simple HTML DOM to find <img> tags in the field value and passes each img node through a hookable TextformatterProcessImages::processImg() method.
      This is a very simple module that doesn't have any configurable settings and doesn't do anything to the field value unless you hook the TextformatterProcessImages::processImg() method.
      Hook example
      When added to /site/ready.php the hook below will replace any Pageimages in a rich text field with a 250px square variation and wrap the <img> tag in a link to the original full-size image.
      For help with Simple HTML DOM refer to its documentation.
      $wire->addHookAfter('TextformatterProcessImages::processImg', function(HookEvent $event) { // The Simple HTML DOM node for the <img> tag /** @var \simple_html_dom_node $img */ $img = $event->arguments(0); // The Pageimage in the <img> src, if any (will be null for external images) /** @var Pageimage $pageimage */ $pageimage = $event->arguments(1); // The Page object in case you need it /** @var Page $page */ $page = $event->arguments(2); // The Field object in case you need it /** @var Field $field */ $field = $event->arguments(3); // Only for images that have a src corresponding to a PW Pageimage if($pageimage) { // Set the src to a 250x250 variation $img->src = $pageimage->size(250,250)->url; // Wrap the img in a lightbox link to the original $img->outertext = "<a class='lightboxclass' href='{$pageimage->url}'>{$img->outertext}</a>"; } });  
      GitHub: https://github.com/Toutouwai/TextformatterProcessImages
      Modules directory: https://processwire.com/modules/textformatter-process-images/
    • By spercy16
      These issues should be fairly easy for any intermediate to advanced ProcessWire developer to answer. I'm new to PHP and relatively new to ProcessWire and just need a bit of help. What I'm trying to do is bring in a couple of cards from my Projects page to display on my home page. I finally got the code right to bring in the cards but right now they're using my original images instead of my resized "variations". So firstly, I would like to know how to reference the variations of my images instead of using the original. Secondly, I need to grab only four of the cards from the Project page and not import in all ten. It should be just two small changes to my code to do these things (I would imagine). Here is the code I currently have for that section:
      <?php // https://processwire.com/api/arrays/ // check if the array of images has items if (count($pages->get("/projects/")->images)) : // get array of images from the field $images = $pages->get("/projects/")->images; $count = 0; // iterate over each one foreach ($images as $image) : $count++; $sectionText = $pages->get("/projects/")->get("paragraph_$count"); $img = $image; $buttonCode = $pages->get("/projects/")->get("url_$count"); ?> <span id="card<?php echo $count?>" class="card"> <img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" /> <div class="cardBody"> <div class="cardText"> <h2><?php echo $img->description; ?></h2> <?php echo $sectionText; ?> </div> <div class="primaryBtn"> <a href="https://www.paypal.com/donate?hosted_button_id= <?php echo $buttonCode; ?> &source=url"> <button> <i class="fas fa-donate"></i> Donate </button> </a> </div> </div> </span> <?php endforeach; endif; ?> Thanks in advance for any help!
    • By skeltern
      WebP image support is great and works fine. But once created I've issues to get rid of all API generated WebP variations.
      The backend image field variations "Delete" works and I can remove all variations JPEG plus WebP. Image list is clean but all WebP API variations are still stored in file system (for instance files/12345/84.900x675.webp etc). I can only use ImageSizer with temp 'force' option to request fresh WebP variations or have to delete WebP files from folders. No other way so far. Tested with 2 sites and latest master PW 3.0.165.
      Is there somewhere a "magic button" or config/setup thing to solve my sticky WebP issue?
    • By psy
      I've searched, and maybe missed, the solution. I have a 'normal' images field and uploading images with a file size greater than 10Kb is fine. Any image size smaller results in the never-ending spinner and no upload.
      No min/max width/height set on image uploads in admin, ie just the defaults.
      Any ideas on how to fix?
      PW: 3.0.175
      PHP: 7.3
      Marking it as "Resolved" rather than "Solved" as it auto-magically fixed itself. No idea whether PW, PHP, or just an internet hiccough... All good now 🤞
  • Create New...