Images display based on total no of Id's

Hi , My requirements are i need to get the above images based on the no of listing id's i have. I also need to get  the address  and price and all details should be dynamic also . Can anyone please help me out here . 

Below i have attached my  code 

a!localVariables(
   local!houses:rule!SHA_qe_getDocuments(
     entityId: index(ri!Document,"entityId",null)
   ),
   local!address:rule!SHA_qe_toGetPropertyAddressDetails(
     listingId: ri!listing.listingId
   ),
   local!listingData:rule!SHA_LISTING_EXPRUL(listingId:ri!listing.listingId),
   
   local!numCols: 3,
   local!selectedCard,
   local!selectedInterface,
   {
     a!columnsLayout(
       columns: a!forEach(
         items: enumerate(local!numCols)+1 ,
         expression: a!localVariables(
           local!colIndex: fv!index,
           a!columnLayout(
             contents:  {
               a!forEach(
                 items: local!houses,
                 expression: a!cardLayout(
                   contents: {
              a!billboardLayout(
               backgroundMedia:a!documentImage(
                 document:fv!item
               ),
               height: "SHORT",
               marginBelow: "NONE",
               overlay: a!barOverlay(
                 contents: a!forEach(
                 items: local!address,
                 expression: 
                 {
                   a!sideBySideLayout(
                     items: {
                       a!sideBySideItem(
                         item: a!richTextDisplayField(
                           label: "Address",
                           labelPosition: "COLLAPSED",
                           value: a!richTextItem(
                             text: fv!item.addressline1,
                             size: "MEDIUM",
                             style: "STRONG"
                           )
                         )
                       ),
                       a!sideBySideItem(
                         item: a!richTextDisplayField(
                           label: "City & State",
                           labelPosition: "COLLAPSED",
                           value:fv!item.city & ", " & fv!item.province
                         ),
                         width: "MINIMIZE"
                       )
                     },
                     alignVertical: "MIDDLE",
                     stackWhen: "TABLET_LANDSCAPE"
                   )
                 }),
                 style: "DARK"
               )
         ),
         a!cardLayout(
           contents:a!forEach(
             items: local!listingData,
             expression: 
           {
             a!sideBySideLayout(
               items: {
                 a!sideBySideItem(
                   item: a!richTextDisplayField(
                     label: "Price",
                     labelPosition: "COLLAPSED",
                     value: a!richTextItem(
                       text:fv!item.price,
                       size: "LARGE",
                       style: "STRONG"
                     )
                   )
                 ),
                 a!sideBySideItem(
                   item: a!richTextDisplayField(
                     label: "Beds",
                     value: fv!item.bedRooms
                   ),
                   width: "MINIMIZE"
                 ),
                 a!sideBySideItem(
                   item: a!richTextDisplayField(
                     label: "Baths",
                     value: fv!item.bathRooms
                   ),
                   width: "MINIMIZE"
                 ),
                 a!sideBySideItem(
                   item: a!richTextDisplayField(
                     label: "Sq. Ft.",
                     value: fixed(fv!item.squareFootage, 0, false)
                   ),
                   width: "MINIMIZE"
                 )
               },
               stackWhen: "TABLET_LANDSCAPE"
             )
           }),
           link: a!dynamicLink(
             saveInto: {
               a!save(
                 local!selectedInterface,
                 1
               )
             }
           ),
           showBorder: false
         )    
                   }
        
           ),
        
           )   
               
   },
             width:"NARROW_PLUS"
           
           ) 
   )
     ),
     alignVertical: "TOP",
     showWhen: isNull(local!selectedInterface),
     stackWhen: {
       "PHONE",
       "TABLET_PORTRAIT"}
       
),

 }
 )