How to: include HTML markup, including DIV tags, in template ?

98 Posts

dennisleahy Reply #1, 10 years, 1 month ago

(Very basic question - hopefully!)

I'm building a site that has 3 "columns", created using DIV tags. Using CKEditor in MODX and linked to the CSS file, the site owner can create content, placed properly in those DIVs, and can see the column content formatted when entering content.

I want to get the code inserted into the template. How is this done?

In other words, [[content]] does not start out as blank, but rather has all the following markup:

<div id="centeredcontainer">
<div id="container">
<div id="sidebar1">
<h3>Sidebar1 Content</h3>

<p>This is the left sidebar (column 1.)</p>

<p> Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien.</p>
</div>

<div id="sidebar2">
<h3>Sidebar2 Content</h3>

<p>This is the right sidebar (column 3.)</p>

<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien.</p>

</div>

<div id="mainContent">
<h1>This is the Main Content (column 2) Title</h1>

<p>This is the Main Content area. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.</p>

<p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero.</p>

<h2>H2 level heading</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero.</p>
</div>
<br class="clearfloat" />
</div>
</div>

===========================

So, how is this done?

Thanks!

Dennis

This question has been answered by sottwell. See the first response.

98 Posts

dennisleahy Reply #2, 10 years, 1 month ago

It looks like maybe it can be done with Template Variables, but I'm confused about whether I will even be using the MODX [[content]] directive at all.

Could it be that a template is made up of strictly template variables, not using [[*content]]

So, instead of this:
============================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
[[$head]]
<body>
<div id="fullheader">[[$headerimages]][[$topnavmenu]]</div>
[[*content]]
[[$footer]]
</body>
</html>
============================

I would define 6 TVs, for titles on the 3 columns, and for content within the 3 columns. If this is correct, do the markup tags belong inside the TVs, or in the template? (best practice - I suspect either will work.)

Inside the template, like this:
<h1>[[*MainContentTitleTV]]</h1>
and the default value in the TV as: Main Content Title

or inside the TV, like this:
<h1>Main Content Title</h1>

Thanks!

Dennis

discuss.answer

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 10 years, 1 month ago

I always have the basic HTML structure in the template, and use the "content" for the center or main content area, and chunks or TVs for the left, right, and any other distinctive content areas. I always try to avoid using the content field for HTML structure.

For example, in one case I have a sidebar on the right, and just above the footer there is a section of four blocks on the home page - a very common layout. But I don't want these blocks on the other pages. So I have this in my template:

	<section id="main">
	    <h3>[[*longtitle]]</h3>
	    [[*content]]
	</section> <!-- /main -->
	<section id="right-sidebar">
	    [[$right-sidebar]]
	</section> <!-- /right-sidebar -->
    [[[[*id:is=`1`:then=`$home-blocks`:else=``]]]]

The right-sidebar is a chunk that can be populated from a MIGx TV, allowing multiple blocks in the sidebar in whatever order I want. Or I don't bother with the chunk, and just use the MIGx output snippet to display the sidebar blocks.

The home-blocks chunk is only displayed if it's the home page. You can use the same kind of output modifiers to control the left and right sidebar if you need to. Mixing and matching chunks, TVs and output modifiers makes it very easy to manage the blocks of content in a template.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

98 Posts

dennisleahy Reply #4, 10 years, 1 month ago

Thanks, Susan!

-Dennis

98 Posts

dennisleahy Reply #5, 10 years ago

Finally getting back to this project...

I am missing something. I need to create a template, but where the content goes, I want to insert sample content (3 columns, different background colors) that the admin will overwrite, rather than a blank content area. If I create a template like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
[[$head]]
<body>
<div id="fullheader">[[$headerimages]][[$topnavmenu]]</div>
[[*content]]
[[$footer]]
</body>
</html>
then the entire content section is blank, empty. Worse, I see no way to change that template structure to show sample content PLUS have the HTML for the first and third column DIVs hidden from the site admin. (Hidden is good - that means they won't mess up the page's HTML when inserting content.)

Can this be done? (showing sample content - that is overwritten by the site admin - to create page content)

(I will create another post to show what I am trying to do, in code.)

Dennis

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 10 years ago

Do you want these left and right columns on all pages? I had thought you only wanted the three columns on the home page.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

98 Posts

dennisleahy Reply #7, 10 years ago

Yes, the site admin/owner wants that for their site theme.

