What's the correct way to display those blocks ?

Hi,

I’m beginning with modX and I’m trying to use a template to create my homepage. On that homepage, I’d like to fill several "blocks" of content, as shown on the included screenshot: the first one will be used to display a "about/teaser" text + image. The 3 others will contain a short description of other sections with a link to them.

My question is, who should I design this ? Should I create several TVs attached to the main template, one for the teaser text, one for the teaser image, one for the first section text, one for the first section image, ... ? Should I insert Ditto calls in my home template, one to a first document to display in the teaser, one to display 3 documents as the sections ? Should I insert the content directly in the template ? Or something else ?

Thanks.

This is a good start:
http://net.tutsplus.com/tutorials/other/working-with-a-content-management-framework-modx/

Although it uses MODx ver.0.9.6, it’s still applicable.

Thanks but I already have this in in my bookmarks and I don’t see where it answers my concern ?
My blocks will be almost static but I want to allow the maintainer to easily modify them if needed. These are not articles or full "documents", but quite simple text/image blocks that will only be attached to the home page, yet they use a custom css formating so I can’t just put a few RichText TVs as the output won’t use the correct "class" for formating ?

You can use textarea TV and do not use RichText.

Quote from: GoustiFruit at Jan 31, 2010, 10:40 AM

Thanks but I already have this in in my bookmarks and I don’t see where it answers my concern ?
My blocks will be almost static but I want to allow the maintainer to easily modify them if needed. These are not articles or full "documents", but quite simple text/image blocks that will only be attached to the home page, yet they use a custom css formating so I can’t just put a few RichText TVs as the output won’t use the correct "class" for formating ?

Then you didn’t read the tutorial well.
Too bad there is no internal perma link, but you can search ’Ditto: Repurposing Content’.
Your website concept is very similar to that tutorial’s template, at least from my point of view.

In MODx, you can achieve what you’re looking for by several ways:
1. Use Ditto, pull out the content to the front page.
With Ditto, you can fix the retrieved document by using &documents=`docid` paramater.
No changing whatsoever.
You can set the content+image position with Ditto’s templating system.
With 3 Blocks, let say you have 3 child pages.
If your maintaner want to change the content, he/she doesn’t to worry to break all your snippets code, since it should be hidden inside the template.

2. Use Template Variable, use many of them.
Don’t like the broken CSS? Again, hide them inside the Template, not the content.

Yes I did read it well, and I mentioned the Ditto calls in my question so you should simply have told me: "use Ditto" ;-)

2. For now I did it with TVs but as you said, in order to keep it clean and well integrated with the CSS, I need to create lots of TVs, one for a paragraph, one for a picture, on for a sub-title...

1. That’s why I was thinking of using Ditto, as I understand that I can format the output using chunks as templates... but there are several problems (at least in my mind): how to manage the children documents ? As you see, I have two types of them, one for the "teaser/about box", one for the 3 sections boxes. If I put them on the same level, I’ll have problems indicating to Ditto which ones to retrieve in one case, and which ones on the other (if the teaser has ID 8, and the 3 sections have IDs 7, 9, 10, under the same parent for example... or should I create two sub-containers under the parent ?). Also, as I need additional fields for these documents (Image is one), I need to add TVs to the template: should I add them to the parent document template, or should I create a separate template for children ? And as the chidren documents only need to be inserted into the parent, should I have a "full" template for the children, or is it possible to put the list of used TVs in a "empty" html file ? Huh... I think I’m lost now !

Ditto style:
Let’s say my doc structure like this:
[tt]
- Homepage (1) -> template= homepage
|- Section 1 (7) -> template= myNewBlankTpl + imgTV
|- Teaser (8 ) -> template= myNewBlankTpl + imgTV
|- Section 2 (9) -> template= myNewBlankTpl + imgTV
|- Section 3 (10)-> template= myNewBlankTpl + imgTV
- About
- Services
- Products
- Contacts
[/tt]

Notice that I’m using blank template to the children pages because we actually don’t provide a link to their pages, so their page designs are not required, but we need their imgTV values.

<div class="introduction">
[+content+]
</div>
<div class="introimg">
[+imgTV+]
</div>

Notice that I’m using &extender=`summary` parameter, not because I want to use it, but because I want to disable the truncation (&trunc=`0`).
Ditto will trunc summary/content values after 30 chars as the default. You might change its value though, through &truncOffset=`number`, but let’s just turn it off so the Introduction content won’t be cut incidentally.

<div class="imgBar">
[+imgTV+]
</div>

As the imgBar class I’d try to use float:left;

Well,
further process is yours.

Try to experiment when your structure is like this:
[tt]
- Homepage (1) -> template= homepage
|- Sections (7) -> template= myNewBlankTpl + imgTV1 + imgTV2 + imgTV3
|- Teaser (8 ) -> template= myNewBlankTpl + imgTV
- About
- Services
- Products
- Contacts
[/tt]

Non-Ditto style:
[tt]
- Homepage (1) -> template= homepage + introTextTV + introImgTV + imgTV1 + imgTV2 + imgTV3
- About
- Services
- Products
- Contacts
[/tt]
Free to choose which way suits you.

You know what ? This looks EXACTLY like the solution I was looking for !!!

A big THANK YOU for taking the time to answer and to do it so well ! Really.

And on a technical note: I didn’t know about the blank template thing, now it makes everything clear.

I’m sorry but I still have a problem (I’m using your first suggestion, Ditto style): how do you associate the imgTV to the document, if it has no template (blank) ?
I’m editing the document called "Teaser", how to get the additional field - that imgTV should provide - to show on this page ?

I think goldsky means create a new template with no content (blank template) for this and name it for example ’myBlankTemplate’.
you cannot assign TVs to the so called blank-Template.