[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.
[line_break/]
| 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 |
[line_break/] [grid_filters id=”grid1″] [filter_button_active tag=””]all[/filter_button] [filter_button tag=”photography”]Photography[/filter_button] [filter_button tag=”webdesign”]Web Design[/filter_button] [filter_button tag=”illustration”]Illustration[/filter_button] [filter_button tag=”media”]Media[/filter_button] [/grid_filters] [dynamic_grid id=”grid1″ columns=”4″ gutter=”10″ style=””] [grid_image src=”images/demo/gallery/2.jpg” width=”605″ height=”605″ alt=”image” tag=”photography” animation=”scale” style=””] [overlay_content title=”Photo effects” animation=”fade” style=””]
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_link src=”images/demo/gallery/2.jpg” width=”605″ height=”605″ alt=”image” tag=”media” animation=”scale” link=”#” 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_link] [/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_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] [/toggle_code]