edit: There will be a few pages that don't use a 3-column template, because the entire content area will need to be a single space, such as when a event calendar is displayed, or a gallery. However, most pages will use the 3-column template.

If all else fails, I'll make the template with all the sample content, and they can modify the page, and save, to create new pages. The bad part is, they will then have access to the DIVs and will be able to mess up pages.

Dennis [ed. note: dennisleahy last edited this post 10 years ago.]

98 Posts

dennisleahy Reply #8, 10 years ago

In the code below, you'll see 7 code "sections" visually divided with lines. The first and last sections (1 and 7) would be part of the template. Sections 3 and 5 could be 'hard-coded' into the template. But how to get sections 2 and 4 (the sidebars) and 6 (main content) into a MODX template so they will show up as sample content and yet the "section" would also be waiting for dynamic content like [[*content]] is designed to do?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
[[$head]]
<body>
<div id="fullheader">[[$headerimages]][[$topnavmenu]]</div><!--end of #fullheader -->


<!-- ==1====================================== -->
<div id="centeredcontainer">
	<div id="container" >		
		<div id="sidebar1">
<!-- ==2====================================== -->
			<h3>sidebar1 Content</h3>
			<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>
			<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
<!-- ==3====================================== -->			
		</div> <!-- end #sidebar1 -->
		<div id="sidebar2">
<!-- ==4====================================== -->
			<h3>sidebar2 Content</h3>			
			<p>The background color on this div will only show for the length of the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
			<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p><p>a tidbit</p>
<!-- ==5====================================== -->			
		</div><!-- end #sidebar2 -->
		<div id="mainContent">
<!-- ==6====================================== -->
			<h1> Main Content </h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p>			
			<h2>H2 level heading </h2>
			<p>Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p>			
<!-- ==7====================================== -->		
		</div><!-- end #mainContent -->				
		<br class="clearfloat" />
	</div><!-- end #container -->	
</div><!--end of centeredcontainer-->
<!-- ======================================== -->	

[[$footer]]
</body>
</html>

5,888 Posts

Bruno17 Reply #9, 10 years ago

You can do it this way:

create four TVs in different categories (sidebar1 and sidebar2):

in category sidebar1:
sidebar1_title - text
sidebar1_content - richtext

in category sidebar2:
sidebar2_title - text
sidebar2_content - richtext

and change your template to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
[[$head]]
<body>
<div id="fullheader">[[$headerimages]][[$topnavmenu]]</div><!--end of #fullheader -->
 
 
<!-- ==1====================================== -->
<div id="centeredcontainer">
    <div id="container" >    
        <div id="sidebar1">
<!-- ==2====================================== -->
            <h3>[[*sidebar1_title]]</h3>
            [[*sidebar1_content]]
<!-- ==3====================================== -->           
        </div> <!-- end #sidebar1 -->
        <div id="sidebar2">
<!-- ==4====================================== -->
            <h3>[[*sidebar2_title]]</h3>
            [[*sidebar2_content]]
<!-- ==5====================================== -->           
        </div><!-- end #sidebar2 -->
        <div id="mainContent">
<!-- ==6====================================== -->
            <h1> [[*pagetitle]] </h1>
            [[*content]]       
<!-- ==7====================================== -->       
        </div><!-- end #mainContent -->            
        <br class="clearfloat" />
    </div><!-- end #container -->  
</div><!--end of centeredcontainer-->
<!-- ======================================== -->
 
[[$footer]]
</body>
</html>

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

98 Posts

dennisleahy Reply #10, 10 years ago

Thanks, Bruno17. I appreciate the help. What's missing (for me) with that method is that the [[*content]] holds no sample data, and the page doesn't look anything like the final rendered page until it is saved and viewed. I realize (now) that this is just how MODX works, but was trying workarounds.

Evidently, every MODX template must use [[*content]]. I tried creating a template that had no *content section, but instead used a new TV called [[*contentAsTV]], so I could insert the sample content (as the default.) Doing that, I was able to put in sample content, but it would be confusing to the site admin/content creators to be forced to ignore the content textarea and do all the content entry on the Template Variables tab/page.

For this site, I may end up giving up trying to find a workaround using the normal means, and instead, provide them with a page that they clone and edit into new pages. Or, I might show them that method and the standard way MODX works and ask them what they prefer.

Dennis

Answered How to: include HTML markup, including DIV tags, in template ?