Split content over 2 columns?

10 Posts

Terradon Reply #1, 15 years, 8 months ago

Hi all,
i use 1 template for my site, in which i have a div for content.....of course

but how can i still make use of just 1 template, and then insert 2 extra div’s (the 2 equal columns) and divide the content between those 2 columns?

What i have now:

created an HTML chunk, named 2equalcolumns:

<div id="links" style="float:left;width:50%">
<div class="innertube">

</div>
</div>
<div id="rechts" style="float:left;width:50%">
<div class="innertube">

</div>
</div>

I suppose i have to create 2 pieces of content(how??) and add them (how?) inside the 2 equalcolumns chunk?

Thanks in advance for any help!

1,161 Posts

Photowebmax Reply #2, 15 years, 8 months ago

Its hard to tell what you are doing exactly.

Are you trying to set up a container with two columns and have the content automatically flow from the left column into the right column (like a magazine) or are you trying to set up two side by side columns, both having their own editable regions?

If your plan is the latter then its a case of creating the template (with the two columns), styling it with CSS and then adding the MODx content placeholder

[*#content*]

to the main column and a TV

[*TVname*]

t the second column. You can create as many TVs as you like for the second column and even add a Rich Text area if you need one.

Your code sample indicates that you are using percentages for the column widths? Is it your goal to have a flexible width design?

10 Posts

Terradon Reply #3, 15 years, 8 months ago

Thanks for your answer, i will try to better explain what i wanted to do.

I already have a website template in use (and yes, it’s flexible width) and works perfect.
Inside my template i have a div for the main content.

So, no problem now, with 1 template i can handle my content.
But, sometimes i want a different layout for my content only (rest of the template remains the same).
The difference i want is for some content i prefer to display it in, for example, 2 columns.
I can make a second template for it, but then i have to maintain 2 templates.

So, i in fact i do have 2 different pieces of content, 1 for the left maincontent column and one for the right maincontent column.

Normally i add content by using [*content*] inside my template. Now i need 2 variabels like [*content1*] and [*content2*]?? and probably more in other maincontent layouts.

I just know MODx for a few days, so maybe that is why i just don’t see a simple solution.

I am trying to convert my site to a MODx driven site.

Here is what i am trying to do: http://www.terradon.nl/_cms/
You will see duplicate content in the 2 columns now, but that is just for testing layout.

1,161 Posts

Photowebmax Reply #4, 15 years, 8 months ago

Having more than one template is OK really. That is one method.

Another way would that would work is to present a TV in your template that lets you choose between two chunks. You could then have one chunk present the single column option with the content placeholder and the other chunk present the two column option, one column with the content placeholder and the second column with a custom TV (maybe adding a Rich Text editor as well).

Initially understanding how your template, Template Variables and Chunks all work together can be a head scratcher. Its important to learn the default MODx placeholders and what they offer. Then learn how to add your own TVs. You can then place your TV’s in chunks. These chunks can contain divs, classes, headlines and other stuff that you can control with your CSS file. All of this can knit together in a million different ways. The system is ultra flexible. Whatever your imagination can come up with you can make it function with these powerful MODx building blocks...

150 Posts

goonz39 Reply #5, 15 years, 8 months ago

Duncan Lock of www.codeistry.com helped me out on one of my first projects, and he enlightened me greatly. It is okay to use multiple templates, in fact, a lot of projects will call for it. Basically, you’ll be best off using a new template anytime you want to display information in a different way.

What you do to only maintain the code base in one spot is to use chunks for basically everything; this way, you only need to edit anything in one place. For instance, here is an example:

{{dtd}} <!-- chunk with Doc Type Definitions, in use throughout site -->
<head>
	{{metatags}} <!-- insert the call for the metatags; I use different fields to fill these in -->
	{{favicon}} <!-- inserts code for the favicon -->
	{{title}} <!-- inserts the code for the title tag -->
	{{styles}} <!-- main stylesheet call -->
	<!-- if I was building a new template that needs new calls, just insert a new chunk here -->
</head>
<body>
	<div id="wrapper">
		{{header}} <!-- inserts the header html -->
		{{navbar}} <!-- inserts the navigation -->
		<div id="rightbar">
			{{threesteps}} <!--inserts a design piece; one of my other templates doesn't call this chunk -->
			{{maincontent}} <!--inserts the main content html and the call for the [*content*] TV -->
			{{credit}} <!--inserts the call for the credit line -->
		</div>
		<div id="leftbar">
			{{leftpics}} <!-- inserts the call for the pictures on the left side -->
			<!-- let's say I wanted to add in more content in the left bar - insert a new chunk here! -->
		</div>
	<div class="clear"></div>
	</div>
</body>
</html>

Using this method, you can have as many templates as you like, and only edit in one place if you need to change something.

Alternatively, you can do as photowebmax said - use TVs to either call chunks or not. I have a design where I add or subtract stuff from the right sidebar based on how much content is on the page - I simply have a bunch of radio button TVs at the bottom (or maybe it is checkboxes, I don’t remember) that I use to add or subtract the pieces.

Another option would be using PHx (I think). I don’t know so much about this, but you could build the one template with a textarea TV at the bottom (or a rich text area), and then in your template it would go something like this (again, I don’t know PHx, so you would need to research to get the exact method of writing the code out - this is to give you an idea):

[+phx:your_tv_name_here:isnot=``:then=`your_chunk_name_for_the_two_columns`:else=`your_chunk_name_for_one_column`+]

I don’t know PHx syntax, but you hopefully get the idea. This method would be pretty nice, because then MODX would know automatically whether to display 2 columns or 1 column, based on whether you fill out the TV.

If you try out using multiple templates, you may find it works very well. This way, when you use a 2 column template, you’ll have the TVs at the bottom for your 2 column content input, and when you are using a 1 column template, you will only have the main content area to fill out. Play around, experiment, have fun - figure out what works best for you.

"Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein

1,161 Posts

Photowebmax Reply #6, 15 years, 8 months ago

Good post there Goonz.

The beauty of this system has been highlighted many times: there are many, many ways of doing the same thing.

One of the main concerns will be who will be controlling this site? Sites I build for myself are constructed differently than sites I hand over to clients. This might not be a concern when you are doing your first MODx site: you just want to get that initial success. If you are building sites for other people then all kinds of extra considerations come into play though. There are different choice considerations when it comes to choosing to use multiple templates versus using one template with "fork in the road" options with well documented TVs. This requires thinking out of the box and catering to the skill sets that your end users or clients might have. I have learned this over time. There is always some level of instruction that takes place when you hand over a site to another person. What is obvious to you can be very vague to others. TVs are a great way of building this "forks in the road" system. You as the designer/developer can really help a ton by creating good notes and comments when listing the TVs.

That being said, using different templates within the same site is a powerful option as well.

Did we mention that this system is flexible?

Cheers,

Max

10 Posts

Terradon Reply #7, 15 years, 8 months ago

wow, entiousiastic replies wink

, but i am already convinced about MODx.
I was developing my own CMS to create faster new websites, but that is a long struggle.

templates:
I usually have 1 template for 1 website, with a maincontent div. Si in case of redesign i just have to edit 1 template. (i am lazy)

Initially understanding how your template, Template Variables and Chunks all work together can be a head scratcher.

I see.....it not right now.
So for now and to keep the content easyli editable for an enduser, i just don’t use the 2column div. An enduser can use a table to get almost the same result.

I bookmarked this topic for studying MODx:)

P.S.
This MODx exercition is for my own site, to get familair with it, afterwards i want to use it for clients. So my approach will be to re-build my website as it was for a client with no knowledge of webdevelopement.

Thanks all for your help, i really appreciated it