---

---

There are cases where it would be helpful to be able to add a photo to a SugarCRM contact record in order to put a face with the name. However, there isn’t a way to do this out of the box in SugarCRM. Thankfully with SugarCRM’s customizable structure we can create that functionality on our own. Why stop with just contacts? After this tutorial we could add a photo to a lead, account, or any other module.

---

Section 1 - Creating a Photo "Sugar Field"

First, we need to create three files which will tell Sugar how to display the field on the edit and detail views.
1.1 - include/SugarFields/Fields/Photo/DetailView.tpl

{if !empty({{sugarvar key='value' string=true}})}
<img src='cache/images/{$fields.{{$displayParams.id}}.value}_{{sugarvar key='value'}}' height='100'>
{/if}

1.2 -include/SugarFields/Fields/Photo/EditView.tpl

<input type="hidden" id="old_{{sugarvar key='name'}}" name="old_{{sugarvar key='name'}}" value="{$fields[{{sugarvar key='name' stringFormat=true}}].value}"/>
<input id="{{sugarvar key='name'}}" name="{{sugarvar key='name'}}" type="file" title='{{$vardef.help}}' size="{{$displayParams.size|default:30}}" {{if !empty($vardef.len)}}maxlength='{{$vardef.len}}'{{elseif !empty($displayParams.maxlength)}}maxlength="{{$displayParams.maxlength}}"{{else}}maxlength="255"{{/if}} value="{$fields[{{sugarvar key='name' stringFormat=true}}].value}" {{$displayParams.field}}>
{$fields[{{sugarvar key='name' stringFormat=true}}].value}
 
{if !empty({{sugarvar key='value' string=true}})}
<img src='cache/images/{$fields.{{$displayParams.id}}.value}_{{sugarvar key='value'}}' height='100'>
{/if}

1.3 - include/SugarFields/Fields/Photo/SugarFieldPhoto.php

<?php
require_once('include/SugarFields/Fields/Base/SugarFieldBase.php');
 
class SugarFieldPhoto extends SugarFieldBase {
 
    function getDetailViewSmarty($parentFieldArray, $vardef, $displayParams, $tabindex) {
 
        global $app_strings;
 
        if(!isset($displayParams['id'])) {
           $error = $app_strings['ERR_SMARTY_MISSING_DISPLAY_PARAMS'] . 'id';
           $GLOBALS['log']->error($error);    
           $this->ss->trigger_error($error);
           return;
        }        
 
        $this->setup($parentFieldArray, $vardef, $displayParams, $tabindex);
        return $this->fetch('include/SugarFields/Fields/Photo/DetailView.tpl');
    }
}
?>

Section 2 - Create a Photo Field in Studio

2.1 - Go to Admin->Studio

2.2 - Open Contacts->Fields and "Add Field"

2.3 - Select "TextField" for Data Type, enter "contact_photo" for Field Name, change Label to "Photo", and change Max Size to "255".

2.4 - Add the new contact_photo_c field to the edit and detail views by opening Layouts->EditView, selecting Photo in the left column, and dragging to an empty slot in the grid layout. If there isn't an empty spot you may need to drag "New Row" to the desired area in the grid. Once done "Save & Deploy".

2.5 - Repeat for the DetailView and "Save & Deploy".

Section 3 - Editing the Views

3.1 - Open custom/modules/Contacts/metadata/detailviewdefs.php and look for "contact_photo_c". Now add the type and displayParams so that it looks like the following code. Don't forget to save!

....
            'name' => 'contact_photo_c',
            'label' => 'LBL_CONTACT_PHOTO',
            'type' => 'photo',
            'displayParams' =>
            array (
              'id' => 'id',
            ),
....

3.2 - Open custom/modules/Contacts/metadata/editviewdefs.php and look for "contact_photo_c". Now add the type and displayParams so that it looks like the following code.

....
            'name' => 'contact_photo_c',
            'label' => 'LBL_CONTACT_PHOTO',
            'type' => 'photo',
            'displayParams' =>
            array (
              'id' => 'id',
            ),
....

3.3 - Now we need to set the enctype for the edit form so that we can upload the photo. In editviewdefs.php add the enctype to the form key so that it looks like the following code. Then save the file.

