MODX :: ModX Template Design

3

Joe

jbpetry Reply #1, 4 months, 2 weeks ago

Link to this post#1

Hello Fellow Designers and Developers,

Let me start with this is my first website with ModX so I'm a bit overwhelmed, but want to use ModX for another project so I was using this site as a stepping stone. I'm looking for some suggestions for how to go about programming the following front page. Please refer to this http://freeingmindchaos.dyndns-home.com/og/static/external.html. The page/template (static) is programmed, but I'm having a bit of a problem understanding or implementing the content into a dynamic page.

Here's my idea of breaking down the site:
- Header - contains the main nav and login link (Planning on using a chunk with Wayfinder Snippet)
- Gallery - will probably be rotating using a snippet
- Welcome Paragraph - will be content from home resource
- Sidebar - includes three separate chunks each calling different snippets:
- Search Box - will use a snippet allow the user to search the site for certain keywords
- Sub-nav Box - will use wayfinder snippet to develop sub-nav (unsure how to do this in the resources so the sub-nav items don't show in main nav)
- Blog Box - will hold the most recent blog/news post
- Main content - this is the most confusion for me as these are basically three introduction/summaries of these sections

I understand that in the Main content area I could use Template Variables, but I don't think this is the most useful way of using ModX. Then I wonder if I should create a separate template for my landing page compared to my http://freeingmindchaos.dyndns-home.com/og/static/internal.html or if I should just create a chunk/snippet to get this element into the webpage.

I'm looking for any helpful suggestions so I can make the most effective webpage. As my next project will be similar to the current ModX website with different components with rounded corners and content within them.

Thanks,
Joe

15,112

How MODx Evo Works

Log in to an Evo Manager username guest, password guestuser.

sottwell Reply #2, 4 months, 2 weeks ago

Link to this post#2

There is no one "most useful way" of using MODx. The most useful way of using MODx is whatever works best for you and your users.

TVs are the way to go if you have different blocks in the main content area. Decide which block can most logically be considered the "main" content block and use the regular resource content field for that (although I have on occasion not used it at all). Avoid TV tags (and any other MODx tags as much as possible) in the main content field - it's far too easy to accidentally break something when editing the main contend field. I'd rather use half a dozen TVs inserted into several div blocks in the template (positioning and hiding the div blocks as appropriate in the CSS) than have a bunch of TV tags in the main content field.

I've seen templates that were nothing but a series of chunks, snippets and TVs, which I personally find very confusing. As much as possible I avoid using chunks in the template except for actual site-wide content; usually the only chunk I'll have in my template is the footer. MODx tags themselves aren't treated as content; for example menu snippets are included in the template itself. Why have to process a chunk that is only going to have a snippet, when the same thing is used across the site? By "content" I mean what will actually be displayed in the browser.

My inclination is to make my template the basic HTML skeleton, avoiding having HTML in my content as much as possible. I've never had to use more than three templates, and then only in cases where the pages in question were really wildly different in structure and trying to manipulate things with CSS would have been really complicated. But in general, there are only so many basic HTML layouts. You can use a TV to provide an ID or classname attribute for the body tag and use that in your CSS to show/hide/position entire sections of your template. For example, two-, three-, and single-column layouts are easily managed from a single template by hiding the unneeded columns and resizing the remaining ones.

For sidebars, I use chunks for each sidebar block, using divs with ID and classname attributes in the chunk. Then I create a TV with a list of available chunks to choose from, usually using @INHERIT as the default value. There are some nice custom TVs available now to allow re-ordering these chunks in the list so the sidebar blocks will appear in different positions for different pages as desired.

Rotators are easy to create using whatever javascript you prefer; just have your list generator (getResources maybe, a gallery app, or simply a custom snippet fetching images from a directory) output the structure the javascript expects.

33

shick11sp Reply #3, 4 months, 2 weeks ago

Link to this post#3

thanks for the insight susan. that has been a question of mine for a while as well. i understand the beauty of modx is that there is no one "most useful way" to use the system, but i still wondered what some of the common setups that experienced modx'ers used for typical layouts for client pages, and your post has provided just that.

any other users want to chime in on how they go about laying out their tenplates for clients?

11,692

PLEASE, PLEASE specify the version of MODX you are using . . . PLEASE!

MODx info for everyone: http://bobsguides.com/MODx.html

BobRay Reply #4, 4 months, 2 weeks ago

Link to this post#4

My general rule that when something will be rendered on all pages using a template, but not in pages using other templates, I put it in the template itself rather than in a chunk.

Like Susan, I don't like to see chunks used gratuitously. It slows down page loads and can make things hard to find when you want to edit them. It also means that if you change a chunk, you have to figure out which templates use it and test them all.

When you maximize what's in the template itself, you usually only have to test that template when making changes.

Also, like Susan, I usually have very few templates, though some people use many templates successfully and there are some advantages to doing that.

---------------------------------------------------------------------------------------------------------------
PLEASE, PLEASE specify the version of MODX you are using . . .
PLEASE!
MODx info for everyone: http://bobsguides.com/MODx.html

917

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

microcipcip Reply #5, 4 months, 1 week ago

Link to this post#5

I used to have only one template for every website, but then there was a problem with Template Variables organization because "ManagerManager" (evo) and "Form Customization" (revo) can target, as far as I know, only the template and not a specific resource.

So now for every template I use this code:

{{head}}

<body>
<!-- [Container] -->
<div id="container">

    {{header}}
	
	<!-- [Content] -->
	<div id="content">
                {{content}}
	</div>
	<!-- [/End Content] -->
	
    {{sidebar}}
	
    {{footer}}
	
</div>
<!-- [/End Container] -->

    {{login}}
</body>
</html>

and in the {{content}} and {{sidebar}} I place a snippet that outputs a chunk based on the template in use, and also few TVs to place custom code if required by a particular resource (then I hide these Tvs with ManagerManager / Form Customization):

 <h1>[*longtitle*]</h1>
[[ifTemplate? &template=`[*template*]` &trueChunk=`chunk-top-[*template*]`]]
[*custom-code-1*]
[*content*]
[*custom-code-2*]
[[ifTemplate? &template=`[*template*]` &trueChunk=`chunk-bottom-[*template*]`]]

It works fine although I am not sure about performance issues.
Moreover, if you have a website with a fairly basic structure you would have to create a ton of chunks :p