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

• jQuery 1.3.1
• Framework
• documentMan Snippet
• documentMancontent Snippet

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.

I have been keeping an eye our for a method of presenting Ditto (which is a MODx document aggregator) posts without taking up too much real estate on a Chamber of Commerce site. Once I ran across Grakalic’s easySlider. jQuery-driven solution I realized that it could be utilized for such a purpose. I have tried to outline my process below. As long as you are fairly familiar with the inner workings of the MODx application framework it ought to be a snap.

Download Files (Step 1)

• easySlider

Create Ditto Output (Step 2)

If you aren’t familiar with Ditto, it is a snippet inside of MODx that allows you to aggregate and present document lists and content quickly and easily. The presentation drives off of a Chunk inside of MODx that serves as an HTML template. Since easySlider uses an unordered list all you need to do is create a template like the one below that generates the list items:

<li>
<div id="slidertitle"><a href="[~[+id+]~]" title="[+title+]">[+title+]</a></div>
<p>[+summary+]</p>
<div id="sliderfull"><a href="[~[+id+]~]" title="[+title+]">Full Article...</a></div>
</li>

You then call in the template from the Ditto snippet call, something like:

[!Ditto? &tpl=`ditto_easySlider`!]

Place easySlider (Step 3)

Give you div container an id of ‘slider’ and then place the appropriate call ins in the header of your document:

<script type="text/javascript" src="[(site_url)]assets/js/jquery.js"></script>
<script type="text/javascript" src="[(site_url)]assets/js/easySlider.packed.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#slider").easySlider({
			prevText:'<< Previous',
			nextText:'Next >>',
			orientation:'horizontal'
		});
	});
</script>

Enjoy (Step4)

That’s really all there is to it. Here is my implementation of this solution. Part of our goal here was to present the posts as time sensitive articles while promoting community involvement by encouraging chamber members to submit their own area specific articles.

Although I haven’t tested this at all, everything appears to be in order and might offer a more elegant solution for managing multiple feeds links.

What we have done is taken a site utilizing a custom MODx snippet, coupled with the jQuery, jCarousel photo gallery script and created a photo gallery that should require a minimal skill level to manage.

The Challenge

As mentioned in my previous post I was able to take MODx and jCarousel and produce an easy to use photo gallery that only needed images and an unordered list to populate the script content. Once the initial phase of the site build was complete, I realized that by creating a MODx snippet we could dynamically create this unordered list by only placing and removing images in a specific directory. In my opinion this would further simplify the process for adding and removing images from the gallery.

The Solution

A MODx snippet was created (Here is the snippet code.). In order to replicate this just create a snippet in MODx named ‘directory’ and then call it in where you want the gallery placed as [!directory? &Location=`yourdirectory`!]. Now the assumption here is that you are working with images inside of the ‘assets/images’ directory of Modx. Of course the jCarousel code is necessary as well. You can see the gallery snippet in action here.

NOTE: There is a slightly different jCarousel version for placement of multiple carousels on a single page.

More Possibilities

We are looking at the possibility of using this for more than just image galleries. This would likely require more extensive work with the snippet and would include the use of another snippet variable to denote the type and location of the document directory in question.

During the creation of a new agriculture site I recently discovered the jCarousel jQuery plugin. This creates a flexible little photo gallery that can be completely styled to match your surrounding site. I have also been pleasantly surprised to discover that when used within the MODx Framework it allows us to create a photo gallery that can be easily updated by a client through the CMS.

How It’s Done

First of all download the jcarousel.zip file from the site site mentioned above. You will also need to choose which Static, Dynamic, or Special version of jCarousel that you would like to use. I am referencing the Static, Simple Carousel in this example. Unzip the file and upload it to your server, the entire jQuery library is contained within the download.

Next, let’s switch to Modx and create a Template Variable (TV) named jQuery [*jQuery*] that will reside within the head tags of your site. The use of the TV is not an absolute necessity as you can simply place the CSS call-ins and JavaScript code directly in the header chunk or relevant template. I opted for this approach since the all of the code necessary to create and display my gallery with only be loaded specifically on that gallery page. The “Tango” skin files, in the download, were modified to change the look of the gallery.

The code for an unordered list was then placed in the content area of the page (this is all the code that is required to display the gallery). Each list item tag contains an image reference. The script simply orders the list items and then displays them one at a time with each click of the mouse.

The real beauty of this combination is that the end user can, with a little instruction, be taught to upload an image through the MODx admin and then add another list item to that gallery page. This left us with the possibility of a completely self-managed photo gallery solution.

Possibilities

I am also planning on looking into a modification that will dynamically generate the unordered list items based solely on the contents of a target directory. This would allow for a much simpler, client-side process since they would only have to upload images to a directory to add to their site’s online gallery. After completing some rudimentary testing it appears that this can be used to display text as well as images. This makes jCarousel as an interesting option for displaying general content as well.
The follow up to this post is here.