Gallery Display Widget

The Gallery Display widget can show a set of properties based on a predefined filter.

This widget is mobile responsive and will expand to fill any container / space made available in your website page design.

An alternative display of the Gallery Widget is available for your own properties using a filter. See instructions below for how to use this.

Size and Layout

The Gallery Layout is responsive to both the device and containing wrapper.

  • Minimum width supported: Supported to 240px wide container
  • Maximum width: Unlimited

The number of columns will adjust automatically according to the available container width.

The following guidelines will help you select your container widths:

  • 1 Column: Up to 572px wide
  • 2 Columns: from 573px wide to 953px
  • 3 Columns: from 954px to 1391px
  • 4 Columns: from 1392px to 1789px
  • 5 Columns: from 1790px
  • etc

Alternative Display Automatic Columns

The alternative display presents larger photos.

The following guidelines will help you select your container widths:

  • 1 Column: Up to 703px wide
  • 2 Columns: from 704px wide to 1430px
  • 3 Columns: from 1431px to 1907px
  • 4 Columns: from 1908px
  • etc

Colors and Background

  • Widget Themes can be used to apply predefined, or your own, color schemes.
    • The alternative display is currently black and white only.
  • Uses 'Widget Background' color from the applied widget theme

Parameters

This widget has a fixed height for each row.

  • id="MBBv3_FeaturedGallery" (required) This defines the widget to be a Gallery Display Widget. This ID is for all variants of the Gallery Widget.
  • filter= (optional) A single filter parameter can be applied with any or all of the parameters below all appended. Specify the Filter. Using a Filter with the widget is optional, but allows you to completely specify the types of properties you want to display using any available MLS criteria. (e.g. Foreclosures in Arvada, Listings between 300,000 to 400,000 in Denver, etc.) as well as control various aspects of how the widget displays.
    • filter={idx/mls criteria} Use and combine any FIELD NAMES and VALUES from the IDX data set for your MLS. Learn more.
    • filter="carousel:true" Transforms the Gallery Widget (not the alternative display) into a 1-row animated carousel. The height and widget of each property display is fixed, i.e. the The filter values for columns and limits are ignored. The carousel will then fill the space available. The minimum width is 275px - this will show one property at a time.
    • filter="delay:XXXX" Sets the speed of the carousel in milliseconds. The default is 2500. E.g. filter="carousel:true+delay:2500"
    • filter="header-menu:false" This will hide the 'menu' icon and the 'save-search' button in the header.
    • filter="login-panel:false" This will hide the entire header above the display.
    • filter="limit:n" (optional) If the applied Search Filter returns more properties than the "limit", then pagination will occur showing the "limit" number on each panel. Pagination controls will be displayed at the foot of the widget.
    • filter="order:{ } (optional) Use the "order" parameter to determine the sort order of properties displayed.
    • filter="featured:true (optional) This option IN CONJUNCTION WITH a filter to set "agent_id" or "office_id" will present the alternative display. This cannot be used for general MLS listings.
    • filter="nolistingshide:{class} (optional) This filter is especially useful where you want to display your own listings but want to hide the widget and any heading if there are NO listings. Without this option, if there are no listings, then your website could well be displaying a panel such as "See My Listings!"  ... and below this it would show "0 listings" from the widget. So, with this filter you can add a <div> wrapper with a specified class around the whole display which will be hidden if there are no listings. as shown in this example:
<div id="MBBv3_FeaturedGallery" filter="agent_id:12345+nolistingshide:mylistings">
</div>
[mbb_widget id="MBBv3_FeaturedGallery" filter="agent_id:12345+nolistingshide:mylistings"]

The default Gallery Display Widget

See Search Filters and How to Use Search Filters for more help on these parameters.

<div id="MBBv3_FeaturedGallery"></div>
[mbb_widget id="MBBv3_FeaturedGallery"]

Alternative Display Examples

<div id="MBBv3_FeaturedGallery" filter="agent_id:318092+featured:true"></div>
[mbb_widget id="MBBv3_FeaturedGallery" filter="agent_id:318092+featured:true"]

Defaults

If no Search Filter is applied, the Gallery Display widget will display your listings (based on your MLS Agent ID). See How to Use Search Filters.

Depreciated

The following filters are no longer supported and will be ignored.

  • filter="columns:x"
Updated on November 30, 2021

Was this article helpful?

Need Support?
Can't find the answer you're looking for?
Contact Support