Back

Flexible 2/3 column Template

Description

This is a process which allows a template to be 2 OR 3 columns (live) based on what is in the 3rd column. That is, if the 3rd column is empty, it will resize the 2nd column to take up all the available space. (and is adjustable)

Note that in the backend, it will always display 3 columns (or else you might find it difficult to add 3rd column data).

The idea behind this is you can simply give your users 1 template and how it displays is based on how they use it. If you later decide you want a 3rd column, you don't have to change all the pages.

Code

## First Step:  Make a 3rd Column Container
## In the pre-loop sequence put something like this:
<!-- Inserted Third Column   $CONTAINER_NUM_CONTENTLETS -->

#if($CONTAINER_NUM_CONTENTLETS > 0 && !$EDIT_MODE)
<div class="col col-right">
#end  

In the post-loop, put this:
#if($CONTAINER_NUM_CONTENTLETS > 0 && !$EDIT_MODE)
</div>
#set ($leftcol="col col-left")
#end
<!-- END Inserted Third Column -->


Now, in your template, you need some code as well.
I very specifically created the Edit-Mode state (requiring a duplication of code) versus the Live-Mode - this had to be done because the Edit-Mode site appearance is very difficult to control (because of all the Java/CMS information).  You could get away with less code, but it might change the order of how the editable fields show up in the backend.
You need some styles set up, here I am using 'col col-left' and 'col col-leftfull' to differentiate how the styling with change based on the use of the column.
I also do not use ELSEs within Velocity - they are too easy to accidentally break/follow.


<CLIPPED ONLY TO SHOW post-header template>
<!-- Content -->  
<div id="content">

  ##IHM - Breadcrumbs
  #parseContainer('ba5233d7-9768-48b4-993d-30e5189a66b3')

  
  
##SPECIAL 3rd Column - if no information it is GONE
##STYLE Col-left is for 3 col, Col-leftfull for 2 col
##Edit Mode forces how it shows in backend, always 3 col!!!  
#if ($EDIT_MODE)
 <div class="col col-left">
   <h1>$pageTitle</h1>
          <div class="cl">&nbsp;</div>
  
             <div class="post">
             ## Container: Sisters Main Body
             #parseContainer('71805')
             </div>
</div>
  
  
<div class="col col-right">
#parseContainer('3b8b67fe-9ad2-416d-828c-d8d16f801b66')  
</div>
<div class="cl">&nbsp;</div>  
#end 
##END of IF EDITMODE 
  
##Edit here for all 'live' views of the page!!!!  
#if (!$EDIT_MODE)  
#set ($leftcol="col col-leftfull")
## Container: IHM - Right Optional
## This is autogenerated code that cannot be changed
#parseContainer('3b8b67fe-9ad2-416d-828c-d8d16f801b66')  


##PARSING THE CONTAINER ABOVE MAY CHANGE $leftcol!
##CHECK THE PRE-CODE in Container 'IHM Right Optional'  
<div class="$leftcol">
          <h1>$pageTitle</h1>
          <div class="cl">&nbsp;</div>
  
             <div class="post">
             ## Container: Sisters Main Body
             #parseContainer('71805')
             </div>
</div>
  
#end  
##END SPECIAL 2/3 COLUMN DISPLAY CODE 


</div>
##end of div id content

Topics

Have you created code you'd like to share with the dotCMS community?

Share your code Become a Contributor