<![CDATA[ The Open Source Bespoke CMS (presented by Jeff Whitfield) - My Forums]]> https://forums.modx.com/thread/?thread=20252 <![CDATA[Re: The Open Source Bespoke CMS (presented by Jeff Whitfield)]]> https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield?page=2#dis-post-112939 ]]> Bravado May 12, 2010, 02:55 PM https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield?page=2#dis-post-112939 <![CDATA[Re: The Open Source Bespoke CMS (presented by Jeff Whitfield)]]> https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield?page=2#dis-post-112938 ]]> mrhaw May 12, 2010, 12:30 PM https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield?page=2#dis-post-112938 <![CDATA[Re: The Open Source Bespoke CMS (presented by Jeff Whitfield)]]> https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112937 adhiarta May 11, 2010, 08:19 PM https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112937 <![CDATA[Re: The Open Source Bespoke CMS (presented by Jeff Whitfield)]]> https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112936 ]]> Bravado May 11, 2010, 02:37 PM https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112936 <![CDATA[Re: The Open Source Bespoke CMS (presented by Jeff Whitfield)]]> https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112935 you mean [[EvoGallery?...]] ?

Ow, ok.
The second ZIP has a different snippet’s name. tongue]]> goldsky May 11, 2010, 11:57 AM https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112935 <![CDATA[Re: The Open Source Bespoke CMS (presented by Jeff Whitfield)]]> https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112934
Homepage

The homepage starts out with a basic set of div’s and a simple snippet to spit out the list of images to show within the jQuery Cycle instance: 

    <div id="homelooks">
        <div id="homeimages">
[!homepageLooks? &ids=`[*homeLooksOrder*]`!]
        </div>
        <div id="hometitle"></div>
        <div id="homenav"></div>
    </div>


If you look at the homepageLooks.snippet.php you’ll see the basic snippet used. All we’re doing is taking the value of a TV called homeLooksOrder, which is nothing more than a comma-delimited list of the page ID’s that hold the information about the pics we want.

On the backend, I took the homeLooksOrder TV, which is just a simple text field, and used a custom ManagerManager widget called Gallery Sorter to create a more elegant way of picking and choosing which images to show on the front-end as well as changing the order. With the widget in place, I can just enter in a rule in my ManagerManager rules:

mm_gallery_sorter('homeLooksOrder','73');


I tell it what TV field to change and what parent to look in for all the info about the images. If you investigate the default !template widget code and compare it to my code, you’ll get a good idea on how this was done. Lots of jQuery related stuff so if you’re not up to speed on jQuery, I suggest you do since ManagerManager widgets and functions are heavily jQuery based. smiley

Looks page

For the Looks page, the jCarousel jQuery plugin needed a JSON object array to feed the images to be shown. As such, I created a special EvoGallery call that spits out a JSON compatible array for a specific variable:

[+phx:if=`[*template*]`:is=`9`:then=`
    var lookscarousel_itemList = [
[!Gallery? &display=`images` &type=`carouselJson` &itemTpl=`looks.carouselJson` &itemTplLast=`looks.carouselJsonLast` &sortBy=`sortorder` &gallerySortDir=`ASC`!]
    ];
    looksCarousel(lookscarousel_itemList);
`+]


Since I had to put this in the footer of the document, I added a PHx call that checks to see if the page is using a certain template. From there, I assign a lookscarousel_itemList js variable and use the Gallery snippet to spit out the data. After that, I fire off a looksCarousel function (see the hadleighs.js file for how this function works).

Now, for a quick explanation of the snippet call...

First, the display parameter tells it that I want to display the images associated with this page. You can also choose to display galleries if the page has children with images assigned to them. You can also choose to show a single image as well. (We’ll get to that in just a sec).

Next, I set the type. EvoGallery allows you to set a configuration type, which is just a directory in the root of the EvoGallery snippet folder. In this case, I have a folder named carouselJson, which has the default templates to use for the wrapper, each individual item, and even which CSS and/or JS files to load. Since the JSON result can’t have a comma at the end, I manually set the templates for each item as well as the last item via a set of chunks.

After that I set the order of the results to be based on the order set within the module.

When you click on an image, you’ll notice that it brings up a detail overlay via some jQuery based AJAX. This is all based on a simple connector page that contains another EvoGallery snippet call that grabs the single image referenced by ID in the AJAX call:

[[Gallery? &display=`image` &type=`hadleighs-detail`]]


By default, calling a single image via the ’image’ display parameter expects a variable called ’picId’ using a standard PHP $_REQUEST variable. You can changes this to something else via the picId parameter.

And that pretty much takes care of all the basic bits necessary within MODx itself to create this functionality. The rest is pretty much all wrapped up with my jQuery functions within the hadleighs.js file. Feel free to post questions if you get lost. smiley

Jeff

]]> Bravado May 11, 2010, 11:51 AM https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112934 <![CDATA[Re: The Open Source Bespoke CMS (presented by Jeff Whitfield)]]> https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112933 another gallery... laugh
definitely will try this!]]> goldsky May 11, 2010, 11:03 AM https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112933 <![CDATA[Re: The Open Source Bespoke CMS (presented by Jeff Whitfield)]]> https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112932

I’ll be posting the other code soon. Just need to wrap up the necessary bits and post a quick explanation of what is what and where.

Jeff]]> Bravado May 11, 2010, 10:46 AM https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112932 <![CDATA[Re: The Open Source Bespoke CMS (presented by Jeff Whitfield)]]> https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112931

Jeff]]> Bravado May 10, 2010, 04:20 PM https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112931 <![CDATA[Re: The Open Source Bespoke CMS (presented by Jeff Whitfield)]]> https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112930 pbowyer May 10, 2010, 11:21 AM https://forums.modx.com/thread/20252/the-open-source-bespoke-cms-presented-by-jeff-whitfield#dis-post-112930