0
Template overrides and the “MVC” concept Ruth Cheesley Suffolk Computer Services [email_address]
WHAT IS MVC?
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></u...
Request for a section blog layout content page is sent  (by user browsing to the page) Controller analyses the request and...
WHY USE TEMPLATE OVERRIDES?
Why use Template Overrides? <ul><li>Avoid editing the core </li></ul><ul><li>Change how an extension is displayed </li></u...
TEMPLATES, VIEWS AND LAYOUTS
Views and Layouts <ul><li>Components display information in different ways (“views”) </li></ul><ul><li>Most components wil...
Run that by me again?! <ul><li>Components can have  multiple views </li></ul><ul><ul><li>Each view assembles a fixed set o...
What about modules? <ul><li>Generally only display one thing, one way </li></ul><ul><li>Don’t really have views, but do su...
Templates and Layouts <ul><li>Templates set up a structural framework for the page of the website </li></ul><ul><ul><li>Po...
Typical layout (rhuk_milkyway) Append ?tp=1 to show module positions over your template E.G. index.php?tp=1
Component Structure <ul><li>Components/    High level folder (contains all components) </li></ul><ul><li>com_content/   ...
HOW TO OVERRIDE
How to override components? <ul><li>Templates/    High level folder (contains all templates) </li></ul><ul><li>MyTemplate...
How to override components? <ul><li>Copy  / components / com_content / views / article / tmpl /default.php </li></ul><ul><...
What about modules? <ul><li>Modules/    High level folder (contains all modules) </li></ul><ul><li>mod_latestnews/    In...
How to override modules? <ul><li>Copy  </li></ul><ul><li>/ modules / mod_latestnews / tmpl /default.php </li></ul><ul><li>...
What else can I override? <ul><li>Module Chrome </li></ul><ul><li>Pagination </li></ul><ul><li>Check out  http://docs.joom...
THINGS TO CONSIDER
Things to consider <ul><li>Only override 1.5  NATIVE  MVC enabled components/modules (with views/tmpl folder) </li></ul><u...
Ruth Cheesley Suffolk Computer Services [email_address]
References <ul><li>Joomla Docs: </li></ul><ul><li>http://docs.joomla.org/MVC </li></ul><ul><li>http://docs.joomla.org/Unde...
Upcoming SlideShare
Loading in...5
×

Template Layout Overrides - a beginner's guide

9,354

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,354
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
160
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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
  5. 5. WHY USE TEMPLATE OVERRIDES?
  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>
  7. 7. TEMPLATES, VIEWS AND LAYOUTS
  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>
  14. 14. HOW TO OVERRIDE
  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 http://docs.joomla.org/Understanding_Output_Overrides </li></ul><ul><li>for some examples </li></ul>
  20. 20. THINGS TO CONSIDER
  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>http://docs.joomla.org/MVC </li></ul><ul><li>http://docs.joomla.org/Understanding_Output_Overrides </li></ul><ul><li>http://docs.joomla.org/Category:Templates </li></ul><ul><li>http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core </li></ul><ul><li>Wikipedia: </li></ul><ul><li>http://en.wikipedia.org/wiki/Model-view-controller </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×