Gallery Display Widget

The Gallery Display widget is used to present listings with a standard gallery/grid layout, a carousel, or a featured gallery layout. The listings displayed will depend on any filter applied.

The widget is container and mobile responsive. The layout will adjust for device sizes and will fit into most spaces on a webpage.

Default Grid Layout

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

Carousel Layout

The widget changes to this layout when the carousel option is set with the filter.

The "carousel" layout shows properties in an animated single row carousel.

Featured Layout

The widget changes to this layout when the featured option is set with the filter.

The "featured" layout is available for your own properties using a filter (i.e. you must include a filter with your agent or office id). This applies a black and white theme with larger photos.

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

Standard display columns

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

The following guidelines for the standard Gallery widget 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

Featured display columns

The "featured" 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 "featured" layout is currently black and white only.
• Uses "Widget Background" color from the applied widget theme

Parameters

• 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 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="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="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="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 wrapper with a specified class around the whole display which will be hidden if there are no listings. as shown in this example:
    E.g. Add a div wrapper with class="mylistings" - (can be anything you like). Then, anything that is inside this div will be hidden IF the listing count is zero when you use this widget on the page

Example using "nolistingshide"

<div class="mylistings">
<!-- Hide this entire block if there are no listings -->
<h2>My Featured Listings<h2>
<div id="MBBv3_FeaturedGallery" filter="agent_id:12345+nolistingshide:mylistings"></div>
</div>

<div class="mylistings">
<!-- Hide this entire block if there are no listings -->
<h2>My Featured Listings<h2>
[mbb_widget id="MBBv3_FeaturedGallery" filter="agent_id:12345+nolistingshide:mylistings"]
<div>

The default Gallery Display Widget

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

Gallery Widget Examples

<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.