Over the recent months we have been hard at work here at Pleth, LLC redesigning our logo and completely rebuilding and reorganizing our website while converting the back-end to MODx. One of the most debated portions of our site has always been our portfolio section. There are many “dazzling” ways to present a portfolio, but for us finding the best method for displaying the sheer volume of our work has always been a priority. So, when I ran across this Trevor Davis article on a filterable, jQuery driven portfolio technique I knew we had found our candidate. With a little tweaking this solution would blend very well with the documentMan snippet I have written about on other occasions. Now that our site rebuild is complete you can see the finished portfolio I am describing.
Goal
Integrate the documentMan snippet and a jQuery portfolio solution to provide a solution that will allow projects to be added to it by only uploading a screenshot image into a given directory with the directories serving as categories.
Files
Execution
- Place the jQuery and Framework files in your assets/js directory and then call them into the head of your page.
- Create a snippet with the code provided in the documentMan_portfolio.txt file above.
- Create another snippet with the code provided in the documentMancontent.txt file above. This snippet aggregates all of the list items generated by the documentMan calls for each category.
- Create the page where your portfolio will live and place code similiar to this in that document:
<div id="container"> {{portfolioCats}} <ul id="portfolio"> [[docMancontent?]] </ul> </div> - Now, create sub-pages under the portfolio in the directory tree. On each page you will place a snippet call associated with a category. This snippet only creates the list items of the greater unordered list that drives the presentation of the portfolio script. As you can see in the code the javascript selector is driven from the directory name. The {{portfolioCats}} HTML chunk contains the category code (unordered list) and at present must be hand coded and must match you directories. Make sure you select (blank) beside ‘Uses Template’ on these pages.
<ul id="filter"> <li ><a href="#">all</a></li> <li><a href="#">category1</a></li> <li><a href="#">category2</a></li> <li><a href="#">category3</a></li> <li><a href="#">category4</a></li> <li><a href="#">category5</a></li> <li><a href="#">category6</a></li> <li class="last"><a href="#">category7</a></li> </ul>
Each of these will exist in tandem with a directory in assets/images.
[[documentMan? &Location=`category1`]]
The Rest of It
It is important to note that this incarnation of the documentMan snippet derives all of the list item and link data from the directory names and the individual images names. So, what must happen is that each of the image names must be structured like: projecturl.com.jpg. Otherwise your links won’t be created appropriately.
As I mentioned above, the end result is a nicely presented portfolio that can be added to quickly and easily by simply uploading a new project screenshot into the appropriate directory.