....
$viewdefs ['Contacts'] =
array (
  'EditView' =>
  array (
    'templateMeta' =>
    array (
      'form' =>
      array (
        'enctype' => 'multipart/form-data',
....

Section 4 - Creating the Logic Hook

4.1 - Now we need to create a logic hook to save the image. Create a file called ContactPhoto.php in the custom/modules/Contacts directory with the following code:

<?php
if(!defined('sugarEntry') || !sugarEntry) die('Not A Valid Entry Point');
 
class ContactPhoto {
 
    function uploadPhoto(&$bean, $event, $arguments)
    {
        require_once('modules/Contacts/Contact.php');
        require_once('include/utils.php');
 
        $GLOBALS['log']->debug("ContactPhoto->uploadPhoto");
 
        //we need to manually set the id if it is not already set
        //so that we can name the file appropriately
        if(empty($bean->id)) {
            $bean->id = create_guid();
            $bean->new_with_id = true;
        }
 
        //this is the name of the field that is created in studio for the photo
        $field_name = 'contact_photo_c';
        if (!empty($_FILES[$field_name]['name'])) {
            global $sugar_config;
 
            //if a previous photo has been uploaded then remove it now
            if(!empty($_REQUEST['old_'.$field_name])) {
                // create a non UTF-8 name encoding
                // 176 + 36 char guid = windows' maximum filename length
                $old_file_name = $_REQUEST['old_'.$field_name];
                $end = (strlen($old_file_name) > 176) ? 176 : strlen($old_file_name);
                $stored_file_name = substr($old_file_name, 0, $end);
 
                $old_photo = $sugar_config['cache_dir'].'images/'.$bean->id.'_'.$old_file_name;
                $GLOBALS['log']->debug("ContactPhoto->uploadPhoto: Deleting old photo: ".$old_photo);
                unlink($old_photo);
            }
 
            $file_name = $bean->id.'_'.$_FILES[$field_name]['name'];
            //save the file name to the database
            $bean->contact_photo_c = $_FILES[$field_name]['name'];
 
            if(!is_uploaded_file($_FILES[$field_name]['tmp_name'])) {
                die("ERROR: file did not upload");
                //return false;
            } elseif($_FILES[$this->field_name]['size'] > $sugar_config['upload_maxsize']) {
                die("ERROR: uploaded file was too big: max filesize: {$sugar_config['upload_maxsize']}");
            }
 
            // create a non UTF-8 name encoding
            // 176 + 36 char guid = windows' maximum filename length
            $end = (strlen($file_name) > 176) ? 176 : strlen($file_name);
            $stored_file_name = substr($file_name, 0, $end);
 
            $destination = $sugar_config['cache_dir'].'images/'.$stored_file_name;
 
            if(!is_writable($sugar_config['upload_dir'])) {
                die("ERROR: cannot write to directory: {$sugar_config['upload_dir']} for uploads");
            }
 
            //$destination = clean_path($this->get_upload_path($bean_id));
            if(!move_uploaded_file($_FILES[$field_name]['tmp_name'], $destination)) {
                die("ERROR: can't move_uploaded_file to $destination. You should try making the directory writable by the webserver");
            }
        }
    }
}
?>

4.2 - To let Sugar know to call this file on save we create or use the existing custom/modules/Contacts/logic_hooks.php file and add our ContactPhoto->uploadPhoto function:

<?php
// Do not store anything in this file that is not part of the array or the hook version.  This file will    
// be automatically rebuilt in the future.
 $hook_version = 1;
$hook_array = Array();
// position, file, function
$hook_array['before_save'] = Array();
$hook_array['before_save'][] = Array(1, 'uploadPhoto', 'custom/modules/Contacts/ContactPhoto.php','ContactPhoto', 'uploadPhoto');
?>

Section 5 - Trying it All Out

5.1 - Before we can try it we need to first clear the cache so that our changes in the edit and detail view definition files to affect. To do this you can either go to Admin->Repair->Quick Repair and Rebuild and run for the Contacts module or you can delete EditView.tpl and DetailView.tpl from cache/modules/Contacts.

5.2 - We're ready to rock and roll now. Open a contact to edit. You should see a file browse field now. Browse and select your photo to upload.

5.3 - Save the contact record. You should now see the photo!

5.4 - You can go back at any time and select a new photo to upload instead.

Section 6 - Known Limitations

6.1 - The logic hook does not resize the photo to a smaller thumbnail size.

6.2 - You are limited to one photo per contact.

6.3 - You can not completely remove a photo. They can only be replaced.