Page 16 of 24
Dynamic Grid
To create a filterable portfolio grid, use the [dynamic_grid] shortcode. The id must be unique for each portfolio grid. Use the [grid_filter] shortcode to create filters for the grid. The [grid_filter] shortcode can be placed in a different module position. the tag parameter defines the filters of the grid.
| Parameters | Description |
|---|---|
id |
A unique id that identifies a dynamic grid |
tag |
Defines the filters for the dynamic grid. |
animation |
set the animation for the portfolio items |
Show code
<!-- grid filters -->
[grid_filters id="grid1"]
[filter_button_active tag=""]all[/filter_button]
[filter_button tag="photography"]Photography[/filter_button]
[/grid_filters]
<!-- grid items -->
[dynamic_grid id="grid1" columns="4" gutter="10" style=""]
[grid_image src="/images/demo/gallery/1.jpg" width="605" height="605" alt="image" tag="photography" animation="scale" style=""]
[overlay_content title="Title" animation="fade" style=""]
<p>Content goes here</p>
[/overlay_content]
[/grid_image]
[grid_image src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image" tag="webdesign" animation="scale" style=""]
[overlay_content title="title" animation="fade" style=""]
<p>Content goes here</p>
[/overlay_content]
[/grid_image]
[grid_image src="/images/demo/gallery/3.jpg" width="605" height="605" alt="image" tag="webdesign" animation="scale" style=""]
[overlay_content title="title" animation="" style="uk-ignore"]
<p>Content goes here</p>
[/overlay_content]
[/grid_image]
[/dynamic_grid]