Image upload field and display

[ankh2054]

Hi All,

I am trying to allow users to upload a profile image.

What I've done:

1. Created a new field (crop image) called "avatar" and added this to the users template
2.  Using the code shown below I can successfully upload images.

What I'm not sure of how is:

1. Is the field type correct and best way
2. How to display the thumbnail of the image once uploaded

thanks

<?php

    $upload_path = $config->paths->assets . "files/avatar_uploads/"; 

    $f = new WireUpload('avatar'); 
    $f->setMaxFiles(1);
    $f->setMaxFileSize(5*1024*1024);
    $f->setOverwrite(true);
    $f->setDestinationPath($upload_path);
    $f->setValidExtensions(array('jpg', 'jpeg', 'png', 'gif'));

    if($input->post->form_submit) {


    if(!is_dir($upload_path)) {
            if(!wireMkdir($upload_path)) throw new WireException("No upload path!");
        }

    $files = $f->execute(); 
    
    if ($f->getErrors()) {    
      foreach($files as $filename) @unlink($upload_path . $filename);
      foreach($f->getErrors() as $e) echo $e;
    } else {
      //$u = $users->get($user);
      //$u = $user->name;
      //Save the photo to the avatar field
      $user->of(false);
      $user->avatar = $upload_path . $files[0];
      $user->save();
      $user->of(true);
      @unlink($upload_path . $files[0]);
    }
  }

?>

<form class="forum-form" accept-charset="utf-8" action="./" method="post" enctype="multipart/form-data" >

<input type="file" id="attach" name="avatar" multiple="multiple" accept="image/jpg,image/jpeg,image/gif,image/png" /> 
<input type="submit" name="form_submit" value="Submit"/> 

</form>

[kongondo]

By crop image field, do you mean you are using the cropImage module? You can use a normal image field for your Avatars. You interact with that image field like any other image field..only this time you are dealing with the 'user' template. Also remember that in the DB 'users' are stored as 'pages' so, similar API syntax...

See this post by Ryan:

https://processwire.com/talk/topic/10-how-do-i-interact-with-the-image-field-in-processwire/

and the docs

https://processwire.com/api/fieldtypes/images/

Btw, do you need a profile image to be that big?

Edited May 2, 2014 by kongondo

[ankh2054]

thanks that did the trick. 

The code is used:

foreach($user->avatar as $image) { 

    $large = $image->width(500); 
    $thumb = $image->size(100, 100); 
    $avatar_thumb = "<img class='img-circle' src='{$thumb->url}'' alt='{$thumb->description}'' />";
}

 <div class="user-image">
                <?php echo $avatar_thumb; ?>
            </div>

[ankh2054]

[modifiedcontent]

ankh2054, we can't get this code to work here. What are we doing wrong?

Shouldn't it be possible/easy to get the same image upload UI as in the admin area? Or some other cropping or centering tool? Any jquery script would work or mess up the system?