Jump to content

API save back new arrangement of images field


benbyf
 Share

Recommended Posts

HIIIII

Was looking at the docs for the wireArray, files and images fields but cant work out the best strategy for rearranging files that already exist in the field ->  I'm trying to upload images in the admin, then in the front end rearrange and save back the new order to the field.

Any hope would be awesome

Link to comment
Share on other sites

What’s the bit you’re asking about specifically? A general strategy could be to markup your frontend form the same way ProcessWire does it in the admin (i.e. the names of the inputs) and let PW do the server-side work somewhat like this:

$yourImageField->processInput($input->post);

/* upload errors must be handled separately, but you only want
 * to rearrange existing images, so you’ll probably want to
 * reject submissions with new images somehow. */
if (count($yourImageField->getWireUpload()->getErrors())) {
    $errors++;
    $yourImageField->error('Upload failed, tough luck.');
}

if (count($yourImageField->getErrors())) {
    $errors++;
} else {
    // successful form submission, so populate the page with the new values.
    $page->set($yourImageField->name, $yourImageField->value);
}

if ($errors === 0) $page->save();

You’ll notice that PW uses hashes to identify individual PageImages. It keeps track of the name of the image field and the image’s hash in the name of an input element that contains the image’s sort value:

<input type='number' name='sort_<?=$yourImageField->name?>_<?=$image->hash?>' other-stuff-such-as-value />

For your use case it will likely be cleaner to just have a form with one number input per image, named after the hash, and hand rolling the sever-side processing. In fact, it may be easier to identify images by file name. Not sure how PW gets from the hash to the image. Since you’re likely using JavaScript to rearrange the images anyway, you might even get rid of the input element alltogether and just build the POST parameters from the actual order in the DOM before submitting.

  • Like 1
Link to comment
Share on other sites

Hi @Jan Romero thanks but, im kinda lost. If I posted a list of numbers to the server say: 2,4,1,3 to represent second image should now be first, fourth should be second... and so on. How would I tel the image field to do the reorder..? Can i just get the values rearrange in the wireArray and use the set() and save()?

Link to comment
Share on other sites

F**k it dont worry, released it wont work anyways... I really need to starting talking to myself about these things before posting on here. Going to add videos to the mix too so going to have to track the order external to the imagefield order anyway 🤦‍♂️

Link to comment
Share on other sites

Huh, I thought you could just do $img->sort = 1 and save the field, but doing this does indeed require a small hack as described by Ryan here:

So you can totally just send a bunch of numbers and figure the new order out on the server:

$newOrder = [2,4,1,3,5];

$page->of(false);

for ($i = 0; $i < count($page->images); $i++) {
	$page->images->eq($newOrder[$i]-1)->sort = $i; // the sort property doesn’t exist on PageImage, we just introduce it so we can call sort on it below
}
  
$page->images->sort('sort'); // this is the key to the whole thing

$page->save('images');

Obviously IRL you would have to validate the input etc.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...