It’s no secret that Arketi loves MODX. It’s a content management system (CMS) that gives you a clean slate to build a site your way. There is no predefined structure that you have to build your sites within and no tweaking of your design to fit another developer’s vision of how a site should be structured. As the MODX site says, “Creative. Freedom.”

There is always a tradeoff with that kind of freedom. With no one telling you how to structure your site, you have to decide how to do it yourself! It’s intimidating at first, but once you start getting into the power that MODX offers with template variables, input/output filters, snippets and chunks, it gets addictive. The hard part is learning what tools you have available and how to utilize them to do what you want.

We’re going to look at MIGX, a type of custom template variable that has quickly become one of my favorites. Using MIGX, which stands for MultiItemsGridtv for MODX, Arketi was able to create a scrolling homepage banner for our client, ARA.

Whoa, whoa, what’s a template variable? Well, let’s explain that first. In MODX, a template variable is a custom field for a MODX Resource. Resources in MODX can be many things, but the most common are representations of your website’s pages. Template variables allow you to store or use custom fields in your pages. They can be simple things such as text or a block of rich text with code. Or, they can be more complex such as date and time for recurring events, drop down lists built from other resources, or check boxes used to turn on or off page features. Basically, it’s one of the more powerful tools in MODX.

Setting up MIGX

I would highly recommend also reading the excellent tutorial for MIGX created by Mark Hamstra here and reading the MIGX documentation here. Both are excellent guides. 

The hardest part of the whole process is setting up the initial template variable. To begin, MIGX is installed through the MODX package management page. Once installed, you have access to a new type of template variable. Set your name, caption and description as you would for any other, and assign it to which template can use this variable under template access.

The input option is where it gets different. Set your input type to MIGX and you’ll see a whole host of new options. The most important are the form tabs and grid columns and both fields require JSON statements. The form tabs are how your data is stored and presented while the grid column is how that data is presented to a user in the MODX manager.

The ARA form tabs

The caption line defines what the header will say when you’ve opened a new item in your grid.
Using the title as an example, let’s look at each piece:

• “field”:”title” is the name used for the field
• “caption”:”Title” is the display name of this field
• “description”:”Intro Title” is a short bit of descriptive text shown to the user
• “inputTV”:”textTV-MIGX” (this one is key) this defines the TYPE of the field. This is a bit confusing at first but this entry looks for the textTV-MIGX template variable. It’s a special template variable, not assigned to a template that is set up with the textTV-MIGX name and the type is set to text.

As you can see above, there are 5 types of input TVs we use:

• placeholderTV-MIGX is a hidden field so it does not show up when editing a line
• textTV-MIGX is a simple text field
• textareaTV-MIGX is a simple text area
• imageTV-MIGX is an image template variable, allowing processing of a thumbnail.
• homeagepanelcolorTV-MIGX is a special template variable made for this panel. It is a series of radio buttons allowing a user to select a color

The ARA grid columns look like this

Let’s look at the title again:

• “header”: “Title” is the title for this column
• “width”: “100″ sets this column to 100 pixels wide
• “sortable”: “true” gives you the ability to sort it
• “dataIndex”: “title” links this column with the field name used in our Form Tabs.

There are a few special cases here such as the placeholder and image “renderer”: “this.renderPlaceholder” helps create a sequential id for each row. “renderer”: “this.renderImage” helps to create a thumbnail image in the row.

Once you are all done, go to any resource that uses this new template variable and you will see something like this:

You get a very nice, easy to update grid of items. Clicking add item opens up a pop up window with the ability to create a new row with all the necessary information.

Placing this template variable on a page gives us this:

Not very helpful, but that is where two other MODX tools come in—the snippet and the chunk.

Snippets are the way MODX can run pieces of dynamic PHP code on a page. Chunks are pieces of static text or other elements on a page. Chunks don’t process PHP, but they can be used to call snippets. The template variable, a snippet called “HomepageSlider”, and a pair of chunks is all we need to turn the output above into HTML code we can use.

On the homepage template is this line:

[[HomepageSlider? &input=`[[*HomepageFeatures]]` ]]

[[*HomepageFeatures]] is the name we gave our Template Variable

“HomepageSlider” is the name of the Snippet we are going to use. You can see that the Template Variable has been assigned to a paramater named input. This will be passed to the Snippet and used as a PHP variable.

So here’s the snippet’s code:
HomepageSlider

Let’s walk through this.

