Sort Images via API (outside PW admin)

[ryanscherler]

I was wondering if it's possible to sort user images via the API. I have added an 'images' custom field to the user template and am creating an outside login for artists (users with PW role 'artist') to edit their profile. This involves allowing them to upload images into their 'gallery' and sort them (via drag-n-drop) once uploaded. I was hoping there was some sort of 'sort' field that I could update via the API, but no luck there. I looked into how the admin allows this functionality and it's a bit over my head digging in the images field module. Any help would be greatly appreciated!

- Ryan

[diogo]

I don't think you have this option via the API... The only way i can think of doing it without messing around with the dB, would be creating an extra field that would have a sequence like "0,1,2,3,4,5,6,7" with the same number has the amount of pictures, and updated accordingly to change the order of the pictures in the frontend "4,7,2,1,6,3,0,5".

To output the pictures, you would convert the field to an array and iterate through it.

$sequence = explode(",", $page->extra_field);
$images = $page->images;
foreach ($sequence as $i){
$image = $images->eq($i);
echo "<img src='{$image->url}' alt='{$image->description}'>";
}

too complicated?

[Soma]

I think the only way is to remove the images and add them in the new order again. So you could construct a form with this in mind.

[diogo]

Soma, you can do this without having to upload them again?

[Soma]

diogo, sure

$img = $page->images->first();

$page->images->remove($img);
$page->images->add($img);
$page->save();

and the first image is at last position

[ryan]

You actually can use the 'sort' property, but you'll want to perform the sort after you've assigned it to all your items, because PW will write them out in the order that they appear. For instance, here is how we might reverse the order:

$cnt = count($page->images); 

foreach($page->images as $image) {
 $image->sort = $cnt;
 $cnt--; 
}

// now tell it to sort by the field 'sort'
$page->images->sort('sort'); 

// you may not need to do this, but putting it here just in case
$page->trackChange('images'); 

$page->save();

Avoid calling $page->images->remove() just because that will queue an actual file to be removed when the page is saved.

Another way you might accomplish reversing the order:

$myImages = new Pageimages($page); 
foreach($page->images as $image) {
 $myImages->prepend($image); 
}
$page->images = $myImages; 
$page->save();

[Soma]

I also tried something similar as your code, but it didn't work regardless of what I tried. I think I missed the $page->images->sort("sort"); and to do the trackChange on the field instead of the sort or page. Thanks Ryan for clarifying.

I don't get why removing and readding would be a problem. Seems to work well.

Edit: Just wondering, but why does echo $image->sort not output anything?

[ryanscherler]

Thanks for all the feedback on this post! - I will try some various options.

On a side note: I am a bit confused as to the 'trackChange' method (why it exists) as I did see it in the inputField module as follows:

if($changed) {

$this->value->sort('sort');

$this->trackChange('value');

}

[Soma]

It's there to tell PW that the value has changed.

[ryan]

I don't get why removing and readding would be a problem. Seems to work well.

If it works for you it should be okay. But I think that behind the scenes, it's actually physically deleting a file at some point. Do your filenames change at all when you do this? (i.e. like get a number appended to the end of them)

Edit: Just wondering, but why does echo $image->sort not output anything?

The $image->sort was for our use as a temporary variable. Not actually used by the core.

On a side note: I am a bit confused as to the 'trackChange' method (why it exists) as I did see it in the inputField module as follows:

That is just a way to tell the $page that something about the value changed. The $page may not know that the value changed because it's the same object instance (of Pagefiles) that the $page started with. A $page doesn't know all the inner workings of fields it deals with. As far as it can tell, it's still dealing with the same value.

Some types notify the page of the change automatically, and it may be the case here too, but I wasn't positive without testing it. So we were notifying the page just to be safe.

In my second example, it wasn't even a consideration to do a trackChange() because we actually set a new value to the $page (which it can definitely see).

[onjegolders]

Bumping this as I'm trying to figure out how to replace an image with an uploaded one.

The only difference from the above is that I'm not using an array for image.

Like Soma I figured that for my new uploaded image file to overwrite the existing one I would have to delete it before adding the new one.

I have tried remove, unset, delete but can't seem to figure out how to do this?

If it's impossible I could always use an array of images and call out the most recent I suppose.

[ryan]

You might try something like this for replacing an image. You add the new image (which places it at the end) then grab it and insert it before or after the old image. Then you delete the old image.

$oldFile = 'myimage.jpg';
$newFile = '/some/path/or/url/myimage2.jpg';

$oldItem = $page->images->get($oldFile); 
$page->images->add($newFile); 
$newItem = $page->images->last(); // get the item just added
$page->images->insertAfter($newItem, $oldItem); 
$page->images->delete($oldItem);
$page->save();

[ryan]

Btw, I just now added a replace() method to WireArray so that we'll have the above contained in 1 function for PW 2.3

[renobird]

Hello all,

I'm trying to get my head around sorting user images as well.

Although, I don't really need to sort them as much as allow the user to choose which image is first.

The scenario would be something like:

1. Present user with a grid of thumbnails showing their existing images. (got this part).

2. User selects an image to "use as profile image".  

3. Selected image is now set to first in the images array

4. $user->save;

Everything I think of seems far too complicated, I'm hoping there is a fairly straightforward way to do this via the API.

A nudge in the right direction would be much appreciated.

[apeisa]

Would it be nicer/easier to have profile image as a separate image field?

[renobird]

Hadn't thought about it that way.

So I would have a profile_image field and a user_images field, and move images between the 2?

Actually, I would just be assigning an image from user_images to profile_image, no need to remove it from user_images.

That might be the way to go.

[apeisa]

Yep, just always replace the profile image with selected one.

[renobird]

Apeisa,

Nice call. I do see a need to figure out custom sorting eventually (Soma gave me some pointers today on IRC) but in this case your solution is a lot easier.

[yesjoar]

Btw, I just now added a replace() method to WireArray so that we'll have the above contained in 1 function for PW 2.3

Is there any documentation how to use this function, Ryan?

[Soma]

Is there any documentation how to use this function, Ryan?

Yep here http://cheatsheet.processwire.com/?filter=replace&advanced

and here https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/core/WireArray.php#L247

[Soma]

And soon here too http://cheatsheet.processwire.com/pagearray-wirearray/setting-and-modifying-items/replace-itema-itemb/

[yesjoar]

Hard to handle this with Image-Uploads from the front-end.