Download - Multi-content Containers in dotCMS 3.0
![Page 1: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/1.jpg)
![Page 2: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/2.jpg)
Crazy ContainedRethinking Templates and
Containers in dotCMS 3.0
![Page 3: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/3.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Who am I?• Jason Smith
• 15 Years w/ dotCMS
• @fishsmith
![Page 4: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/4.jpg)
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
![Page 5: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/5.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
What Are Multi-content Containers
![Page 6: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/6.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Product
News
Location
Event
![Page 7: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/7.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Video
Event
Event
![Page 8: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/8.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Product
Location
Event
Event
![Page 9: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/9.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
How Does It Work
• Reusing Content
• Adding New Content
• Create a Multi-content Container
![Page 10: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/10.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Reusing Content
![Page 11: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/11.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Add New Content
![Page 12: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/12.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Create a Multi-content Container
![Page 13: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/13.jpg)
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
![Page 14: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/14.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
What Are The Challenges
• Using the same code in multiple containers
• Managing styles and classes
![Page 15: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/15.jpg)
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
![Page 16: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/16.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
VTL for each Content
Type
![Page 17: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/17.jpg)
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>
![Page 18: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/18.jpg)
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}…
![Page 19: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/19.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
VTL for each Content
Type
![Page 20: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/20.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
VTL for each Content
Type
![Page 21: Multi-content Containers in dotCMS 3.0](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac22e81a28ab53298b45e7/html5/thumbnails/21.jpg)
Crazy Contained - Rethinking Templates & Containers in dotCMS 3.0
Question & Answer