PortfolioList Component

Use the PortfolioList component to display a filterable Masonry portfolio on a page. The component has the following properties:

• width - Width (1x only) of candidate image source (src attribute) for the user agent to use.
• widths - Widths (1x only) of possible image sources (srcset attribute) for the user agent to use.
• sizes - Value for the image element's sizes attribute.
• titleFontSize - Title font size
• titleTopMargin - Title top margin
• itemTopMargin - Item top margin
• itemWidthXs - Item width for extra small devices
• itemWidthSm - Item width for small devices
• itemWidthMd - Item width for medium devices
• itemWidthLg - Item width for large devices
• itemWidthXl - Item width for extra large devices
• gutterSizeXs - Horizontal space between items for extra small devices
• gutterSizeSm - Horizontal space between items for small devices
• gutterSizeMd - Horizontal space between items for medium devices
• gutterSizeLg - Horizontal space between items for large devices
• gutterSizeXl - Horizontal space between items for extra large devices
• modalPadding - Modal dialog padding
• spinnerColor - Growing spinner color
• horizontalOrder - Choose whether to lay out items to (mostly) maintain horizontal left-to-right order

Theming

Customize Portfolio by utilizing the source Sass file located at plugins/msof/portfolio/assets/sass/portfolio-list.scss

Responsive Breakpoints

The default grid breakpoints are defined in the source Sass file located at plugins/msof/portfolio/assets/sass/portfolio-list.scss and are the same as the ones used in Bootstrap 4.6.x:

$property-list-breakpoint-sm: 576px;
$property-list-breakpoint-md: 768px;
$property-list-breakpoint-lg: 992px;
$property-list-breakpoint-xl: 1200px;

If the default breakpoints are not suitable for your website, feel free to change them.

Since Portfolio is developed to be mobile first, it uses the following media queries:

// Extra small devices
// No media query for "xs" since this is the default in Portfolio

// Small devices
@media (min-width: $property-list-breakpoint-sm) { ... }

// Medium devices
@media (min-width: $property-list-breakpoint-md) { ... }

// Large devices
@media (min-width: $property-list-breakpoint-lg) { ... }

// Extra large devices
@media (min-width: $property-list-breakpoint-xl) { ... }