Optional content

3 Posts

holmberg Reply #1, 13 years, 10 months ago

I´m in the process of templating a 2 column website and i would like to make it possible for the user of the site to add optional content to the columns, for example a "Infobox" div in the right column:

<div class="infobox">
<h3>Headline</h3>
<p>Content</p>
</div>

The headline and the content should be editable for the user, but not the rest of the div.

Is the possible to do so it is easy for the end user, eg. like drag and drop, and also easy to move up and down in relation to other content?

265 Posts

thapriest86 Reply #2, 13 years, 10 months ago

Well, thats where snippets and or chunks come in play.

Place a call to a snippet or chunk between your div, and make the snippet so that there can be written to or make it write to the database.

http://rtfm.modx.com/display/revolution20/Snippets

165 Posts

pdincubus Reply #3, 13 years, 10 months ago

Quote from: holmberg at Dec 06, 2012, 05:44 AM

<div class="infobox">
<h3>Headline</h3>
<p>Content</p>
</div>

So that is part of your template and is the right hand column? So this will be additional content on top of the default [[*pagetitle]] and [[*content]]?
All you need to do is set up a couple of template variables, one a "text" input, and the other a "rich text area". See documentation here: http://rtfm.modx.com/display/revolution20/Template+Variables

So if you create a text input called SidebarTitle and a rich text area called SidebarContent and allowed them access to your template, you can call them in the template like this:

<div class="infobox">
  <h3>[[*SidebarTitle]]</h3>
  <p>[[*SidebarContent]]</p>  
</div>

Hope this helps!

edit: spelling.

21 Posts

optiki Reply #4, 13 years, 10 months ago

I am using this very simple approach to let the user turn on/of parts of the page. Don´t know if its the proper way, but I thought i would share the idea:

- Create a Create a TV Listbox (Single Select) [[*sidebar-option]]
- In Input options value i put the names of 2 chunks separated by || so it loks like: [[$infobox]]||[[$Blank]]
- Make sure empty TV is allowed and i give it a Category Name that makes sense to the user
- Create the 2 chunks, in your case the [[$infobox]] would be:

<div class="infobox">
<h3>Headline</h3>
<p>Content</p> 
</div>

Create an empty chunk: [[$blank]]

This makes it possible for the user to simple select different kinds of content for the sidebar .. or just leave it blank.

Normally i use this approach to limit the amount of templates. I like creating websites with just one template.
Let´s say you have a design where the top part and the footer always stays the same, but you want the content area in the middle to change. Some pages have real content, others are just index pages.

I think you also could create a TV Listbox (Multi Select) so you can pack your sidebar with multiple chunks.

Hope this a little help.

[ed. note: optiki last edited this post 13 years, 10 months ago.]

To every Problem there is ModX Solutions

3 Posts

holmberg Reply #5, 13 years, 10 months ago

Quote from: pdincubus at Dec 06, 2012, 08:20 AM

Quote from: holmberg at Dec 06, 2012, 05:44 AM

<div class="infobox">
<h3>Headline</h3>
<p>Content</p>
</div>

So that is part of your template and is the right hand column? So this will be additional content on top of the default [[*pagetitle]] and [[*content]]?
All you need to do is set up a couple of template variables, one a "text" input, and the other a "rich text area". See documentation here: http://rtfm.modx.com/display/revolution20/Template+Variables

So if you create a text input called SidebarTitle and a rich text area called SidebarContent and allowed them access to your template, you can call them in the template like this:
<div class="infobox">
  <h3>[[*SidebarTitle]]</h3>
  <p>[[*SidebarContent]]</p>  
</div>
Hope this helps!

edit: spelling.

No ,the div is not a hardcoded part of the template (if i understand your question correctly)

But by following your advice i have made it work

many thanks!

I made a chunk called "InfoBox":

<div class="blue">
<h3>[[*SidebarTitle]]</h3>
[[*SidebarContent]]
</div>

And made it call the two template variables you suggested.
i skipped the <p></p> surrounding the [[*SidebarContent]] since the Rich Text Area allready produced them.

There is a small problem now, that the new div gets surrounded by p-tags since its in the right column of the website which gets its content from the TV called [[*Right]] which have RichText as input, resulting in this:

<p>
<div class="blue">
<h3>[[*SidebarTitle]]</h3>
[[*SidebarContent]]
</div>
</p>

I could thange the output of [[*Right]] to Text, but sometimes there will be need for writing in the right column directly, outside of the coloured boxes.

You can see the static site i'm trying to make into a modx template here: http://www.valentin-consult.dk/

☆ A M B ☆
1,780 Posts

Frogabog Reply #6, 13 years, 10 months ago

If the chunk that you made will be defaulted to most pages, you can just put the chunk into the template.

If you wanted to make the chunk selectable on a per page basis, make a radio option TV, use yes==Yes||no==No for the input option values, assign it to the template. Your user decides if the chunk shows on the page by choosing yes or no.

