function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bharath kumar 52bharath kumar 52 

Display records with images(cards interface) in rows in Vf page

Hi All,

Below is the mockup of what i am planning to implement.
The records are fetched and displayed on the vf page is cards like fashion. Any help/idea on how to implement this is greatly appreciated.
For Example: I need to display only 3 images/ records per row . How can i limit this?
User-added image

Thanks and Regards,

Bharath Kumar M

NagendraNagendra (Salesforce Developers) 
Hi Bharath,

Please check with sample code below which is a combination of apex:panelGrid and CSS: 
<apex:page>

<style type="text/css">
td.quarter: {
    width: 25%;
}
img.fill {
    width: 100%;
}
</style>

<apex:panelGrid columns="4" columnClasses="quarter, quarter, quarter, quarter">
    <apex:image styleClass="fill" value="http://uploads5.wikiart.org/images/magdalena-carmen-frieda-kahlo-y-calderón-de-rivera/self-portrait-time-flies-1929.jpg"/>
    <apex:image styleClass="fill" value="http://uploads5.wikiart.org/images/magdalena-carmen-frieda-kahlo-y-calderón-de-rivera/self-portrait-time-flies-1929.jpg"/>
    <apex:image styleClass="fill" value="http://uploads5.wikiart.org/images/magdalena-carmen-frieda-kahlo-y-calderón-de-rivera/self-portrait-time-flies-1929.jpg"/>
    <apex:image styleClass="fill" value="http://uploads5.wikiart.org/images/magdalena-carmen-frieda-kahlo-y-calderón-de-rivera/self-portrait-time-flies-1929.jpg"/>
    <apex:image styleClass="fill" value="http://uploads5.wikiart.org/images/magdalena-carmen-frieda-kahlo-y-calderón-de-rivera/self-portrait-time-flies-1929.jpg"/>
    <apex:image styleClass="fill" value="http://uploads5.wikiart.org/images/magdalena-carmen-frieda-kahlo-y-calderón-de-rivera/self-portrait-time-flies-1929.jpg"/>
 </apex:panelGrid>
</apex:page>
Produces this four image across layout:
User-added image

For more information check with below links. Regards,
Nagendra.