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_link src="/images/demo/gallery/3.jpg" width="605" height="605" alt="image" tag="webdesign" animation="scale" link="#" style=""] [overlay_content title="title" animation="" style="uk-ignore"] <p>Content goes here</p> [/overlay_content] [/grid_image_link] [/dynamic_grid] 