Then in the template itself, there are a couple of options.

You can use the If snippet like this:

[[If? &subject=`[[*optional_TV]]` &operator=`EQ` &operand=`yes` &then=`[[$right_chunk]]`]]

Or, don't use If and do a straight up yes/no:

[[*optional_TV:is=`yes`:then=`<p>[[$right_chunk]]</p>`]]

This also works, and I'm still unsure which is correct but I think this one is the not correct version. Anyone want to set me straight?

[[*optional_TV=`yes`:then=`<p>[[$right_chunk]]

The If snippet is also handy for situations when you want to completely omit something if there's no content. Then you can use If to look for "notempty" in the TV and display it only if it contains characters. (spaces count btw)

 [[If? &subject=`[[*richText_TV]]` &operator=`notempty` &then=`<p>[[$chunk_for_wrapping_tv_contents]]</p>`]]

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

3 Posts

holmberg Reply #7, 13 years, 10 months ago

Quote from: optiki at Dec 06, 2012, 04:58 PM

I am using this very simple approach to let the user turn on/of parts of the page. Don´t know if its the proper way, but I thought i would share the idea:

- Create a Create a TV Listbox (Single Select) [[*sidebar-option]]
- In Input options value i put the names of 2 chunks separated by || so it loks like: [[$infobox]]||[[$Blank]]
- Make sure empty TV is allowed and i give it a Category Name that makes sense to the user
- Create the 2 chunks, in your case the [[$infobox]] would be:
<div class="infobox">
<h3>Headline</h3>
<p>Content</p> 
</div>
Create an empty chunk: [[$blank]]

This makes it possible for the user to simple select different kinds of content for the sidebar .. or just leave it blank.

Normally i use this approach to limit the amount of templates. I like creating websites with just one template.
Let´s say you have a design where the top part and the footer always stays the same, but you want the content area in the middle to change. Some pages have real content, others are just index pages.

I think you also could create a TV Listbox (Multi Select) so you can pack your sidebar with multiple chunks.

Hope this a little help.

Worked like a charm, thanks for your advice

!

I made it so the filled chunk got its content from the 2 TVs previously created:

<div class="sand">
<h3>[[*SidebarTitle]]</h3>
[[*SidebarContent]] 
</div>

But i wonder, if we have several TV's or Chunks in our template or in our individual pages, how do we change the order in which they appear in the HTML for example:

[[*sidebar-option]]
[[*sidebar-image]]
[[*sidebar-option]]
[[*another-sidebar-option]]

I know i can do this easily in the template but what about the non-technical end-user of my site?

21 Posts

optiki Reply #8, 13 years, 10 months ago

Glad for at jeg kunne hjælpe / Glad to be of help

Currently I am also in the process of making the manager more user friendly for the non-technical user.
Like you, I want the user to change the order which they appear, but I haven´t figured that one out, yet.

Maybe if we think of the TV as empty boxes/slots it helps. Simply duplicate and rename the TV to something like:

[[*sidebar-slotA]]
[[*sidebar-slotB]]
[[*sidebar-slotC]]

In each slot the user can choose from different Chunks, and thereby adjusting the order.

My site is down right now during to moving it to a new host, so the playground is closed ;-(

Sometimes I also take use of the drag and drop feature in the manager, because that´s very non-technical.
Let says you create af folder called: Sidebar with id=5. Then i use getResources to:

[[!getResources? &parents=`5` &limit=`8` &tpl=`sidePost` &includeContent=`1` &includeTVs=`1` &processTVs=`1` &sortby=`menuindex`]]

Then the sidePost tpl chunk maybe would look like this:

<div class="sand">
<h3>[[+sidebar-pagetitle]]</h3>
[[+sidebar-introtext]]
[[+sidebar-image]]
</div>

This way the user simply can arrange the order of the items in the sidebar by drag and drop. It also gives the user the possibility of creating as many items as you want and using the published/unpublished feature.

But what if you want different content types in each box ? If you allow empty TV´s each item could be with or without text/image ?

Or maybe even simpler:

<div class="sand">
<h3>[[+longtitle]]</h3>
[[+introtext]]
[[+sidebar-image]]
</div>

Then we got rid of 2 TV´s for the user to fill in. No text. Just leave longtitle/introtext blank.

Next step for me, would be to set up the Gallery Add-on. I find that adding a images via the filebrowser is a little clumsy.
But with Gallery set up should be possible for the user to select images from Albums. Haven´t tried the last one yet. [ed. note: optiki last edited this post 13 years, 10 months ago.]

To every Problem there is ModX Solutions

228 Posts

christianhanvey Reply #9, 13 years, 10 months ago

But i wonder, if we have several TV's or Chunks in our template or in our individual pages, how do we change the order in which they appear in the HTML

Easiest way I have found is to use MIGX for this case.