If you’re building a listings grid, portfolio, or any repeating content, typing every detail in by hand doesn’t scale. Change a detail, and you’re editing the design. Add a new item, and you’re copying and pasting layout instead of just publishing a post.
This tutorial connects a Mosaic loop to a custom post type and its Metabox custom fields, so every card in the grid pulls its image, location, description, and other details straight from your data. Once it’s wired up, adding a new listing is as simple as publishing a post.
Add the loop
Import the Gibraltar theme with the real estate page kit, or if you already have Gibraltar installed, add a Library element to a new template, choose the Page category, and select Homepage 10. Scroll down, and you’ll see four listings, each typed in by hand.
Select the card you want to reuse and copy it. You’ll paste this back in once the loop is in place.
Delete the entire listings container, then add a plain empty container from the Add panel in its place.
Inside the new container, add a Loop element and select your filtered post type, in this example Listings. Insert the loop, and your real post data appears in place of the static content.
Limit and order the listings
On the loop’s settings panel, set the limit to match your grid, for example 4.
By default, the most recently added post shows first. To show the oldest one first instead, set Order by to Post variable, then set the variable key to Publish date GMT. This keeps the comparison accurate no matter what time zone you’re in.
Delete the pagination, link, and image elements that come with the empty loop item. You’ll use your own card design instead.
Paste the card you copied in step 2 into the now empty item element.
Style the grid
Select the items element and open its Style panel. Set Display to Grid.
Add the number of columns you want, for example 2, to complete the grid layout.
Connect the Metabox fields
Select the image element and open the dynamic data window. Insert the Featured image variable. This one is a standard post variable rather than a Metabox field, and it updates for every listing.
Select the location element and open the dynamic data window. Choose the Metabox location variable and insert it in place of the static text.
The description comes from the post content, which includes HTML you don’t want showing up as visible text. Select the dynamic code, and from the Functions dropdown, choose Remove HTML. Insert it, and you’ll get plain text only.
Insert the Metabox area variable. On its own it returns only the number, so type the unit directly after the dynamic code, for example “sq ft”, to append it automatically to every value.
Connect any other Metabox fields, like bedrooms, bathrooms, and parking, the same way you connected location.
Result
Your listings grid now pulls every detail, image, location, description, area, and the rest, straight from your post type and its Metabox fields. Add a new listing by publishing a post, and it shows up in the grid automatically, styled exactly like the rest, with no manual editing required.