function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Add a picture to contact record? I was told by support to use visuaforce

Can anyone assist me adding the capability of adding a picture to a contact record? One would think I could go to page layout and select an image preview option or something. Support told me I needed to do this using visuaforce. Any help would be appreciated. I tried the picture uploader appexchange but it was failing like everyone else that tried to use the program. Thanks in advance.

Best Answer chosen by Admin (Salesforce Developers) 

The easiest solution is to just use the IMAGE forumula, but there are several simple ways to include images.  Check out the docs at for more info.




All Answers


Yes, this can be accomplished with an embedded visualforce page.You can attach the picture to the contact and then have your visualforce page display any attachment of the type image. 


This is quite a bit of coding, but a good starting point is the visualforce wiki.






Just as an aside, you don't need to write a VisualForce page to replace the Contact's page functionality.


What I did (and this is pre-visualforce, but works fine, and I think might still be easier until they allow Image fields) is to store the photo of each Contact in the Notes & Attachments section for that Contact, uploading the picture to the same file name for everybody.  "Contact.jpg" in this case.


Then, create an S-control which goes and queries the attachments, and constructs theURL using the same form that is used when you view the attachment through the GUI.  Then, redirect to that URL.  This is below.


Then, go to the Page Layout for Contact and insert the S-Control as an inline s-control wherever you wish.


You may want to create a standard for the pictures in terms of height and width so they look good for all the contacts, or you may want to change the dimensions of the s-control, but I leave that detail for you.  


Here's the s-control Code.



<html> <head> <script src="/soap/ajax/15.0/connection.js" type="text/javascript"></script> <script> function doit() { var ids = sforce.connection.query( "Select Id From Attachment where ParentId = '{!Contact.Id}' and Name='Contact.jpg' limit 1 "); if(ids == null || ids.size <= 0 || ids.records.length <= 0) { document.getElementById('displayDiv').innerHTML = '<br/>No Picture Found.<br/>'; } else { var srv = ("{!Scontrol.URL}".split(/[0] + ''; var url = '/servlet/servlet.FileDownload?file=' + ids.records.Id + '&retURL=/{!Contact.Id}'; document.getElementById('displayDiv').innerHTML = '<img src=' + srv + url + ' alt="Unable to Display Picture"/>'; } } </script> </head> <body onload="doit()"> <div id="displayDiv"> Contact picture loading.... </div> </body> </html>


 Hope this helps.  I'm sure there will be better ways to do it as Salesforce comes to grips with an ImageType field.


Best, Steve.



By the way, if you did use Visualforce, I don't think you'd have much code to write. 


I'd use an extension to the standard Contact controller, and use the <apex:detail> page to display the standard Contact page layout.  This preserves everything done with page layout and doesn't force you to write almost any code.


I'd fetch the ID of the picture the same way (obviously using APEX instead of AJAX), construct a URL the same way, and then add an extra <apex:image> tag to the Page that displays the image.


The main benefit of doing it through an S-Control is that you can place it anywhere in the Contact layout using the layout editor.  With VisualForce, if you want to use the <apex:detail> tag (which you would want to do so you don't have to code the whole page layout yourself), I think you're stuck adding it either at the top or the bottom.


Again, hope this helps.  Steve.






The easiest solution is to just use the IMAGE forumula, but there are several simple ways to include images.  Check out the docs at for more info.




This was selected as the best answer

I'm not sure the IMAGE formula would work for this need.  Since the IMAGE formula points to a url, wouldn't that put the same photo on every contact page?


The s-control solution worked great, though.


Hi Steve,

In attempting to add this S-Control: When i reload a contact page after attaching a file called contact.jpg, instead of the image itself appearing on the Contact record where i placed the S-Control, I instead get a picture that looks like a screen shot of my SF page with the words "Cross Site Scripting: Possible cross site Scripting attempt detected"


Any ideas how to resolve?






Per the S-Control option, which I like the best due to being able to use the Attachment list, I keep getting 'Unable to Display Picture' error and I am not familiar enough with this yet to know why.  I have used the code provided almost exactly (just changed the object from Contact to a custom object).


Any help, much appreciated.....



Got it working..... just had to modify the URL a little.


Thanks though.... this is really slick.

Kuhn DigitalKuhn Digital



I have uploaded a contact image under the Notes and Attachments section and titled it "Contact.jpg" and the S-Control I created is still displaying "No Picture Found". Any reason why?


When I did originally upload the file it was Contact.JPG but I renamed it .jpg via Salesforce. Thanks for your help.