$30 off During Our Annual Pro Sale. View Details »

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. View Slide

  2. Template Organization

    View Slide

  3. Credit: https://www.flickr.com/photos/rubbermaid/5630536467

    View Slide

  4. Credit: https://www.flickr.com/photos/jdtornow/5132907504

    View Slide

  5. Credit: http://www.bonkersworld.net/building-software

    View Slide

  6. View Slide

  7. View Slide

  8. Sample Site

    View Slide

  9. Photos

    Events

    Blog

    View Slide

  10. Home

    View Slide

  11. Home

    Events
    Blog Photos

    View Slide

  12. Event

    Blog Post

    Photo

    Home

    Events
    Blog Photos

    View Slide

  13. Event

    Blog Post

    Photo

    Events
    Blog Photos
    Home

    index.html

    View Slide

  14. Event

    Blog Post

    Photo

    Home

    index.html
    Events Photos
    Blog
    blog.html

    View Slide

  15. Home

    index.html
    Event

    Blog Post

    Photo

    Photos
    Blog
    blog.html
    Events
    events.html

    View Slide

  16. Event

    Blog Post

    Photo

    Home

    index.html
    Blog
    blog.html
    Events
    events.html
    Photos
    photos.html

    View Slide

  17. Home

    index.html
    Blog
    blog.html
    Events
    events.html
    Photos
    photos.html
    Event

    Photo

    Blog Post

    blog-
    post.html

    View Slide

  18. Home

    index.html
    Blog
    blog.html
    Events
    events.html
    Photos
    photos.html
    Photo

    Blog Post

    blog-
    post.html
    Event

    event-
    detail.html

    View Slide

  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

    View Slide

  20. templates
    index.html
    blog.html
    blog-post.html
    events.html
    event-detail.html
    photos.html
    photo-detail.html

    View Slide

  21. templates
    ...
    blog.html
    blog-post.html
    ...
    !
    !

    View Slide

  22. templates
    ...
    blog
    blog.html
    blog-post.html
    ...
    !

    View Slide

  23. templates
    ...
    blog
    index.html
    blog-post.html
    ...
    !

    View Slide

  24. templates
    ...
    blog
    index.html
    post.html
    ...
    !

    View Slide

  25. templates
    index.html
    blog
    index.html
    post.html
    event
    index.html
    detail.html
    photo
    index.html
    detail.html

    View Slide

  26. templates
    index.html
    blog
    event
    photo

    View Slide

  27. templates
    !
    index.html
    blog
    event
    photo
    layout.html

    View Slide

  28. {% extends "layout" %}
    !
    !
    {% block content %}
    ...
    {% endblock %}

    View Slide

  29. templates
    layout.html
    index.html
    blog
    index.html
    post.html
    event
    index.html
    detail.html
    photo
    index.html
    detail.html

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. Home

    Events
    Blog Photos

    View Slide

  37. !
    !
    !
    {% for entry in craft.entries.section(['blog','event','photo']) %}

    {{ entry.title }}

    {% endfor %}
    index.html
    {% extends "layout" %}
    !
    {% block content %}
    {% endblock %}

    View Slide

  38. !
    !
    !
    {% for entry in craft.entries.section('blog') %}

    {{ entry.title }}

    {% endfor %}
    blog.html
    {% extends "layout" %}
    !
    {% block content %}
    {% endblock %}

    View Slide

  39. View Slide

  40. templates
    layout.html
    index.html
    !
    blog
    event
    photo
    teaser.html

    View Slide


  41. {{ entry.title }}

    teaser.html

    View Slide

  42. {% extends "layout" %}
    !
    {% block content %}
    {% for entry in craft.entries.section(['blog','event','photo']) %}
    !
    {% endfor %}
    {% endblock %}
    {% include 'teaser' %}
    index.html

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. {% extends "layout" %}
    !
    {% block content %}
    {% for entry in craft.entries.section(['blog','event','photo']) %}
    !
    {% endfor %}
    {% endblock %}
    {% include 'teaser-'~entry.section.handle %}
    index.html

    View Slide

  47. templates
    layout.html
    index.html
    teaser.html
    !
    !
    !
    blog
    event
    photo
    teaser-blog.html
    teaser-event.html
    teaser-photo.html

    View Slide


  48. {{ entry.title }}
    {{ entry.postDate.format("F jS, Y") }}

    teaser-blog.html

    {{ entry.title }}
    {{ entry.startTime.format("F jS, Y") }}
    {{ entry.location }}

    teaser-event.html

    View Slide

  49. {% extends "layout" %}
    !
    {% block content %}
    {% for entry in craft.entries.section(['blog','event','photo']) %}
    !
    {% endfor %}
    {% endblock %}
    {% include 'teaser-'~entry.section.handle %}
    index.html

    View Slide

  50. templates
    layout.html
    index.html
    teaser.html
    teaser-blog.html
    teaser-event.html
    teaser-photo.html
    blog
    event
    photo

    View Slide

  51. {% extends "layout" %}
    !
    {% block content %}
    {% for entry in craft.entries.section(['blog','event','photo']) %}
    !
    {% endfor %}
    {% endblock %}
    {% include 'teaser-'~entry.section.handle %}
    index.html

    View Slide

  52. templates
    layout.html
    index.html
    teaser.html
    teaser-blog.html
    teaser-event.html
    teaser-photo.html
    blog
    event
    photo

    View Slide

  53. View Slide

  54. View Slide

  55. {% extends "layout" %}
    !
    {% block content %}
    {% for entry in craft.entries.section(['blog','event','photo']) %}
    !
    {% endfor %}
    {% endblock %}
    {% include ['teaser-'~entry.section.handle, 'teaser'] %}
    index.html

    View Slide

  56. templates
    layout.html
    index.html
    teaser.html
    teaser-blog.html
    teaser-event.html
    teaser-photo.html
    blog
    event
    photo

    View Slide

  57. templates
    !
    ...
    teaser.html
    teaser-blog.html
    teaser-event.html
    teaser-photo.html
    ...

    View Slide

  58. templates
    !
    ...
    teaser
    teaser.html
    teaser-blog.html
    teaser-event.html
    teaser-photo.html
    ...

    View Slide

  59. templates
    !
    ...
    teaser
    teaser.html
    blog.html
    event.html
    photo.html
    ...

    View Slide

  60. templates
    !
    ...
    teaser
    default.html
    blog.html
    event.html
    photo.html
    ...

    View Slide

  61. templates
    !
    ...
    teaser.html
    teaser
    default.html
    blog.html
    event.html
    photo.html
    ...

    View Slide

  62. {% extends "layout" %}
    !
    {% block content %}
    {% for entry in craft.entries.section(['blog','event','photo']) %}
    !
    {% endfor %}
    {% endblock %}
    {% include 'teaser' %}
    index.html

    View Slide

  63. {% include ['teaser/'~entry.section.handle, 'teaser/default'] %}
    teaser.html

    View Slide


  64. {{ entry.title }}

    teaser/default.html

    View Slide


  65. {{ entry.title }}
    !
    !

    {% block teaserContent %}
    {% endblock %}
    teaser/default.html

    View Slide

  66. {% extends "teaser/default" %}
    !
    {% block teaserContent %}
    {{ entry.postDate.format("F jS, Y") }}
    {% endblock %}
    {% extends "teaser/default" %}
    !
    {% block teaserContent %}
    {{ entry.startTime.format("F jS, Y") }}
    {{ entry.location }}
    {% endblock %}
    teaser/blog.html
    teaser/event.html

    View Slide

  67. templates
    layout.html
    index.html
    teaser.html
    teaser
    blog
    event
    photo

    View Slide

  68. templates
    layout.html
    index.html
    teaser.html
    teaser
    entry.html
    entry
    landing.html
    landing

    View Slide

  69. templates
    layout.html
    index.html
    teaser.html
    teaser
    !
    !
    landing.html
    landing
    entry.html
    entry

    View Slide

  70. View Slide

  71. View Slide

  72. View Slide

  73. {% include ['entry/'~entry.section.handle, 'entry/default'] %}
    entry.html

    View Slide

  74. templates
    layout.html
    index.html
    teaser.html
    teaser
    entry.html
    entry
    ! landing.html
    landing

    View Slide

  75. View Slide

  76. View Slide

  77. {% include ['landing/'~entry.channel, 'landing/default'] %}
    landing.html

    View Slide

  78. {% extends "layout" %}
    !
    {% block content %}
    {% for entry in craft.entries.section(entry.channel) %}
    {% include 'teaser' %}
    {% endfor %}
    {% endblock %}
    landing/default.html

    View Slide

  79. templates
    layout.html
    index.html
    teaser.html
    teaser
    entry.html
    entry
    landing.html
    landing
    !

    View Slide

  80. templates
    layout.html
    index.html
    teaser.html
    teaser
    entry.html
    entry
    landing.html
    landing
    ! matrix.html
    matrix

    View Slide

  81. {% include 'matrix' with {'matrix': entry.body} %}
    entry/default.html

    View Slide

  82. {% for block in matrix %}
    {% include ['matrix/' ~ block.type ~ '-' ~ entry.section.handle,
    'matrix/' ~ block.type] %}
    {% endfor %}
    matrix.html

    View Slide

  83. matrix.html
    matrix
    blockquote.html
    blockquote-event.html
    gallery.html
    image.html
    image-blog.html
    text.html

    View Slide

  84. {% include 'matrix' with {'matrix': entry.body} %}
    entry/default.html

    View Slide

  85. View Slide

  86. templates
    layout.html
    index.html
    teaser.html
    teaser
    entry.html
    entry
    landing.html
    landing
    matrix.html
    matrix

    View Slide

  87. {% include 'teaser' %}

    View Slide

  88. {% include 'matrix' with {'matrix': entry.body} %}

    View Slide

  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] %}

    View Slide

  90. @acolangelo

    View Slide