Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Template Organization in Craft

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.

Anthony Colangelo

June 17, 2014
Tweet

More Decks by Anthony Colangelo

Other Decks in Technology

Transcript

  1. None
  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

  6. None
  7. None
  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
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  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 %}
  39. None
  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
  43. None
  44. None
  45. None
  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

  53. None
  54. None
  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
  70. None
  71. None
  72. None
  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

  75. None
  76. None
  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

  85. None
  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