###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
####MODX Extra:
<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> |
<?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 ''; | |
?> |
<!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.
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?