Coding repeating content divs...

[PhotoWebMax]

This is probably one of those oft asked newbie questions, sorry...

I have a page I want to output that has a vertical column of similar content class divs. More presentation that anything else.

I copied the content markup from a text editor file and posted it into the Body field. I used the html button in the built in editor to paste in the raw code. When I saved and viewed the page I noticed that some of the container class div code gets removed? Without those divs the CSS is not happening. 

I suspect a better way would be to create a template for this page (called Services) and then use the repeater system to present child page blocks using placeholders within my div class structure?

I want this for the Services page:

<h2>Services></h2>

<! -- the following services blocks get repeated depending on the number of services listed -- >

<div class="services_block">
<h4>some headline</h4>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<ul class="services_list">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<p>choice to include extra paragraph here</p>
	</div><! -- services_block ends -->

<div class="services_block">
<h4>some headline</h4>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<ul class="services_list">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<p>choice to include extra paragraph here</p>
	</div><! -- services_block ends -->

<div class="services_block">
<h4>some headline</h4>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<ul class="services_list">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<p>choice to include extra paragraph here</p>
	</div><! -- services_block ends --> 

One thing that might vary is the number of paragraphs in each services block and the option to add an extra paragraph below the unordered list (or not). The number of list items might change form block to block as well. 

So, questions:

1) Is there a setting in the Admin body html editor that allows for added markup? If there is I could just add the entire block of markup to this page. Might be the easy route. 

2) Create a system that is more PW dynamic: how would I code this for a template that would present all the services_blocks that I would add to the Services page? I only need the link for the master services page to show in any site navigation. I do not want nav web links for each services_blocks. In MODx I would getResources...

Thanks!

[kongondo]

I think TinyMCE eats <div>; IIRC...not sure; I rarely use it...but maybe that can be overridden.....But, whether it does this or not, please, please, do not add/edit your markup structure inside rich text editors. You will get grief all day long . Things like divs ideally belong to your template files....and if you must, in a normal text area field....Having said that....

1) - Have a look at the module called Hanna

2)  - Only read your post quickly but there are various approaches. Those blocks could be pages, for instance...Alternatively, a simply foreach loop can be used to output the services markup of all listed services....+ Google the PW forums with keyword 'blocks'

In PW getResources (and many other equivalent MODx snippets) are inbuilt - in this case $page, $pages...powerful and more efficient...

Edited April 24, 2014 by kongondo

[PhotoWebMax]

Thanks,

I am sort of getting used to when to use a PHP template and the INC system. Getting closer to something that looks like it makes sense. As far as my above quest goes I going with the foreach loop option. Its a bit of trial and error: seeing what shows up in the output. But it is slowly starting to make sense... 

[PhotoWebMax]

OK, I think I made major progress!

I completely redid how I have my includes organized. Doing so made my templating system more simple and dynamic. Kind of getting "the picture" of this now. 

I then created a template system for my Services page: it now aggregates all the child blocks on the page just fine. I used the following:

<?foreach ($page->children as $c):?>
<div class="servicesBlock">
	<h4><?=$c->title;?></h4>
	<img src="<?=$c->image->url;?>" alt="<?=$c->image->dscription;?>">
	<?=$c->body;?>
	</div><! --servicesBlock ends -->
	<? endforeach; ?> 

I am using template fields to output the headline and the anchor image. I then use the PW body field to add the paragraphs and <ul> content. The div class is in the template and out of the TinyMCE editor which is great. I can now target the div class with CSS. 

One quick thing: is there any preference that prevents the HTML pane window in the TinyMCE plugin from presenting the code as one long run on sentence? Its hard to read this way. Be nice to work with each headline and paragraph on its own line...

Anyway: some solid learning for my poor brain today!