Template Layout Overrides - a beginner's guide

Post on 10-May-2015

9,259 views 0 download

Tags:

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!

transcript

Template overrides and the “MVC” concept

Ruth CheesleySuffolk Computer Services

ruth@suffolkcomputerservices.co.uk

WHAT IS MVC?

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

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

WHY USE TEMPLATE OVERRIDES?

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)

TEMPLATES, VIEWS AND LAYOUTS

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)

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)

What about modules?

• Generally only display one thing, one way

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

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

Typical layout (rhuk_milkyway)

Append ?tp=1 to show module positions over

your templateE.G.

index.php?tp=1

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)

HOW TO OVERRIDE

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

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.

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)

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)

What else can I override?

• Module Chrome

• Pagination

Check out

http://docs.joomla.org/Understanding_Output_Overrides

for some examples

THINGS TO CONSIDER

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!

Ruth Cheesley

Suffolk Computer Services

ruth@suffolkcomputerservices.co.uk

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