Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Template Layout Overrides - a beginner's guide


Published on

Template overrides are now being very widely used in some of the better produced templates, but do you really understand how they work? Have you got a clue what the MVC concept is all about? We had to do a bit of research ourselves to be able to explain it to others in "non geek speak" - hopefully you'll find this presentation useful.

Please note that there was a lot of discussion relating to this presentation - why not come along to our Joomla! User Group meeting to find out what you're missing!

Published in: Technology
  • Be the first to comment

Template Layout Overrides - a beginner's guide

  1. 1. Template overrides and the “MVC” concept Ruth Cheesley Suffolk Computer Services [email_address]
  2. 2. WHAT IS MVC?
  3. 3. What is MVC? <ul><li>M ODEL </li></ul><ul><ul><li>Manages the behaviour and the data </li></ul></ul><ul><li>V IEW </li></ul><ul><ul><li>Manages the graphical and/or textual output </li></ul></ul><ul><ul><ul><li>Article, Category Blog, Section list </li></ul></ul></ul><ul><li>C ONTROLLER </li></ul><ul><ul><li>Interprets mouse/keyboard inputs </li></ul></ul>
  4. 4. Request for a section blog layout content page is sent (by user browsing to the page) Controller analyses the request and passes to appropriate component (com_content) Appropriate data (from the section ID) is pulled from the database and passed to the view View (section) and layout (blog) applied, overrides applied, content is displayed to user
  6. 6. Why use Template Overrides? <ul><li>Avoid editing the core </li></ul><ul><li>Change how an extension is displayed </li></ul><ul><li>Greater flexibility </li></ul><ul><li>If Component/module is 1.5 Native & uses MVC structure (has views/tmpl folder) </li></ul>
  8. 8. Views and Layouts <ul><li>Components display information in different ways (“views”) </li></ul><ul><li>Most components will have many views </li></ul><ul><ul><li>com_content </li></ul></ul><ul><ul><ul><li>Single article </li></ul></ul></ul><ul><ul><ul><li>Category/Section </li></ul></ul></ul><ul><ul><ul><li>Archive </li></ul></ul></ul><ul><ul><ul><li>Front Page </li></ul></ul></ul><ul><li>The view does not display the output – this is done by a “layout” (e.g. blog, html, RSS feed, PDF) </li></ul>
  9. 9. Run that by me again?! <ul><li>Components can have multiple views </li></ul><ul><ul><li>Each view assembles a fixed set of information (e.g. The Category view in Articles component assembles a number of articles) </li></ul></ul><ul><li>Each view can have multiple layouts </li></ul><ul><ul><li>Each layout can display the information in different ways (e.g. The Category view in Articles component can be laid out in blog or list layout) </li></ul></ul>
  10. 10. What about modules? <ul><li>Generally only display one thing, one way </li></ul><ul><li>Don’t really have views, but do support a layout </li></ul>
  11. 11. Templates and Layouts <ul><li>Templates set up a structural framework for the page of the website </li></ul><ul><ul><li>Positions for modules & components to display </li></ul></ul><ul><li>What gets displayed is controlled by </li></ul><ul><ul><li>Module layout </li></ul></ul><ul><ul><li>Combination of view & layout in the case of a component </li></ul></ul>
  12. 12. Typical layout (rhuk_milkyway) Append ?tp=1 to show module positions over your template E.G. index.php?tp=1
  13. 13. Component Structure <ul><li>Components/  High level folder (contains all components) </li></ul><ul><li>com_content/  Individual component folder </li></ul><ul><li>views/  The different views available for that specific component </li></ul><ul><li>articles/  For when displaying a single article view.html.php (this is the view that outputs the html) </li></ul><ul><li>view.pdf.php (this is the view that outputs the PDF) </li></ul><ul><li>tmpl/  Template folder </li></ul><ul><ul><li>default.php (this is a layout) </li></ul></ul><ul><ul><li>form.php (this is a layout) </li></ul></ul><ul><li>category/  For when displaying articles in category view </li></ul><ul><li>view.html.php (this is the view that outputs the html) </li></ul><ul><li>view.feed.php (this is the view that outputs RSS feed ) </li></ul><ul><li>tmpl/  Template folder </li></ul><ul><li>blog.php (this is a layout) </li></ul><ul><li>blog_items.php (this is a sub-layout) </li></ul><ul><li>default.php (this is a layout) </li></ul>
  15. 15. How to override components? <ul><li>Templates/  High level folder (contains all templates) </li></ul><ul><li>MyTemplate/  My Template folder </li></ul><ul><li>html/  The template overrides folder </li></ul><ul><li>com_content /  The component to be overridden </li></ul><ul><li>articles/  Overrides to apply to single article view </li></ul><ul><ul><li>default.php (this is a layout) </li></ul></ul><ul><ul><li>form.php (this is a layout) </li></ul></ul><ul><li>category/  Overrides to apply to category view </li></ul><ul><li>blog.php (this is a layout) </li></ul><ul><li>blog_items.php (this is a sub-layout) </li></ul><ul><li>default.php (this is a layout) </li></ul><ul><li>Note: </li></ul><ul><li>There are three other views for com_content: </li></ul><ul><li>Archive </li></ul><ul><li>Section </li></ul><ul><li>Frontpage </li></ul><ul><li>It is not possible to customise the PDF or RSS feeds currently </li></ul>
  16. 16. How to override components? <ul><li>Copy / components / com_content / views / article / tmpl /default.php </li></ul><ul><li>To </li></ul><ul><li>/ templates / rhuk_milkyway / html/com_content / article /default.php </li></ul><ul><li>Make changes to file in template folder (not in the core) </li></ul><ul><li>Joomla will check for overrides – if there’s a file in the html folder for this component and this view, use it. Else, use default file . </li></ul>
  17. 17. What about modules? <ul><li>Modules/  High level folder (contains all modules) </li></ul><ul><li>mod_latestnews/  Individual module folder </li></ul><ul><li>helper.php (helper file containing data logic) </li></ul><ul><li>mod_latest_news.php (main module file) </li></ul><ul><li>mod_latest_news.xml (module installation XML file) </li></ul><ul><li>tmpl/  The templates for that module (usually only one, but can be more) </li></ul><ul><li>default.php (this is a layout) </li></ul>
  18. 18. How to override modules? <ul><li>Copy </li></ul><ul><li>/ modules / mod_latestnews / tmpl /default.php </li></ul><ul><li>To </li></ul><ul><li>/ templates / rhuk_milkyway / html/mod_latestnews /default.php </li></ul><ul><li>Make changes to file in template folder (not the core) </li></ul>
  19. 19. What else can I override? <ul><li>Module Chrome </li></ul><ul><li>Pagination </li></ul><ul><li>Check out </li></ul><ul><li>for some examples </li></ul>
  21. 21. Things to consider <ul><li>Only override 1.5 NATIVE MVC enabled components/modules (with views/tmpl folder) </li></ul><ul><li>Can’t override PDF/RSS Feeds (you have to edit the core) </li></ul><ul><li>File path is essential – get it right! </li></ul>
  22. 22. Ruth Cheesley Suffolk Computer Services [email_address]
  23. 23. References <ul><li>Joomla Docs: </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>!_core </li></ul><ul><li>Wikipedia: </li></ul><ul><li> </li></ul>