+ Start a Discussion
GlobalExpeditions.ax998GlobalExpeditions.ax998 

Need help merging multiple images in a render as pdf

So I believe this subject has been covered a few times in here, however I have not found anywhere that covers merging a series of images using static resources.

 

Right now I am succesfully calling up a single image stored in our static resources by using the following line...

 

<tr><td align="left"><apex:image value="{!$Resource.John_Doe}" width="198" height="227"/></td></tr>

 

What we are now trying to do is call up a series of photos on the same sheet (labels).

 

All of the image names are created from the field Full_Name__c, therefore I was hoping to merge that field into the static resource name to call them up in succession.  Something like....

 

<tr><td align="left"><apex:image value="{!$Resource.{!SelectedOpportunity.Full_Name__c}}" width="198" height="227"/></td></tr>

 

I know this does not work, but does anyone know of another solution?

 

P.S.  I will have to create static image files for all the photos, however all of these photo's are currently held on an intranet server, so our first thought was to reference those URL's in our visualforce page to merge them all using the same technique, ie ...

 

<apex:image url="http://123.123.1.12/~intranet/photos/" {!SelectedOpportunity.Full_Name__c} ".jpg

 

I'm pretty sure this is not possible.... but.... if anyone knows how to do that, it would be the most ideal option.

 

Thanks for all the future replies!

Best Answer chosen by Admin (Salesforce Developers) 
TheSwamiTheSwami

 

1) I think you are looking for the URLFOR function:
<apex:page standardController="contact">
 <apex:image url="{!URLFOR($Resource.images, Contact.id)}" width="50" height="50" />
</apex:page>
You can use a dynamic file name - Contact.id in this example.
2)  PDF rendering makes an outbound call from the Salesforce servers to retrieve the image.  So, an image behind a firewall would not be accessible to Salesforce and be rendered as a broken image in the PDF.

 

All Answers

TheSwamiTheSwami

 

1) I think you are looking for the URLFOR function:
<apex:page standardController="contact">
 <apex:image url="{!URLFOR($Resource.images, Contact.id)}" width="50" height="50" />
</apex:page>
You can use a dynamic file name - Contact.id in this example.
2)  PDF rendering makes an outbound call from the Salesforce servers to retrieve the image.  So, an image behind a firewall would not be accessible to Salesforce and be rendered as a broken image in the PDF.

 

This was selected as the best answer
GlobalExpeditions.ax998GlobalExpeditions.ax998

Thanks so much for the idea swammi.

 

Could you fill me in just a little bit more on how to name and create my static resources. 

 

Maybe expand on the ...

<apex:image url="{!URLFOR($Resource.images, Opportunity.id}" width="50" height="50"/>

 

Thanks again.

GlobalExpeditions.ax998GlobalExpeditions.ax998

To add....

 

I do know how to creat a static resource, but am a bit confused in how to create a large number of static resources with a dynamic name which will allow me to call them up in the visualforce page.

 

Also referring to my first sollution, instead of storing these files ona server, would <apex:image url="   "  work if we stored the images on a public domain?

 

Thanks again for the response.

TheSwamiTheSwami

The basic process is:
1. Name your images according to a convention that works for you.  For example you could use <salesforceId>.png or <first_last>.png.

2. Zip up all the files and upload as a static resource.



For example, in this VF code:
<apex:image url="{!URLFOR($Resource.images, Contact.id + '.png'}" width="50" height="50"/>

$Resource.images is a zip file will all the images you have.  The images are pngs named according to a contact id.


The resulting HTML is:
<img src="/resource/1305073411000/images/003x0000005E1PsAAK.png" height="50" width="50" />



Here is the document on this topic:

www.salesforce.com/us/developer/docs/pages/Content/pages_resources.htm

GlobalExpeditions.ax998GlobalExpeditions.ax998

Swammi,  I can't thank you enough for the help.

 

So here is where I am now....

 

I created a zip containing two test photo's both named in the same fashion, First Name Last Name then saved as PNG.

 

I successfully uploaded the Zip File to static resources, naming the resource "Employee"

 

I inserted the following code into our VF page,

 

<apex:image url="{!URLFOR($Resource.images, Contact.id + '.png'}" width="50" height="50"/>

 

and then changed it to the following,

 

<apex:image url="{!URLFOR($Resource.Employees, SelectedOpportunity.Full_Name__c + '.png')}" width="198" height="227"/>

 

My thought process was that (SelectedOpportunity.Full_Name__c) is the field that matches how I named each individual photo.

 

When I run this, the photo's are still coming up as broken?

 

I apologize for my lack of knowledge here, but you've been a great help.

 

Thanks for the future response.

 

 

 

TheSwamiTheSwami

"My thought process was that (SelectedOpportunity.Full_Name__c) is the field that matches how I named each individual photo."

 

This is the key.  You may want to do some debugging (output SelectedOpportunity.Full_Name__c, view source, etc.) to verify what image name is being generated.  Then you can verify that the name being generated matches a file in the zip file.

 

I can assure you that this works (I tested it), so it is just a matter of fixing it for your situation.

GlobalExpeditions.ax998GlobalExpeditions.ax998

Hmmm

 

On the Opportunity page the field is api named Full_Name__c, and it displays as "John Doe"

 

The photo file in the zip that is attached as a static resource is named  "John Doe.png"

 

My line of code is....

 

<apex:image url="{!URLFOR($Resource.Employees, SelectedOpportunity.Full_Name__c+'.png')}" width="198" height="227"/>

 

I've also tried...

 

<apex:image url="{!URLFOR($Resource.Employees, SelectedOpportunity.Full_Name__c)}" width="198" height="227"/>

 

No matter what I do I can't get the image to show.

 

Above the photo I am getting text to work properly for the field Full_Name__c with the following code,

 

<tr><td align="left"><b>{!SelectedOpportunity.Full_Name__c}</b></td></tr>

 

I've also made it show the file extension by using this code,

 

<tr><td align="left"><b>{!SelectedOpportunity.Full_Name__c+'.png'}</b></td></tr>

 

Sorry to keep bothering you with this, but I just can't seem to get it.

 

TheSwamiTheSwami

Spaces are a problem because it will translate to a URL.  You'll need to use file names that don't have spaces.

GlobalExpeditions.ax998GlobalExpeditions.ax998

Just changed the source opportunity field so that is displays the name as "John_Doe"

 

Also changed the file names of the photo's to "John_Doe.png"

 

Still no love.

 

Could it be due to the .png?  or could it be because the field Full_Name__c is a formula field?

 

     <apex:image url="{!URLFOR($Resource.Employees, SelectedOpportunity.Full_Name__c+".png")}" width="198" height="227"/>

 

all ofthe other lines that do work are like the following...

 

<tr><td align="left"><b>{!SelectedOpportunity.Full_Name__c+".png"}</b></td></tr>

 

Does it matter to have the ! in front of SelectedOpportunity?

 

I know you've given me alot time and I am extremely grateful.

 

TheSwamiTheSwami

The next step is to see what HTML is being rendered.  If you are using a browser with developer tools installed, you could right click on the broken image and view the source ("Inspect Element" in Chrome).  That should show you the final URL being generated.  See if it matches what you expect.

GlobalExpeditions.ax998GlobalExpeditions.ax998

Swami,

 

Thank so much for all the help.  Turns out all we had to do is switch the photos to .jpg's as the'png's wouldnt work.

 

Thanks again for all thehelp.

 

Kyle