multi-content containers in dotcms 3.0

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

• [email protected]

• @fishsmith

mailto:[email protected]


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


What Are Multi-content Containers


Product

News

Location

Event


Video

Event

Event


Product

Location

Event

Event


How Does It Work

• Reusing Content

• Adding New Content

• Create a Multi-content Container


Reusing Content


Add New Content


Create a Multi-content Container


What Are The Benefits

• Fewer Containers

• Fewer Templates

• Increased Flexibility

• More Control for Designers

• Happier Users


What Are The Challenges

• Using the same code in multiple containers

• Managing styles and classes


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


VTL for each Content

Type


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>


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}…


VTL for each Content

Type


Question & Answer

multi-content containers in dotcms 3.0

Software