####MODX Extra:
| <article class="item [[getAlias? &id=`[[+parent]]`]] [[TaggerGetTags? &resources=`[[+id]]` &rowTpl=`tagger.item` &separator=` `]]"> | |
| <a href="[[~[[+id]]]]"> | |
| <div class="item_media"> | |
| <img src="[[+thumb]]" alt="" /> | |
| </div> | |
| <div class="item_content"> | |
| </div> | |
| </a> | |
| </article> |
| <?php | |
| /** | |
| * getAlias | |
| * | |
| * DESCRIPTION | |
| * | |
| * This snippet returns the alias of a page matching an id | |
| * | |
| * USAGE: | |
| * | |
| * [[!getAlias? &id=`[[+parent]]`]] | |
| */ | |
| $page = $modx->getObject('modResource', $id); | |
| if(!empty($page)) { | |
| return $page->get('alias'); | |
| } | |
| return ''; | |
| ?> |
| <button class="btn btn-default" data-filter=".[[+tag]]">[[+tag]]</button> |
| [[+tag]] |
| <!doctype html> | |
| <html lang="fr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>[[*pagetitle]] | [[*site_name]] </title> | |
| <base href="[[++site_url]]" /> | |
| <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /* ---- isotope ---- */ | |
| .isotope { | |
| max-width: 1200px; | |
| } | |
| /* clear fix */ | |
| .isotope:after { | |
| content: ''; | |
| display: block; | |
| clear: both; | |
| } | |
| /* ---- .item ---- */ | |
| .item { | |
| float: left; | |
| width: 200px; | |
| /*height: 200px; | |
| background: #0D8; | |
| border: 2px solid #333; | |
| border-color: hsla(0, 0%, 0%, 0.7);*/ | |
| } | |
| .item img{width: 100%;padding:5px;} | |
| h3{margin-bottom:1em;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="speedtest" class="col-md-12"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <h3>[[*pagetitle]] | |
| <small>Query time: [^qt^] ([^q^] Queries) | Parse time: [^p^] | Total time: [^t^] | Source: [^s^]</small> | |
| </h3> | |
| [[*introtext]] | |
| [[*content]] | |
| <div id="filters" class="button-group"> | |
| <button class="btn btn-default" data-filter="*">show all</button> | |
| CATEGORIES : | |
| [[pdoResources? | |
| &parents=`4` | |
| &tpl=`ui-button` | |
| &sortby=`menuindex` | |
| &sortdir=`ASC` | |
| &includeTVs=`0` | |
| &depth=`1` | |
| &where=`{"template:=":1}` | |
| ]] | |
| TAGS : [[TaggerGetTags? &rowTpl=`tagger.filters`]] | |
| </div> | |
| <div id="container"> | |
| [[pdoResources? | |
| &parents=`4` | |
| &limit=`0` | |
| &tpl=`article-tag-tpl` | |
| &includeTVS=`1` | |
| &includeTVList=`thumb` | |
| &tvPrefix=`` | |
| &sortby=`menuindex` | |
| &sortdir=`ASC` | |
| &depth=`1` | |
| &where=`{"template:=":2}` | |
| ]] | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> | |
| <script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| // init Isotope | |
| var $container = $('#container').isotope({ | |
| itemSelector: '.item', | |
| masonry: { | |
| columnWidth: 200, | |
| gutterWidth: 20 | |
| } | |
| }); | |
| // filter items on button click | |
| $('#filters').on( 'click', 'button', function() { | |
| var filterValue = $(this).attr('data-filter'); | |
| $container.isotope({ filter: filterValue }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |