Back to Basics

I think this system has great promise and I really want it to work out. But, to be honest, all the documentation I come across is severely lacking. Yes, there are plenty of articles out there, but they all seem to be isolated bits of information that don’t explain the whole process in relation to the workflow. The designer is left to figure out how a piece of the puzzle fits and what other piece of the puzzle needs to be found and placed before it. And, we’re talking about the basic building blocks, here.

For instance, creating a multi-column template that can be used in multiple pages, each page with different content placed in its correct column. A basic requirement of a CMS system but I’ve been spending way too much time trying to figure out how to implement it in Revo (the current one as of this writing...version number escapes me right now). Exactly what are the different chunks/template variables, etc. that need to be created and what is the exact code that needs to be placed in each?

When I read most of the documentation, I’m left with the feeling that I’m supposed to come to the table with a lot more knowledge about coding languages than should be necessary in order to produce basic stuff. When the system is touted as a ’simple to implement system,’ you can see where this might play havoc with my male ego.

Yes, the basic concepts are being introduced, but not expanded on enough. Remember, the basic concepts with this system are really not that basic in practice. It’s one thing to find out that there is a such thing as a ’chunk’ or ’template variable’ and what each are basically for, but more information is needed as to exactly what goes into such items to make the process work...at least with basic site requirements. And, more importantly, how each of these items relate to one another, from start to finish.

Having said all this, I do admit that there have been some tutorials out there that have made a great attempt at this. Unfortunately, they seem to be the exception, rather than the rule. Some work, many do not and I don’t know why not, especially since I follow them to the letter, copy/pasting the code. And, they mostly seem to be about the advanced functionalities which seem to take for granted you already have an understanding of the basic concepts.

Sorry for the rant. Don’t mean to be difficult, or naive, but I really want my relationship with this system to work out.

BTW: anyone know of any good...start to finish...tutorials on how to create a multi-column template as outlined above? Maybe I’ve used the wrong search terms, but I haven’t been able to find it. I’ve been successfull at building a basic site with a single content area, but not with multiple areas of content.

Thanks in advance.

Sorry, I don’t have a start to finish tutorial, but how are you setting your template up?

The [*content] TV could go in the middle column, then you could create a [*left-col] and [*right-col] TV and drop them in the template where those columns are located. I’m assuming you’ve tried this?

Pretty much building on the previous answer. I have a three column MODx revo site out in the wild (http://www.whitedentalrooms.co.uk excuse my CSS, as it’s the weakest bit of my gig at present).

Basically, I followed the same principles as either the Nettuts MODX 960 tutorial (or possibly Mary’s Coding Pad - einsteinboi on here), but added:

1. Three new TVs in their own category - of type rich text (eg rightCol, middleCol, leftCol)
2. Assign the categories to whatever templates you want. They will appear in their own tab under ’Template Variables’.
3. In each template I added a new chunk to go along with the standard $pageHeader, $pageFooter and $pageSidebar - $pageColumns

So it looks something like this:

4. In $pageColumns I output each of my columns in their own div



And that’s it. The rest is styling - and taming TinyMCE which is a little fepper of a text controller.


Stick with it. The fog will lift. Yes, bits of it are under-explained and other bits are hugely techie - but that’s because the system is incredibly flexible and does some awesome things if you want it to. There’s a certain amount of lag and slack in the gap between the team releasing code and the community making the kind of useful commentary and tutorials, but again, that will get better.

Once I’ve transitioned my business sites (from WordPress) to MODx I hope to start helping out in this regard, but for now I do what I can on here.

I think part of the problem is that over 90% of what you want to do has nothing to do with MODx. With respect to the front end of a web site, MODx will replace any MODx tags in the text with whatever you tell it to (chunk content, TV content, language tag content, system setting content, or snippet return value), but otherwise, it doesn’t touch your HTML or CSS code.

It kind of sounds like you expect MODx tutorials and documentation to solve HTML/CSS issues for you, which is expecting a lot, especially from an open-source project you got for free.

That said, here’s one way to go. Create a template that’s a basic HTML web page. Put sample content for a page in the template with no MODx tags in the <body> section. Create an empty document with no content (since all the content is in the template) that uses that template. MODx will simply deliver the code in the template to the browser when you preview that page.

Solve all the HTML and CSS issues by editing the template and your CSS file and get it looking the way you want. Then, move all the actual content on the page into resource fields (E.G. Long Title, pagetitle, summary, content), template variables, or chunks and replace that content in your template with the appropriate MODx tag. Generate your menu with Wayfinder. Bingo, you’re site is in MODx.

Quote from: BobRay at Dec 17, 2010, 12:35 PM

I think part of the problem is that over 90% of what you want to do has nothing to do with MODx. With respect to the front end of a web site, MODx will replace any MODx tags in the text with whatever you tell it to (chunk content, TV content, language tag content, system setting content, or snippet return value), but otherwise, it doesn’t touch your HTML or CSS code....

Solve all the HTML and CSS issues by editing the template and your CSS file and get it looking the way you want. Then, move all the actual content on the page into resource fields (E.G. Long Title, pagetitle, summary, content), template variables, or chunks and replace that content in your template with the appropriate MODx tag. Generate your menu with Wayfinder. Bingo, you’re site is in MODx.

Thank you, BobRay, however the html/css part is not the issue I’m having. In fact, that is the easy part for me and what was drawing me to ModX in the first place...the fact that I could build a site, starting with how I would have built it in the first place, and by using the proper ModX tags, make the thing perform as a robust CMS. The ability to actually build a site that didn’t inherently look like just another template site. I’m not expecting ModX to solve anything regarding the basic html framework of the template or the CSS. In fact, the workflow you just outlined is how I envisioned it to go. The two last sentences you wrote are where I’m stuck.

I think the problem I’m having is the coding parts within the ModX-specific things, such as Template Variables and Snippits. The chunks part is easy to get and implement...in fact that part works similarly to php includes. I get that.

I’ve already implemented some of ModX into a test site. I took a site I did a while back, chosen because it is a very simple structure (kind-of template-like but easily built), which you all can view here:

http://www.rcpbc.org (the original non ModX version)

...and using that as the testing ground for ModX and so far have come to:

http://67.222.24.164/~rcpbc/index.php (the ModX training version)

As of this writing, the test version is to have three columns, as illustrated. Although you can see content in the three columns at the moment, only the main center column is being generated dynamically with a ’content’ tag. That’s straightforward to me. The header and footer are chunks that just contain the html code I would have hard-coded into the page to begin with. The top and footer menus are being generated with Wayfinder, but that was an easy tutorial implementation.

However, right now, as of this writing, the content you see in the left and right columns are just hard-coded into the template with plans on replacing the hard-coded content with content added in the resources area of the backend. Since I want to be able to use that same template for multiple pages throughout the site and have it be smart enough to house the correct content for the page you’re on, I’m assuming that that’s the job for template variables (that’s my newbie understanding, anyway).

Now what? How is that implemented is my problem. What template variables do I create...what code goes in them...how do they get attached to my template. I’m not getting that.

Quote from: motoxer4533 at Dec 17, 2010, 09:47 AM

Sorry, I don’t have a start to finish tutorial, but how are you setting your template up?

The [*content] TV could go in the middle column, then you could create a [*left-col] and [*right-col] TV and drop them in the template where those columns are located. I’m assuming you’ve tried this?

That was the plan. The problem is creating the TVs themselves. What goes in them?

Quote from: odeclas at Dec 17, 2010, 10:11 AM

Pretty much building on the previous answer. I have a three column MODx revo site out in the wild (http://www.whitedentalrooms.co.uk excuse my CSS, as it’s the weakest bit of my gig at present)...

Okay. Okay. This is getting interesting.

Quote from: odeclas at Dec 17, 2010, 10:11 AM

...
4. In $pageColumns I output each of my columns in their own div

<div class='foobar-left' id='left'>
[[+leftCol]]</div><!--end left col-->
<div class='foobar-middle' id='middle'>
[[+midCol]]</div><!--end mid col-->
<div class='foobar-right' id='right'>
[[+rightCol]]</div><!--end right col-->

...

And, what’s inside those?

Quote from: odeclas at Dec 17, 2010, 10:11 AM

...
And that’s it. The rest is styling - and taming TinyMCE which is a little fepper of a text controller.

Yeah, but taming TinyMCE is the subject of another rant, I’m sure.

Thank you for your response, odeclas.

In fact, thanks again to all of you who responded. I haven’t lost, yet.

waizen,

Start by explaining how the stuff in the right and left column will be generated in the first place? Is it unique per page? Is it unique per section, or some combination thereof?

As a starting point, and assuming you’re using Revo, make two addition TVs of the Textarea type. Give them a default content of @INHERIT:

[[*leftColumn]]

[[*rightColumn]]

Now in the static part on your template, swap out the static bits for each of those TV calls. TVs are nothing more than additional custom content fields. Please feel free to ask further clarification.

Forgot to tell you the "what goes in them" bit:

They just show up as extra content fields when editing the page. Put whatever you’d like into them. The @INHERIT default value means that they’ll use the value of the first ancestor they run into that has a value set. You could also put the default value of the part you replaced in your template, and edit that as needed on a page by page basis.

FWIW, I have a left sidebar TV in a test Revo site, which was set up as is shown in the first of the two attached images.

It allows me to select a chunk to insert as the content on a given page.

An example of it being called in a template is seen (near the bottom) of the second image.

Then I create a page that uses this template. In editting that page, I go to the TV tab and select the chunk that I want displayed in the left column.

BTW, this was Revo 2.0.3

Hope this helps,
Matt
(also in VT)