Portfolio Sections
Portfolio Grids Updated
IMPORTANT: If you are using a ThememMountain HTML product other than Marquez v.1.0.5, Sartre v.1.0.2 or later, Warhol, Kant or Basho, check this page for the old portfolio grid structure. This page will be available until all templates have been updated using the latest version of the framework.
Portfolio grids are based on the Timber framework content grids and can be displayed using one, two, three, four, five or six columns. A portfolio grid is basically just a content grid wrapped in a container with unique styling. Our portfolio grids have been redesigned from scratch to offer a simpler setup and a faster way to modify them on the fly using a range of classes and data attributes.
Alternate the number of thumbnails per row by changing the .content-grid-X class, where X represents the number of columns (2-6).
Example
...
Related Sections
- For grid column basics please see Images > Grid of the Framework Docs.
- For thumbnail captions please see Images > Captions of the Framework Docs.
- For thumbnail rollovers and animation classes please see Images > Rollovers of the Framework Docs.
Portfolio Grid Attributes New
Portfolio grids come with several data attributes for controlling the type of layout, grid thumbnail ratio, grid filter and resize animation duration, and whether dimensions should be variable or fixed.
Layout Mode
Set the layout mode of the grid by adding the data-layout attribute to the grid-container wrapper. Opt between two layouts, "masonry" or "fitRows".
Example
...
...
...
IMPORTANT: If you apply layout mode to a content grid you must add the class .grid-sizer to the grid item you want to use as a size guide for setting column width.
Fixed Dimensions
By default grid thumbnail height is variable. Force the grid to set thumbnail width and height by adding the data-set-dimensions attribute to the grid-container wrapper. Note: Requires that layout is set. Attribute takes no value.
Example
...
Grid Ratio
Set the grid thumbnail ratio by adding the data-grid-ratio attribute to the grid-container wrapper. Ratio is specified as a decimal where default is set to 1.5. Note: Requires that layout and dimensions are set.
Example
...
Note: Setting a unique grid ratio means that any images used must be resized using the same ratio. If not resized using the same ratio, cropping will occur!
Filter Duration
Set the grid filtering duration by adding the data-animate-filter-duration attribute to the grid-container wrapper. Duration is specified in milliseconds where default is set to 700, representing 0.7 seconds. Note: Requires that only layout is specified.
Example
...
Resize Animation & Duration
Force the grid to animate upon window resize by adding the data-animate-resize attribute to the grid-container wrapper. Note: Requires that only layout is specified. Attribute takes no value.
Specify the duration of the resize animation by adding the data-animate-resize-duration to the grid-container wrapper. Duration is specified in milliseconds where default is set to 700, representing 0.7 seconds.
Example
...
Grid Margins New
Our template grids offer three margin options, namely, 30px (default), 10px, or 0px margins.
Reduce column margins to 10px by adding the .small-margins class to the grid-container wrapper.
Example
...
Remove column margins by adding the .no-margins class to the grid-container wrapper.
Example
...
Full Width Grids
Make any grid full width by adding the .full-width class to the grid-container wrapper.
Example
...
Masonry & Filtering
Although portfolio grids do not require masonry for aligning thumbnails you can still use the script for filtering grid items. To use masonry simply add the data-layout attribute to the grid container and specify "masonry".
Example
...
Filtering Menu
You can add a filter menu to any portfolio grid. The filter menu is designed as an independent block which means you can easily move it around and style it independently of the grid itself.
Example
Note: Categories should be defined as classes proceeded by "."., ".design"
Adding Grid Items to Categories
Adding a grid item to one or several categories is easy, simply add the class name to the .grid-item wrapper.
Example
...
Note: All grid items are by default added to the "All" category and therefore does not need to be specified. Classes are added to the grid item wrapper without the "."
Unique Grid Examples
Set Dimensions Grid
When using a masonry grid layout, images used should have the same widths but can have variating heights as the tiles of the grid will rearrange to fit accordingly. However, when using the attribute data-set-dimensions each grid item will receive a fixed width and height which is determined by the grid ratio. In these instances, images need to respect certain width/height constraints. Below are suggested image sizes based on a ratio of 1.5:
- Landscape: 760x507px
- Large Landscape: 1520x1023px
- Portrait: 760x1047px
- Large Portrait: 1520x2082px
- Wide: 1520x507px
When using set dimensions we can variate the size of the tile using the following classes: .landscape, .large.landscape, .portrait, .large.portrait and .wide. Default tile size is set to landscape. The image below clearly shows how these classes are applied. Below is an example with variating tile sizes.
Example
Grid Slider
Carousel slider with thumbnails. Note: Sizes are only suggestive based on the number of thumbs visible.
- Two Columns: 800x800px
- Three Columns: 500x500px
- Four Columns: 360x360px
