Page 16 of 23
[heading size="h2" style="uk-module-title"]Dynamic Grid[/heading]
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 |
Design is not what it looks like; Design is how it works. Good design speaks volumes about the designer
[/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="Ride the trail" animation="fade" style=""]Good things come, not to the fast, but to those who wait.
[/overlay_content] [/grid_image] [grid_image src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image" tag="illustration" animation="scale" style=""] [overlay_content title="Read everyday" animation="" style="uk-ignore"]if you first get to know who you are and are willing to work with a power that is greater than ourselves to do it
[/overlay_content] [/grid_image] [grid_image src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image" tag="media" animation="scale" style=""] [overlay_content title="Blown away" animation="fade" style=""]Always continue the climb. It is possible for you to do whatever you choose
[/overlay_content] [/grid_image] [/dynamic_grid] [toggle_code open="false" title="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] [/toggle_code]
