Image field: Order of unzipped images

[doolak]

Hi there,

is there any possibility to control the order of the images which are uploaded as a Zip archive?

At the moment it seems to be rather randomly - if I have different images e.g. 001.jpg, 002.jpg, 003.jpg, they appear in a random order after they are uploaded and unzipped. Would it be possible to have them sorted by name?

Cheers, Christian

[ryan]

I'm not aware of a way to control the order and agree it does seem somewhat random. I would assume it's got something to do with the order that they were zipped into the file, but not positive. 

[doolak]

Thanks for your answer, ryan!

So if I just don't care about the order of the images in the backend and want to display them ordered on the website, how can I do this sorting within the following code:

// get the images you are going to display
$items_per_page = 18;
$start = ($input->pageNum - 1) * $items_per_page;
$total = count($page->galerie_fotos);
$images = $page->galerie_fotos->slice($start, $items_per_page);
// make this to give MarkupPagerNav what it needs
$a = new PageArray();
// add in some generic placeholder pages
foreach($images as $unused) $a->add(new Page());
// tell the PageArray some details it needs for pagination
// (something that PW usually does internally, for pages it loads)
$a->setTotal($total);
$a->setLimit($items_per_page);
$a->setStart($start);
// output your images
foreach ($images as $image) {
echo "<div class='galerie_image'>";
echo "<a class='fancybox' rel='fancybox' href='{$image->url}' title='{$image->description}' >\n";
$thumb = $image->size(220, 150, array('upscaling' => false, 'cropping' => true));
echo "<img class='galerie_thumb' src='{$thumb->url}' alt='{$thumb->description}' />";
echo "</div>";
}

echo "<div class='clear'></div>";
// output the pagination navigation
echo $a->renderPager(array(
    'nextItemLabel' => "»",
    'previousItemLabel' => "«",
));

How can I use a selector to display the images sorted by name?

Cheers, Christian

[kongondo]

@Christian,

This should get you started...

if(count($page->images)) {

	$images = $page->images->find('sort=name');
	
	foreach ($images as $image) {
	echo "<figure class='left'><img src='{$image->url}' alt='{$image->description}' /></figure>";
	
	}
} 

http://processwire.com/api/selectors/

[doolak]

@kongodo: Thanks for your help!

Usually I am using selectors exactly in the way you described it - in this case I am not sure how to use it, because the code snippet I am using for the gallary uses this code in the relevant part:

$images = $page->galerie_fotos->slice($start, $items_per_page);

and I don't know if it's possible to use a selector within this code...

[kongondo]

It is possible, using find as I have shown above. So, in your case...

$items_per_page = 18;
$start = ($input->pageNum - 1) * $items_per_page;
	
if(count($page->images)) {// check if there are images

	$images = $page->galerie_fotos->find('sort=name')->slice($start, $items_per_page);
	foreach ($images as $image) {
	// your image properties and html
	
	}
}

[doolak]

I guess I found a solution to combine the code snippet for the gallery with the sorting by selectors:

$images1 = $page->galerie_fotos->find('sort=filename');
$images = $images1->slice($start, $items_per_page);

As far as I can see this works fine.

It is possible, using find as I have shown above. So, in your case...

$items_per_page = 18;
$start = ($input->pageNum - 1) * $items_per_page;
	
if(count($page->images)) {// check if there are images

	$images = $page->galerie_fotos->find('sort=name')->slice($start, $items_per_page);
	foreach ($images as $image) {
	// your image properties and html
	
	}
}

LOL - seems to be sort of the same solution! Yours does the same in one step like mine in two steps ;-)

Thanks for your help!

[kongondo]

Glad it worked! Yes, we like to chain variables around here; keep it simple if it makes sense

[ocr_a]

Hello,

is it now possible to set the sorting for the image backend field? - i cannot find anything...

(2  years later ) 

Thanks in advance,

ocr_a

[LostKobrakai]

Image fields are mostly meant to be storage of files, so there's still nothing to automatically sort images for the backend (api can sort them). But you can use a module like this to sort the images with the api before saving a page: https://processwire-recipes.com/recipes/extending-page-save-process/

[ocr_a]

Ok. But sort via Drag&Drop implies more than a storage of files.

A small setting tab with order->[selector] would be nice. or even just a sort->name at the first upload, because most people have this as their default setting at their operation system. they input the images, accurately sorted by numbers and name, and keep asking why the field »randomize« the input. but the module solution is fine aswell... as it is easy to set up.

[LostKobrakai]

You can simply answer that question. Files are uploaded via AJAX requests and then it's a matter of which file is finished faster. That has nothing to do with naming and I don't know if this "automatic sorting" could be changed. The AJAX requests most likely don't even know that other files are uploaded at the same time. What is doable is a sorting afterwards, either by javascript on user interaction (sort button) or with a module like I suggested above.