Hi,

-i want image placed in side by side but i will show vertically.
- requrement is simple:

- i want grand chaild of image URL field Show on Parent object. 
IP(Parent Object) --> WO(Child Object) --- Grand Child(SI)

*******APEX controller***********************

public class WorkOrdersInstaIPTemplateSharinPixImage{
    
    public List<IP_Template__c> IPTemplateLst {get;set;}
    public List<String> urlList {get;set;}
    
    
    public Map<String, List<ImageParam>> urlString{get;set;}
    
    
    public Boolean hasNoImage{set;get{
        return urlString.size()==0?true:false;
    }}
    
    public  WorkOrdersInstaIPTemplateSharinPixImage (ApexPages.StandardController stdCtrl) {
        
        
        
        Id workOrderId = stdCtrl.getId();   // Work order ID
        
        urlString= new Map<String, List<ImageParam>>();
        
        Set <ID> installedProductSet= new Set <ID>();  // SET of Installed Product ID
        
        System.debug('Installed Product :' + installedProductSet);
        
        List<SVMXC__Service_Order__c> workOrderLSt = new  List<SVMXC__Service_Order__c>(); //List Of Work Order
        
        workOrderLSt=[select Id,SVMXC__Component__c,IP_Template_Type__c from SVMXC__Service_Order__c where Id = :workOrderId AND IP_Template_Type__c !=NUll]; //Fetch the Wo related Installed Product
        
        for(SVMXC__Service_Order__c woInstall: workOrderLSt)
        {
            system.debug('woInstall.SVMXC__Component__c:- '+woInstall.SVMXC__Component__c);
            installedProductSet.add(woInstall.SVMXC__Component__c);
            system.debug('installedProductSet:- '+installedProductSet);
        }
        
        IPTemplateLst= [SELECT
                        Id,Type__c,Installed_Product__c,Title__c,
                        (Select Id, sharinpix__ImageURLFull__c,Landscape_Portrait__c,sharinpix__FileName__c, sharinpix__AlbumID__c FROM SharinPix_Images__r order by sharinpix__SortPosition__c ASC),
                        (SELECT Id, sharinpix__SharinPix_Token__c FROM SharinPix_Albums__r)
                        FROM IP_Template__c
                        Where Installed_Product__c IN:installedProductSet AND Type__c!=Null
                        ORDER BY
                        Title__c
                        ASC]; //Fetch the IP temate related to Installed Product
        
        urlList= new List<String>();
        
        System.debug('IPTemplateLst :'+IPTemplateLst);
        
        
        List<IP_Template__c> IPTemplate = new List<IP_Template__c>(); 
        
        For(IP_Template__c  ip: IPTemplateLst)
        {
            For(SVMXC__Service_Order__c work:workOrderLSt)
            {
                if((ip.Installed_Product__c==work.SVMXC__Component__c)&& (ip.Type__c==work.IP_Template_Type__c ))
                {
                    IPTemplate.add(ip);
                }
                
            }            
        }        
        
        for(IP_Template__c titleUrl:IPTemplateLst) 
        {
            List<ImageParam> urlValues = new List<ImageParam>();
            for(SVMXC__Service_Order__c work:workOrderLSt){
                
                if((titleUrl.Installed_Product__c==work.SVMXC__Component__c)&& (titleUrl.Type__c==work.IP_Template_Type__c ) )
                { 
                    for(sharinpix__SharinPixImage__c b: titleUrl.SharinPix_Images__r)
                    {
                        urlValues.add(new ImageParam(b, titleUrl.SharinPix_Albums__r[0].sharinpix__SharinPix_Token__c));                
                    }
                    urlString.put(titleUrl.Title__c, urlValues);     
                }
            }
            
        }
        System.debug('urlString :'+urlString);
        
    }
    
    public class ImageParam{
        public String imageUrl{set;get;}
        public String albumId{set;get;}
        public String tokenString{set;get;}
        public String LandscapePortrait{set;get;}
        public String fileName{set;get;}
        
        
        public ImageParam(sharinpix__SharinPixImage__c img, String tokenString){
            this.imageUrl = img.sharinpix__ImageURLFull__c;
            this.albumId = img.sharinpix__AlbumID__c;
            this.LandscapePortrait = img.Landscape_Portrait__c;
            this.fileName = img.sharinpix__FileName__c;
            
            
             sharinpix.Client spClient = sharinpix.Client.getInstance();
            Map<String, Object> params = new Map<String, Object> {
            	'album_id' => albumId,
            	'path' => '/pagelayout/'+albumId,
            	'exp' => (DateTime.now().getTime()/1000) + 300,
                'Id' => albumId,
            	'abilities' => new Map<String, Object> {
                    'tags' => new Map<String, Object> {
                           'read' => true     
                      },
					albumId => new Map<String, Object> {
						'Access' => new Map<String, Object> {
                            'see' => true,
                            'image_list' => true,
                            'image_upload' => true,
                            'image_delete' => true,
                            'image_annotate' => true,
                            'image_tag' => true
	                 	},
                        'Display' => new Map<String, Object>{
                            'see' => true,
                            'tags' => true,
                            'date' => 'L'
                         }		
					}
            	}
            };
            this.tokenString = spClient.token(params);
         }
    }
}

<apex:page standardController="SVMXC__Service_Order__c" extensions="WorkOrdersInstaIPTemplateSharinPixImage">
    <apex:form >
        <apex:pageBlock rendered="{! !hasNoImage}">
            
            <apex:outputPanel style="overflow:hidden; height:100%"> 
                <apex:pageBlockTable value="{!urlString}"  var="title" >
                    <apex:column style="vertical-align: top;">
                        <apex:facet name="header">Title</apex:facet>
                        {!title}
                    </apex:column>
                    <apex:column >
                        <apex:facet name="header">IP Template Images</apex:facet>  
                        
                        <apex:panelGrid columns="5">
                            <apex:repeat value="{!urlString[title]}" var="img">
                                
                                <table>
                                    <tr>
                                        <td>
                                            
                                            <figure style="margin-left: -0.5rem;">
                                                <a href="javascript:void(0);"
                                                   onclick="openImage('{! img.albumId }', '{! img.tokenString}')" >
                                                    
                                                    <img src="{!img.imageUrl}" height="150" width="160" alt="img not available" style= "display: block; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1rem; margin:0" />
                                                    
                                                </a>
                                                <figCaption style='font-size: smaller;'>&nbsp;&nbsp;{! img.fileName } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{! img.LandscapePortrait }</figCaption>
                                            </figure>
                                            
                                        </td>
                                    </tr>
                                </table>    
                            </apex:repeat>
                        </apex:panelGrid>
                        
                        
                        
                    </apex:column>
                </apex:pageBlockTable>
                
            </apex:outputPanel>
        </apex:pageBlock>
        
        <apex:outputPanel rendered="{!hasNoImage}">
            <span style="background-color: #FFFFFF; font-size: 300%; height: 700px; width: 600px;">
                <br/>
                No Image Found
            </span>
        </apex:outputPanel>
        
    </apex:form>
    <script> 
    function openImage(albumId, tokenString){
        window.open('https://app.sharinpix.com/pagelayout/'+albumId+'?fullscreen=false&token='+tokenString)
    }
    </script>
    <!--    <sharinpix:SharinPix parameters="{! parameters }" height="500px"></sharinpix:SharinPix> -->
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> 
    <style>
        .pbBody table.list tr.headerRow td, body .pbBody table.list tr.headerRow th {
        min-width: 5rem;
        }
        
    </style>
</apex:page>