23
Template overrides and the “MVC” concept Ruth Cheesley Suffolk Computer Services ruth@suffolkcomputerservi ces.co.uk

Template Layout Overrides - a beginner's guide

Embed Size (px)

DESCRIPTION

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!

Citation preview

Page 1: Template Layout Overrides - a beginner's guide

Template overrides and the “MVC” concept

Ruth CheesleySuffolk Computer Services

[email protected]

Page 2: Template Layout Overrides - a beginner's guide

WHAT IS MVC?

Page 3: Template Layout Overrides - a beginner's guide

What is MVC?

• MODEL– Manages the behaviour and the data

• VIEW– Manages the graphical and/or textual output

• Article, Category Blog, Section list

• CONTROLLER– Interprets mouse/keyboard inputs

Page 4: Template Layout Overrides - a beginner's guide

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

Page 5: Template Layout Overrides - a beginner's guide

WHY USE TEMPLATE OVERRIDES?

Page 6: Template Layout Overrides - a beginner's guide

Why use Template Overrides?

• Avoid editing the core

• Change how an extension is displayed

• Greater flexibility

• If Component/module is 1.5 Native & uses MVC structure (has views/tmpl folder)

Page 7: Template Layout Overrides - a beginner's guide

TEMPLATES, VIEWS AND LAYOUTS

Page 8: Template Layout Overrides - a beginner's guide

Views and Layouts

• Components display information in different ways (“views”)

• Most components will have many views– com_content

• Single article• Category/Section• Archive• Front Page

• The view does not display the output – this is done by a “layout” (e.g. blog, html, RSS feed, PDF)

Page 9: Template Layout Overrides - a beginner's guide

Run that by me again?!

• Components can have multiple views– Each view assembles a fixed set of information

(e.g. The Category view in Articles component assembles a number of articles)

• Each view can have multiple layouts– 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)

Page 10: Template Layout Overrides - a beginner's guide

What about modules?

• Generally only display one thing, one way

• Don’t really have views, but do support a layout

Page 11: Template Layout Overrides - a beginner's guide

Templates and Layouts

• Templates set up a structural framework for the page of the website– Positions for modules & components to display

• What gets displayed is controlled by– Module layout– Combination of view & layout in the case of a

component

Page 12: Template Layout Overrides - a beginner's guide

Typical layout (rhuk_milkyway)

Append ?tp=1 to show module positions over

your templateE.G.

index.php?tp=1

Page 13: Template Layout Overrides - a beginner's guide

Component StructureComponents/ High level folder (contains all components)

com_content/ Individual component folder

views/ The different views available for that specific component

articles/ For when displaying a single articleview.html.php (this is the view that outputs the html)view.pdf.php (this is the view that outputs the PDF)

tmpl/Template folderdefault.php (this is a layout)form.php (this is a layout)

category/For when displaying articles in category viewview.html.php (this is the view that outputs the html)view.feed.php (this is the view that outputs RSS feed)

tmpl/Template folderblog.php (this is a layout)blog_items.php (this is a sub-layout)default.php (this is a layout)

Page 14: Template Layout Overrides - a beginner's guide

HOW TO OVERRIDE

Page 15: Template Layout Overrides - a beginner's guide

How to override components?Templates/ High level folder (contains all templates)

MyTemplate/ My Template folder

html/ The template overrides folder

com_content/ The component to be overridden

articles/ Overrides to apply to single article view

default.php (this is a layout)form.php (this is a layout)

category/Overrides to apply to category view

blog.php (this is a layout)blog_items.php (this is a sub-layout)default.php (this is a layout)

Note:There are three other views for com_content:

• Archive• Section• Frontpage

It is not possible to customise the PDF or RSS feeds currently

Page 16: Template Layout Overrides - a beginner's guide

How to override components?

Copy /components/com_content/views/article/tmpl/default.php

To /templates/rhuk_milkyway/html/com_content/article/default.php

• Make changes to file in template folder (not in the core)

• 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.

Page 17: Template Layout Overrides - a beginner's guide

What about modules?Modules/ High level folder (contains all modules)

mod_latestnews/ Individual module folder

helper.php (helper file containing data logic)mod_latest_news.php (main module file)mod_latest_news.xml (module installation XML file)

tmpl/ The templates for that module (usually only one, but can be more)

default.php (this is a layout)

Page 18: Template Layout Overrides - a beginner's guide

How to override modules?

Copy /modules/mod_latestnews/tmpl/default.php

To /templates/rhuk_milkyway/html/mod_latestnews/default.php

• Make changes to file in template folder (not the core)

Page 19: Template Layout Overrides - a beginner's guide

What else can I override?

• Module Chrome

• Pagination

Check out

http://docs.joomla.org/Understanding_Output_Overrides

for some examples

Page 20: Template Layout Overrides - a beginner's guide

THINGS TO CONSIDER

Page 21: Template Layout Overrides - a beginner's guide

Things to consider

• Only override 1.5 NATIVE MVC enabled components/modules (with views/tmpl folder)

• Can’t override PDF/RSS Feeds (you have to edit the core)

• File path is essential – get it right!

Page 22: Template Layout Overrides - a beginner's guide

Ruth Cheesley

Suffolk Computer Services

[email protected]

Page 23: Template Layout Overrides - a beginner's guide

References

Joomla Docs:http://docs.joomla.org/MVChttp://docs.joomla.org/Understanding_Output_Overrideshttp://docs.joomla.org/Category:Templateshttp://docs.joomla.org/

How_to_override_the_output_from_the_Joomla!_core

Wikipedia:http://en.wikipedia.org/wiki/Model-view-controller