Images display based on total no of Id's

Question

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"}
 
),

 }
 )

ajhick · Answer

This is the basic bones. I've stopped it displaying past two rows but haven't included any code to scroll through the pages, I'll leave that up to you. Play around with the local!numberOfListingsToGenerate, local!maxListingsPerRow and local!maxRowsPerPage variables to see the different results you get. 
 If the second row is uneven I haven't done anything about that but you'd have to consider how you'd want to do this and could be quite tricky for some numbers of listings. 
 Is this the sort of thing you're after? 
 a!localVariables(
 local!numberOfListingsToGenerate: 9,
 local!listings: a!forEach(
 items: 1 + enumerate(local!numberOfListingsToGenerate),
 expression: a!map(
 address: concat(
 fv!index,
 " Test St, Testville"
 )
 )
 ),
 local!numberOfListings: if(
 a!isNullOrEmpty(local!listings),
 0,
 length(local!listings)
 ),
 local!maxListingsPerRow: 5,
 local!maxRowsPerPage: 2,
 local!numberOfColumns: min(
 local!numberOfListings,
 local!maxListingsPerRow
 ),
 local!totalRows: roundup(
 local!numberOfListings / local!maxListingsPerRow,
 0
 ),
 local!numberOfRows: min(
 local!totalRows,
 local!maxRowsPerPage
 ),
 a!columnsLayout(
 columns: {
 a!forEach(
 items: 1 + enumerate(local!numberOfColumns),
 expression: a!localVariables(
 local!columnNumber: fv!item,
 a!columnLayout(
 contents: {
 a!forEach(
 items: 1 + enumerate(local!numberOfRows),
 expression: a!localVariables(
 local!index: product(fv!item - 1, local!numberOfColumns) + local!columnNumber,
 local!listing: index(
 local!listings,
 local!index,
 {}
 ),
 local!address: index(
 local!listing,
 "address",
 {}
 ),
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextIcon(
 icon: "home",
 size: "LARGE_PLUS"
 ),
 a!richTextItem(
 text: concat(
 char(10),
 char(10),
 char(10),
 local!address
 ),
 style: {
 "STRONG",
 "UNDERLINE"
 }
 )
 },
 align: "CENTER"
 )
 },
 height: "MEDIUM",
 style: "NONE",
 marginBelow: "STANDARD",
 showWhen: not(a!isNullOrEmpty(local!listing))
 )
 )
 )
 }
 )
 )
 )
 }
 )
)