2

I am developing a website on Salesforce and I need to display products for each category with images. I have custom object Product__c with fields Name, Price__c, Quantity__c, Description__c, Image__c. I tried to display a list of product with name, price, image and description, but an image is no displayed. Only when I hard code each block for a product it is displayed, but I don`t want to do that. My images are stored in .zip archive in Static Resources (it is called Monitor). Any help is appreciated!

Here is my code snippet:

  <apex:page id="TestForMonitors" showHeader="false" controller="TestContoller">
<apex:form id="monitorsForm">
    <apex:outputPanel id="monitorsDetail">
        <apex:pageBlock title="Monitors" id="monitorsBlock">
            <apex:pageBlockTable value="{!monitorsList}" var="monitor">
                <apex:column >
                    <apex:commandLink value="{!monitor.Name}" >
                        <apex:param name="id" value="{!monitor.Id}"/>
                    </apex:commandLink>
                    <apex:pageBlockSection >
                        <apex:image value="{!URLFOR($Resource.Monitor, selectedImage )}" id="acerImage"/>
                    </apex:pageBlockSection>
                    <apex:pageBlockSection >
                        <apex:outputText value="{!monitor.Price__c}" id="acermPrice"/><br/>
                        <apex:outputText value="{!monitor.Name}"/>
                        <apex:outputText value="{!monitor.Description__c}"/>
                    </apex:pageBlockSection>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:outputPanel>
</apex:form>

And for controller:

 public with sharing class TestContoller {
   public Product__c productMonitor{set;get;}
   public boolean renderMonitor {set;get;}
   public List<Product__c> monitorsList {set;get;}
   public boolean renderMonitorsList {set;get;}

public TestContoller(){
    renderMonitorsList = true;
    monitorsList = selectMonitorsList();
}

    public static List<String> getImages() {
       List<String> imageOptions = new List<String>();
       imageOptions.add('acer.jpg');
       imageOptions.add('dell_u24.jpg');
       imageOptions.add('dell_s23.jpg');
       imageOptions.add('lg_22mp.jpg');
       imageOptions.add('lg_23mp.jpg');
       imageOptions.add('lg_27mp.jpg');
       imageOptions.add('philips.jpg');
       imageOptions.add('samsung_s22f.jpg');
       imageOptions.add('samsung_s24e.jpg');
       imageOptions.add('samsung_c24f.jpg');
       return imageOptions;
  }

public String selectedImage{
    get{
        if(selectedImage == null) {
            List<String> imageList = new List<String>();
            imageList.addAll(getImages());
            //selectedImage = imageList[0];
        }
        return selectedImage;
    }
    set{
        selectedImage = value;
    }
}

 public void displayBlock() {
    List<String> imagesList = new List<String>();
    imagesList.addAll(getImages());

    for (Product__c product : monitorsList) {
        if (product.Name == 'Monitor_Acer_S230HLBb') {
            selectedImage = imagesList[0];
        } else if (product.Name == 'Monitor_Dell_S2316H') {
            selectedImage = imagesList[1];
        } else if (product.Name == 'Monitor_Dell_UltraSharp_U2414H') {
            selectedImage = imagesList[2];
}
2

If the number of products is quite small, then you could reference a map in your Visualforce using the product name as the key:

value="{!URLFOR($Resource.Monitor, images[monitor.Name])}"

with the map setup in the controller like this:

public Map<String, String> images {
    get {
        if (images == null) {
            images = new Map<String, String>{
                    'Monitor_Acer_S230HLBb' => 'acer.jpg',
                    'Monitor_Dell_S2316H' => 'dell_u24.jpg',
                    ...
                    };
        }
        return images;
    }
    private set;
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.