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.
Hey there, I've run into a problem using this. I'm using ModX 1.0.0 and I end up with a blank page after following these instructions, i think to the letter.
I have modified the script slightly to use a different folder assets/folio since the assets/images folder contains other images which I don't want shown.
I think it has something to do with the docMancontent snippet where the include happens but am not sure.
Can you please help?
February 22nd, 2010 at 10:13 am
I believe that I used this snippet pre-1.0.0 successfully, but if you can upgrade your MODx I would probably sugges that first. I have also been looking at having the snippet completely rewritten. I would love to control the output with TPLs instead of directly editing the snippet for output because if I ever have issues it seems to be with my coding in that section. Since you are getting a blank page, that my be where your problem is.
Here is a link for the latest code on this one: http://www.gregorysmart.com/downloads/documentM.... It allows you to sort using 'shuffle' too.
Hope that helps!
February 22nd, 2010 at 12:52 pm
Hi,
Thanks for the reply and the link to the new file. The problem remains however.
It seems to be from calling [[docMancontent?]] which results in a blank page.
However, if i make the call [[documentMan? &Location=`somefolder`]] it works correctly. I am wondering if the includes within docMancontent is somehow causing this error?
How can i trace this to see if the includes are in fact included?
Thanks again,
February 22nd, 2010 at 2:07 pm
Is your snippet named 'docMancontent' or 'documentMan'? If the second call is working it sounds like it is named 'documentMan' and is correct?
February 22nd, 2010 at 2:12 pm
Main snippet is called documentMan and the calling include snippet is called documentContent.
Thanks
February 22nd, 2010 at 2:15 pm
I have it set as you suggested just named slightly differently.
<div id=”container”>
{{portfolioCats}}
<ul id=”portfolio”>
[[documentContent?]]
</ul>
</div>
However, if i call it thus:
<div id=”container”>
{{portfolioCats}}
<ul id=”portfolio”>
[[documentMan? &Location=`somefolder`]]
</ul>
</div>
It works but then of course the filter does not.
February 22nd, 2010 at 2:17 pm
I may be misunderstanding, but the name in the call has to match the name of the snippet.
February 22nd, 2010 at 2:18 pm
Ah, did you change line 28 to point to the correction location? $dir = $modx->config['(site_url)'].'assets/images/'.$Location.'/'; // set path to files
February 22nd, 2010 at 2:21 pm
Hi Gregory,
Yes, first thing i did
February 22nd, 2010 at 2:27 pm
Hmmm, not sure on this one. I can tell you that I just implemented in on a new development on MODx 1.0.2 with a system running PHP 5.1.6 and it is working just fine. I am about to be gone for the day, but if you sent me a txt file with the snippet code and paste the call into the body of the email I will be more than happy to take a look at it later: greg@pleth.com.
February 22nd, 2010 at 2:30 pm
Ok Gregory,
I appreciate the help.
Thanks
P.S. If you want to remove these comments please feel free. I'd rather not clog up your comments section with support issues
February 22nd, 2010 at 2:34 pm
Hi Greg, sorry to bother you again but i neglected to copy your contact email before you removed the other posts related to our previous discussion and so couldn't post you the files you requested.
I followed your advice and updated MODx to 1.0.2, used your new snippet (with minor changes for the path) and I believe the problem is related to the [[docMancontent?]] call.
In that snippet are include items, which as I understand relate to pages held under the portfolio container page.
I have this tree structure:
portfolio
-webdesign
-printdesign
-photography
In the assets/folio folder I have the physical directories created:
webdesign
printdesign
photography
Each of the created pages contains the [[documentMan? &location=`location`]] call as described. So i'm a bit puzzled now as to why it won't work.
Any tips?
Thanks
February 27th, 2010 at 10:00 am
You can send the file to greg@pleth.com
February 27th, 2010 at 4:22 pm
Hi Greg,
Just wondering if you are considering adding 'on-the-fly' thumbnail generation so we're not shrinking full size images down to save bandwidth ???
Thanks
May 15th, 2010 at 9:31 am
If you upload through the WYSIWYG editor it will create thumbnails that you can access. It create a ._thumb prefix and by default shrink it down to 100px wide I believe. There is also a snippet to help with this: http://modxcms.com/forums/index.php?action=prin...
May 15th, 2010 at 11:36 am