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

• jason@dotcms.com

• @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