Template Organization in Craft

Use the power of Craft and Twig to create a context-focused templating system that is as flexible, powerful, and manageable as you need.

Transcript

2. Template Organization
3. Credit: https://www.flickr.com/photos/rubbermaid/5630536467
4. Credit: https://www.flickr.com/photos/jdtornow/5132907504
5. Credit: http://www.bonkersworld.net/building-software
8. Sample Site
9. Photos Events Blog
10. Home ⌂
11. Home ⌂ Events Blog Photos
12. Event Blog Post Photo Home ⌂ Events Blog Photos
13. Event Blog Post Photo Events Blog Photos Home ⌂ index.html
14. Event Blog Post Photo Home ⌂ index.html Events Photos Blog blog.html
15. Home ⌂ index.html Event Blog Post Photo Photos Blog blog.html Events events.html
16. Event Blog Post Photo Home ⌂ index.html Blog blog.html Events events.html Photos photos.html
17. Home ⌂ index.html Blog blog.html Events events.html Photos photos.html Event Photo Blog Post blog- post.html
18. Home ⌂ index.html Blog blog.html Events events.html Photos photos.html Photo Blog Post blog- post.html Event event- detail.html
19. Home ⌂ index.html Blog blog.html Events events.html Photos photos.html Blog Post blog- post.html Event event- detail.html Photo photo- detail.html
20. templates index.html blog.html blog-post.html events.html event-detail.html photos.html photo-detail.html
21. templates ... blog.html blog-post.html ... ! !
22. templates ... blog blog.html blog-post.html ... !
23. templates ... blog index.html blog-post.html ... !
24. templates ... blog index.html post.html ... !
25. templates index.html blog index.html post.html event index.html detail.html photo index.html detail.html
26. templates index.html blog event photo
27. templates ! index.html blog event photo layout.html
28. {% extends "layout" %} ! ! {% block content %} ... {% endblock %}
29. templates layout.html index.html blog index.html post.html event index.html detail.html photo index.html detail.html
36. Home ⌂ Events Blog Photos
37. ! ! ! {% for entry in craft.entries.section(['blog','event','photo']) %} <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> </article> {% endfor %} index.html {% extends "layout" %} ! {% block content %} {% endblock %}
38. ! ! ! {% for entry in craft.entries.section('blog') %} <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> </article> {% endfor %} blog.html {% extends "layout" %} ! {% block content %} {% endblock %}
40. templates layout.html index.html ! blog event photo teaser.html
41. <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> </article> teaser.html
42. {% extends "layout" %} ! {% block content %} {% for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include 'teaser' %} index.html
46. {% extends "layout" %} ! {% block content %} {% for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include 'teaser-'~entry.section.handle %} index.html
47. templates layout.html index.html teaser.html ! ! ! blog event photo teaser-blog.html teaser-event.html teaser-photo.html
48. <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> <p class="meta"><time>{{ entry.postDate.format("F jS, Y") }}</time></p> </article> teaser-blog.html <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> <p class="meta"><time>{{ entry.startTime.format("F jS, Y") }}</time></p> <address>{{ entry.location }}</address> </article> teaser-event.html
49. {% extends "layout" %} ! {% block content %} {% for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include 'teaser-'~entry.section.handle %} index.html
50. templates layout.html index.html teaser.html teaser-blog.html teaser-event.html teaser-photo.html blog event photo
51. {% extends "layout" %} ! {% block content %} {% for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include 'teaser-'~entry.section.handle %} index.html
52. templates layout.html index.html teaser.html teaser-blog.html teaser-event.html teaser-photo.html blog event photo
55. {% extends "layout" %} ! {% block content %} {% for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include ['teaser-'~entry.section.handle, 'teaser'] %} index.html
56. templates layout.html index.html teaser.html teaser-blog.html teaser-event.html teaser-photo.html blog event photo
57. templates ! ... teaser.html teaser-blog.html teaser-event.html teaser-photo.html ...
58. templates ! ... teaser teaser.html teaser-blog.html teaser-event.html teaser-photo.html ...
59. templates ! ... teaser teaser.html blog.html event.html photo.html ...
60. templates ! ... teaser default.html blog.html event.html photo.html ...
61. templates ! ... teaser.html teaser default.html blog.html event.html photo.html ...
62. {% extends "layout" %} ! {% block content %} {% for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include 'teaser' %} index.html
63. {% include ['teaser/'~entry.section.handle, 'teaser/default'] %} teaser.html
64. <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> </article> teaser/default.html
65. <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> ! ! </article> {% block teaserContent %} {% endblock %} teaser/default.html
66. {% extends "teaser/default" %} ! {% block teaserContent %} <p class="meta"><time>{{ entry.postDate.format("F jS, Y") }}</time></p> {% endblock %} {% extends "teaser/default" %} ! {% block teaserContent %} <p class="meta"><time>{{ entry.startTime.format("F jS, Y") }}</time></p> <address>{{ entry.location }}</address> {% endblock %} teaser/blog.html teaser/event.html
67. templates layout.html index.html teaser.html teaser blog event photo
68. templates layout.html index.html teaser.html teaser entry.html entry landing.html landing
69. templates layout.html index.html teaser.html teaser ! ! landing.html landing entry.html entry
73. {% include ['entry/'~entry.section.handle, 'entry/default'] %} entry.html
74. templates layout.html index.html teaser.html teaser entry.html entry ! landing.html landing
77. {% include ['landing/'~entry.channel, 'landing/default'] %} landing.html
78. {% extends "layout" %} ! {% block content %} {% for entry in craft.entries.section(entry.channel) %} {% include 'teaser' %} {% endfor %} {% endblock %} landing/default.html
79. templates layout.html index.html teaser.html teaser entry.html entry landing.html landing !
80. templates layout.html index.html teaser.html teaser entry.html entry landing.html landing ! matrix.html matrix
81. {% include 'matrix' with {'matrix': entry.body} %} entry/default.html
82. {% for block in matrix %} {% include ['matrix/' ~ block.type ~ '-' ~ entry.section.handle, 'matrix/' ~ block.type] %} {% endfor %} matrix.html
83. matrix.html matrix blockquote.html blockquote-event.html gallery.html image.html image-blog.html text.html
84. {% include 'matrix' with {'matrix': entry.body} %} entry/default.html
86. templates layout.html index.html teaser.html teaser entry.html entry landing.html landing matrix.html matrix
87. {% include 'teaser' %}
88. {% include 'matrix' with {'matrix': entry.body} %}
89. {% include ['teaser/' ~ entry.section.handle, 'teaser/default'] %} ! {% include ['entry/' ~ entry.section.handle, 'entry/default'] %} ! {% include ['landing/' ~ entry.channel, 'landing/default'] %} ! {% include ['matrix/' ~ block.type ~ '-' ~ entry.section.handle, 'matrix/' ~ block.type] %}
90. @acolangelo