Portfolio
Frontend modules
There are four frontend modules coming with the extension:
- Portfolio list
- This module generates the portfolio list. It can be used in combination with the portfolio filter module.
- Portfolio reader
- This module generates the portfolio item details.
- Portfolio filter
- This module generates the portfolio filter based on the categories. It allows to filter the portfolio items in the list.
- Portfolio related list
- This module generates the related portfolio items. It should be placed on the portfolio reader page.
Portfolio list
The portfolio list module is responsible for displaying the items from a selected portfolio. Please review the available settings below to ensure you configure it properly.
List behavior
In the list settings, you can select which portfolio should be displayed. In addition, you can limit the number of displayed portfolio items or paginate them. Instead of pagination, you can enable the fancy infinite scroll feature, similar to what offers Instagram or many other social networks.
To make the portfolio list filterable in the frontend, check the Allow portfolio filtering box and choose the filtering behavior. You can also select the portfolio categories, which should filter the list.
Note
Please note that the infinite scroll works only if pagination is enabled.
Look and feel
The list module has two view types: standard and masonry. The first one is a regular grid. The latter is based on the famous Isotope by Metafizzy script and allows you to arrange tiles in a waterfall-like way. Right below the view setting, you can specify the portfolio columns behavior on different devices.
The "Portfolio list type" field allows you to select the portfolio style, which alters the look of the list. Feel free to try out which of the variants works best for you.
You can also include your custom SCSS file to override the default variables. It should be a bit easier to modify the styling than override the compiled CSS styles. Here is the list of default values:
$mainColor: #c91741 !default;
$portfolio-transition-time: 0.2s !default;
/* Portfolio Filter */
$portfolio-filter-transition-time: $portfolio-transition-time !default;
$portfolio-filter-items-gap-x: 1.5em !default;
$portfolio-filter-items-gap-y: $portfolio-filter-items-gap-x !default;
$portfolio-filter-item-color-active: $mainColor !default;
$portfolio-filter-item-color: inherit !default;
$portfolio-filter-item-color-hover: $portfolio-filter-item-color !default;
$portfolio-filter-item-font-weight: bold !default;
$portfolio-filter-item-border-width: 2px !default;
$portfolio-filter-item-border-color: $portfolio-filter-item-color-active !default;
$portfolio-filter-item-name-padding-x: 1em !default;
$portfolio-filter-item-name-padding-y: 0.5em !default;
$portfolio-filter-item-btn-background: $portfolio-filter-item-color-active !default;
$portfolio-filter-item-btn-border-radius: 4px !default;
$portfolio-filter-item-btn-color: #fff !default;
$portfolio-filter-item-btn-padding-x: 1em !default;
$portfolio-filter-item-btn-padding-y: 0.5em !default;
/* List & Reader */
$portfolio-categories-color: #666 !default;
$portfolio-categories-font-size: 0.9em !default;
$portfolio-categories-opacity: 0.65 !default;
$portfolio-categories-hover-color: $mainColor !default;
$portfolio-icon-border-radius: 50% !default;
$portfolio-icon-color: #000 !default;
$portfolio-icon-width: 46px !default;
$portfolio-icon-image-width: 50% !default;
$portfolio-icon-image-height: 40% !default;
$portfolio-icon-bg-color: #fff !default;
/* Portfolio list */
$portfolio-list-color: inherit !default;
$portfolio-list-content-bg-color: transparent !default;
$portfolio-list-content-padding-x: 0 !default;
$portfolio-list-content-padding-y: 0 !default;
$portfolio-list-name-margin-top: 0 !default;
$portfolio-list-name-margin-bottom: 0.2em !default;
$portfolio-list-name-color: null !default;
$portfolio-list-name-font-size: null !default;
$portfolio-list-categories-color: $portfolio-categories-color !default;
$portfolio-list-categories-opacity: $portfolio-categories-opacity !default;
$portfolio-list-categories-font-size: $portfolio-categories-font-size !default;
$portfolio-list-categories-hover-color: $mainColor !default;
$portfolio-list-image-margin-bottom: 1rem !default;
$portfolio-list-links-margin-bottom: 0 !default;
$portfolio-list-links-item-margin: 5px !default;
$portfolio-list-icon-border-radius: $portfolio-icon-border-radius !default;
$portfolio-list-icon-color: $portfolio-icon-color !default;
$portfolio-list-icon-width: $portfolio-icon-width !default;
$portfolio-list-icon-height: $portfolio-list-icon-width !default;
$portfolio-list-icon-image-width: $portfolio-icon-image-width !default;
$portfolio-list-icon-image-height: $portfolio-icon-image-height !default;
$portfolio-list-icon-bg-color: $portfolio-icon-bg-color !default;
$portfolio-list-icon-zoom-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><g fill='#{$portfolio-list-icon-color}'><path d='M0 7.564h16v.872H0z'/><path d='M7.564 0h.872v16h-.872z'/></g></svg>") !default;
$portfolio-list-icon-url-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16.001'><g fill='#{$portfolio-list-icon-color}'><path d='M11.685 0H16v.873h-4.315z'/><path d='M15.127 0H16v4.315h-.873V0z'/><path d='M15.259.133l.617.618-8.771 8.755-.617-.618L15.259.133zm-.132 8.007v6.334c-.001.361-.293.653-.654.654H1.527c-.361-.001-.653-.293-.654-.654V1.527c.001-.361.293-.653.654-.654H7.86V0H1.527A1.53 1.53 0 0 0 0 1.527v12.947a1.53 1.53 0 0 0 1.527 1.527h12.946A1.53 1.53 0 0 0 16 14.474V8.14h-.873z'/></g></svg>") !default;
$portfolio-list-icon-details-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='#{$portfolio-list-icon-color}' d='M3.7,8.3C1.7,8.3,0,10,0,12c0,1,0.4,1.9,1.1,2.6c1.4,1.4,3.8,1.4,5.2,0C7,13.9,7.3,13,7.3,12C7.3,10,5.7,8.3,3.7,8.3z M3.7,14.7C2.2,14.7,1,13.5,1,12c0-0.7,0.3-1.4,0.8-1.9C2.8,9,4.5,9,5.6,10.1c0.5,0.5,0.8,1.2,0.8,1.9C6.4,13.5,5.2,14.7,3.7,14.7 L3.7,14.7z M12,8.3c-2,0-3.7,1.6-3.7,3.7s1.6,3.7,3.7,3.7s3.7-1.6,3.7-3.7S14,8.3,12,8.3z M12,14.7c-1.5,0-2.7-1.2-2.7-2.7 c0-0.7,0.3-1.4,0.8-1.9c1.1-1.1,2.8-1.1,3.9,0c0.5,0.5,0.8,1.2,0.8,1.9C14.7,13.5,13.5,14.7,12,14.7L12,14.7z M20.3,8.3 c-2,0-3.7,1.6-3.7,3.7s1.6,3.7,3.7,3.7S24,14,24,12S22.4,8.3,20.3,8.3z M20.3,14.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7 c1.5,0,2.7,1.2,2.7,2.7C23.1,13.5,21.8,14.7,20.3,14.7L20.3,14.7z'/></svg>") !default;
$portfolio-list-hover-bg-color: rgba(#000, 0.8) !default;
$portfolio-list-icon-hover-bg-color: $portfolio-list-icon-bg-color !default;
$portfolio-list-icon-hover-color: $portfolio-list-icon-color !default;
$portfolio-list-icon-hover-zoom-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><g fill='#{$portfolio-list-icon-hover-color}'><path d='M0 7.564h16v.872H0z'/><path d='M7.564 0h.872v16h-.872z'/></g></svg>") !default;
$portfolio-list-icon-hover-url-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16.001'><g fill='#{$portfolio-list-icon-hover-color}'><path d='M11.685 0H16v.873h-4.315z'/><path d='M15.127 0H16v4.315h-.873V0z'/><path d='M15.259.133l.617.618-8.771 8.755-.617-.618L15.259.133zm-.132 8.007v6.334c-.001.361-.293.653-.654.654H1.527c-.361-.001-.653-.293-.654-.654V1.527c.001-.361.293-.653.654-.654H7.86V0H1.527A1.53 1.53 0 0 0 0 1.527v12.947a1.53 1.53 0 0 0 1.527 1.527h12.946A1.53 1.53 0 0 0 16 14.474V8.14h-.873z'/></g></svg>") !default;
$portfolio-list-icon-hover-details-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='#{$portfolio-list-icon-hover-color}' d='M3.7,8.3C1.7,8.3,0,10,0,12c0,1,0.4,1.9,1.1,2.6c1.4,1.4,3.8,1.4,5.2,0C7,13.9,7.3,13,7.3,12C7.3,10,5.7,8.3,3.7,8.3z M3.7,14.7C2.2,14.7,1,13.5,1,12c0-0.7,0.3-1.4,0.8-1.9C2.8,9,4.5,9,5.6,10.1c0.5,0.5,0.8,1.2,0.8,1.9C6.4,13.5,5.2,14.7,3.7,14.7 L3.7,14.7z M12,8.3c-2,0-3.7,1.6-3.7,3.7s1.6,3.7,3.7,3.7s3.7-1.6,3.7-3.7S14,8.3,12,8.3z M12,14.7c-1.5,0-2.7-1.2-2.7-2.7 c0-0.7,0.3-1.4,0.8-1.9c1.1-1.1,2.8-1.1,3.9,0c0.5,0.5,0.8,1.2,0.8,1.9C14.7,13.5,13.5,14.7,12,14.7L12,14.7z M20.3,8.3 c-2,0-3.7,1.6-3.7,3.7s1.6,3.7,3.7,3.7S24,14,24,12S22.4,8.3,20.3,8.3z M20.3,14.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7 c1.5,0,2.7,1.2,2.7,2.7C23.1,13.5,21.8,14.7,20.3,14.7L20.3,14.7z'/></svg>") !default;
/* Reader */
$portfolio-reader-header-margin-bottom: 1.5rem;
$portfolio-reader-categories-color: $portfolio-categories-color !default;
$portfolio-reader-categories-font-size: $portfolio-categories-font-size !default;
$portfolio-reader-categories-opacity: $portfolio-categories-opacity !default;
$portfolio-reader-categories-hover-color: $portfolio-categories-hover-color !default;
$portfolio-reader-name-margin-top: 0 !default;
$portfolio-reader-name-margin-bottom: 0 !default;
$portfolio-reader-name-color: null !default;
$portfolio-reader-name-font-size: null !default;
$portfolio-reader-name-line-height: null !default;
$portfolio-reader-link-url-background: $mainColor !default;
$portfolio-reader-link-url-border-radius: 0 !default;
$portfolio-reader-link-url-color: #fff !default;
$portfolio-reader-link-url-padding-x: 1.75em !default;
$portfolio-reader-link-url-padding-y: 0.6em !default;
$portfolio-reader-link-url-font-weight: null !default;
$portfolio-reader-link-url-font-size: 0.85em !default;
$portfolio-reader-link-url-hover-color: $portfolio-reader-link-url-color !default;
$portfolio-reader-image-margin-bottom: 1.5rem !default;
$portfolio-reader-hover-bg-color: $portfolio-list-hover-bg-color !default;
$portfolio-reader-icon-border-radius: $portfolio-icon-border-radius !default;
$portfolio-reader-icon-color: $portfolio-icon-color !default;
$portfolio-reader-icon-width: $portfolio-icon-width !default;
$portfolio-reader-icon-height: $portfolio-reader-icon-width !default;
$portfolio-reader-icon-image-width: $portfolio-icon-image-width !default;
$portfolio-reader-icon-image-height: $portfolio-icon-image-height !default;
$portfolio-reader-icon-bg-color: $portfolio-icon-bg-color !default;
$portfolio-reader-icon-zoom-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><g fill='#{$portfolio-reader-icon-color}'><path d='M0 7.564h16v.872H0z'/><path d='M7.564 0h.872v16h-.872z'/></g></svg>") !default;
$portfolio-extras-margin-bottom: 1.5rem;
$portfolio-extras-color: inherit;
$portfolio-extras-group-gutter-y: 0.5em;
$portfolio-extras-key-gutter-x: 0.5em;
$portfolio-reader-navigation-border-top-width: 1px;
$portfolio-reader-navigation-border-top-style: solid;
$portfolio-reader-navigation-border-top-color: #ededed;
$portfolio-reader-navigation-padding-top: 1.5rem;
$portfolio-reader-navigation-margin-top: 1.5rem;
$portfolio-reader-navigation-margin-bottom: 1.5rem;
$portfolio-reader-navigation-link-font-weight: bold;
$portfolio-reader-navigation-link-color: #000;
$portfolio-reader-navigation-link-hover-color: $mainColor;The last important section is the Template settings, where you can define the visible meta data or the image sizes.
Hint
To override the partial list template, you have to create a custom mod_vee_portfolio_list.html5 template and edit it there. You cannot choose it in the module settings because the partial template selection is dynamic and depends on the selected portfolio list type.
Portfolio reader
The portfolio reader module contains only the most essential options. Here, you have to choose the portfolios this frontend module should display. In addition, you can enable the previous/next portfolio navigation. Here, you can also choose your custom SCSS file, similar to the portfolio list module settings.
In the "Redirect settings" section, you can select how the categories link should be rendered. These configuration options should be compatible with the portfolio list module on the selected page.
Portfolio filter
To allow your visitors to filter the portfolio list items by a category, simply put the portfolio filter module on the page. It has a few simple settings, such as the referenced portfolio list module and the look-and-feel configuration: filter type, filter align, and filter orientation.
Here you can include your custom SCS file with variables, similar to list and reader modules.
Note
If you put the filter module on the page, ensure that the corresponding list module has the option to make it filterable enabled.
Portfolio related list
The portfolio related list module is a mini-version of the portfolio list module, which allows displaying the portfolio items related to the currently displayed one. Thus, this module should be placed on the same page as the portfolio reader module.
This module has almost identical settings to its list sibling. For the explanation of the options, please refer to the sections above.