###Minimal Portfolio with MODX and Isotope.js ####Use hierarchical resource (parent->child) to structure categories ####Demo here : http://tinyurl.com/n5slndh
####MODX Extra:
- pdoResources in pdoTools http://modx.com/extras/package/pdotools
Last active
February 2, 2019 13:02
-
-
Save em-piguet/b46b6644b9b10a9019b3 to your computer and use it in GitHub Desktop.
Minimal Portfolio with MODX and Isotope.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <article class="item [[getAlias? &id=`[[+parent]]`]]"> | |
| <a href="[[~[[+id]]]]"> | |
| <div class="item_media"> | |
| <img src="[[+thumb]]" alt="" /> | |
| </div> | |
| <div class="item_content"> | |
| </div> | |
| </a> | |
| </article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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 ''; | |
| ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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; | |
| } | |
| .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> | |
| [[pdoResources? | |
| &parents=`4` | |
| &tpl=`ui-button` | |
| &sortby=`menuindex` | |
| &sortdir=`ASC` | |
| &includeTVs=`0` | |
| &depth=`1` | |
| &where=`{"template:=":1}` | |
| ]] | |
| </div> | |
| <div id="container"> | |
| [[pdoResources? | |
| &parents=`4` | |
| &limit=`0` | |
| &tpl=`article-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> | |
Actually i use 2 templates. Each parent resource have a template(id 1) and each child resource have a different template (id 2). Pdotools "where" filter is used to get the good resources. In template 2 i put a TV (thumb) which is an image but it can be what you want of course.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This looks an interesting method - Are you just using 1 template? - So each Filter Category is a resource with each child resource being an image...is that correct?