+ Start a Discussion
j.themussj.themuss 

Displaying an image from custom object in a dataTable

Hi Folks..

 

Making progress on my voluntary force.com sites project...

 

I am try to display a list of soldiers who fought in ww1.

 

I have a custom object called Soldiers with Name, Birthplace, Photo, and War Record Link

 

I want to display these names on a force.com site showing Name, Birthplace and Photo (with a click option on the photo to open a new browser window based on the value stored in the War Record Link field)

 

I have tried the following code with limited success depending on the command I try:

 

<apex:column headerValue="Photo">
     <apex:image id="SoldierPhoto" value="{!indsoldier.Soldier_Photo__c}" width="100" height="100"/>
</apex:column>

 

The above shows the outline of the photo with the graphic logo but it does not show the photo.. but the size is perfect.

 

<apex:column headerValue="Photo">
    <apex:outputField value="{!indsoldier.Soldier_Photo__c}"/>
</apex:column>

 

The above shows the photo, but it is massive and I cant work out how to size it to 100 * 100 

 

<apex:column headerValue="Photo">
    <apex:outputLink type="image" value="{!indsoldier.Soldier_Photo__c}">
    </apex:outputLink>
</apex:column>

 

This version does not show anything at all..

 

My aim is to get the photo displayed sized 100 * 100 and be able to click on the photo and load the war record url link..

 

Any ideas?

 

regards

 

j.themuss

Steven LawranceSteven Lawrance

The path that works for downloading the image can be used in the other URL, I'm thinking. In the apex:outputField case, try looking at the URL that gets generated. It likely ends with a 15 or 18 character ID. Take the path from that URL, minus the ID, and put it into the other case, such as the apex:image element's value attribute. Insert it after the first ", but before the { character. When  {!indsoldier.Soldier_Photo__c} gets replaced with the ID, the properly URL should get formed. If that doesn't work, then a regular <img> html element using this same strategy should work.