• First, turn that template variable into something usable. If you remember from before, we assigned a parameter to the snippet call named input. We are now using one of the MODX functions to turn that JSON string into a PHP array.
• Since the site editor might want to change the order of the slides in the manager, make a new variable that starts at the number 1 called slideorder.
• Create the output variable and make sure nothing is in it. Next, we can start to add some HTML code.
• We then start to step through this big array. First, set the MIGX_id to whatever number the slideorder variable is. In this case, it is the first one, so we number it one.
• Now, make a call with one of the MODX functions called getChunk. It does exactly as it sounds. It gets a chunk called ‘HomepageSliderTpl’ and uses the row array (more on this later).
• We then bump up the slide order by one.
• We run through this loop filling up a new array called section1.
• Once this loop is done, we implode the array into a nice new bit of HTML code.
• In most cases you would now be ready to return your output variable to the page. In the case of the ARA homepage area, the content is split from the images. Therefore, we have a bit more HTML code as well as another for each loop and implode.

This snippet has two getChunk statements. Here is what the getChunks look like

HompageSliderTpl

HompageSliderTpl2

When this chunk is called in or for each loop, it is given an array that has key pairs. The key value associated with ‘title’ will be placed in your chunk where you see the placeholder [[+title]]. You may notice that these placeholders share the same names as our field names way back in the Template Variable setup.

And there we have it! Once this snippet is executed on the page, it drops in a bit of HTML code that our Javascript based slider can then use.

According to The Wall Street Journal’s tech journalist, Walt Mossberg, “everything is changing” in regards to technology. Mossberg discusses that with the progression of technology — new computers, hardware, systems and apps — it’s unknown what will come next, but what is known is that the rules have changed.

This video clip is from “Walt Mossberg: Live and Unplugged,” an event hosted by The MIT Enterprise Forum of Atlanta.

Arketi’s annual pumpkin carving contest is here! Arketians have been hard at work brainstorming what it takes to win your vote (by any means necessary). You never know what celebrities, characters or interpretations of the latest news you might find.

Click on any of the entries below to see a larger version and brief description.

The Results!

Team 3: The Sinister Squashling – 180 Votes

Kerri, Ashley, Joy, Charles

Team 1 : Occupy Sesame Street – 129 Votes

Rory, Mary Rose, Jamie, Micky

Team 2 : Topless “Princess” Kate – 63 Votes

Jackie, Amy, Sami, Jim

THank you for everyone who voted!

Arketi’s annual pumpkin carving contest is here! Arketians have been hard at work brainstorming what it takes to win your vote (by any means necessary). You never know what celebrities, characters or interpretations of the latest news you might find.

Click on any of the entries below to see a larger version and brief description.

While you’re here, don’t forget to vote below!

Be sure to check back later today to find out which pumpkin earned the most votes.

You’re at a trade show, and you’ve met a client face-to-face for the first time. In the process of conversation, you discover they are not just a client. They are your cheerleader – among that top percentage of people who are strong advocates for your company. Wouldn’t that make a great testimonial? Too bad they are in California, you’re in Atlanta and you’re both leaving at the end of the day. Fade to a black-and-white screen from the old serials that says “The End” and suddenly there’s a question mark.

But wait – the solution is likely already in your pocket. Android phones and iPhones have some serious multimedia tools, with newer phones even capable of shooting 720p HD video. For an on-the-spot interview, you can always use your phone to capture the video and load it directly to your company’s YouTube channel. There is no production or editing involved, and it can be on the web in seconds – oftentimes, this just adds to the impromptu, on-the-scene feel. (Of course you can also save the video and edit it later to add in some branding elements.)

Even better are the newest crop of Flip-style pocket recorders, which are capable of HD recording. Cisco’s Flip UltraHD has added a new accessory port that allows for expansion, and wireless clip-on microphones have already been announced, or simple stereo microphones with a plug-in port for an external or handheld microphone. The Kodak ZI-8 is also in this class of recording device and is capable of HD recording. However, it has an external microphone jack.

Audio is important, especially online where clear voices and clean audio can make up for any lack of video quality. Most people are willing to forgive a video for being slightly dark or overly compressed online. However, most will move on quickly if they can’t understand what is being said! Having the option for an external microphone on these portable devices is a big boon.

Add a small portable tripod and an inexpensive handheld mic, and you’re ready to do on-the-spot interviews or testimonials for well under $300. (Not to mention community events, company meetings, outings, etc.) A small microphone, tripod and camera could easily fit in a pocket or purse. These types of video recorders have a built in USB that allows anyone with a Wi-Fi connected device to upload your recordings to YouTube or send to a studio for editing with your brand.

There are times when you want to have the perfect lighting and production in a studio, but portable video devices give you flexibility when you can’t. More importantly, it enables you to capture what you need – even when you didn’t know you were going to need to. Content is king, and you’ll be able to capture it when it is the most important.