Crazy ContainedRethinking Templates and
Containers in dotCMS 3.0
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Who am I?• Jason Smith
• 15 Years w/ dotCMS
• @fishsmith
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Overview• What are Multi-content Containers
• How do they work
• What are the benefits
• What are some of the challenges
• Examples & recommendations
• What could this mean for the future
• Questions and Answers
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
What Are Multi-content Containers
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Product
News
Location
Event
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Video
Event
Event
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Product
Location
Event
Event
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
How Does It Work
• Reusing Content
• Adding New Content
• Create a Multi-content Container
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Reusing Content
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Add New Content
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Create a Multi-content Container
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
What Are The Benefits
• Fewer Containers
• Fewer Templates
• Increased Flexibility
• More Control for Designers
• Happier Users
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
What Are The Challenges
• Using the same code in multiple containers
• Managing styles and classes
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Examples & Recommendations
• Create VTL files for each content type.
• Create Containers that make sense
• xs-container, sm-container, md-container
• left-column, center-column, right-column
• Organize your Less or Sass to mirror you
content types
Ideas
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
VTL for each Content
Type
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Taking it a Step Further
1
1
2
1
Pre Loop:
Code:
Post Loop:
#set($container = “medium-column”)
<div class=“medium-container”>
#dotParse(‘/application/vtl/containers/news.vtl’)
<div>
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
1
2
3
4
5
6
7
8
9
10
11
12
news.vtl
#if($container == “medium-column”)
<div class=“news”>
<div class=“news-headline”>
<a href=“/news/$urlTitle”>$title</a>
</div>
<div class=“news-lead">
$!{lead}
</div>
</div>
#elseif($container == “large-column”)
<div class=“news”>
<img src=“/contentAsset/image/${ContentInode}…
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
VTL for each Content
Type
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
VTL for each Content
Type
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Question & Answer
Top Related