Change your view, Joomla! template overrides, what, why and how
3
A basic example - a simple menu module
Before
The standard menu view
Here you can see the what it does
Our new custom module override
We just have the menu items
This is a very simple example. It does not even require any CSS.
Hopefully this exmplains the principle in a practical way
This is in...
modules/mod_menu/tmpl/default.php
It contains a lot of code related to menu item style and depth, we don't need this, as out new menu will be for a fixed purpose
Starting simple, we'll look at a menu module override.
This will be a layout overide for use in the footer of a site.
So, we'll copy the file from...
modules/mod_menu/tmpl/default.php
to...
templates/<template_name>/html/mod_menu/footer.php
Notice we've called it "footer.php" so it wont be the default, and we'll have to select it as an alternate layout.
This new file is in...
templates/<template_name>/html/mod_menu/footer.php
This new file is much simpler.
A vertical line
After
A copyright notice, and credit
Hello, I'm Andy Gaskell
<boring intro> I'm developer with a design background, developing on Joomla since the Mambo days.
Over the years I've produced a wide range of Joomla sites for financial corporations, football clubs, MPs, non-profits, news outlets, business directories, e-learning, the NHS, hospitality and a range of other clients. I typically work for digital agencies to assist and extend their development teams. My company is call SSOFB.
I live Aberdeen, but grew up in London, and have also lived in Edinburgh, Sydney and Glasgow. </boring intro>
https://twitter.com/AndyGasman
http://www.ssofb.co.uk
Something more interesting - a Twitter widget
Before
Our new Twitter widget
What we'll cover
Here you can see the what it does
The standard JMod TweetDisplay view
We'll put it in some divs, so we can get it to display as per the design
After
Loop through the tweets
This is a practical example, a client wanted a twitter widget on site header that showed the latest tweet. We took the Twitter Extension JMod TweetDisplay, which works with the latest Twitter API
So, we'll copy the file from...
modules/mod_jmod_tweetdisplay/tmpl/default.php
to...
templates/<template_name>/html/mod_jmod_tweetdisplay/header.php
Notice we've called it "header.php" so it wont be the default, and we'll have to select it as an alternate layout.
This is a slightly more involved example, this will require some CSS to go with it.
This new file is in...
templates/<template_name>/html/mod_jmod_tweetdisplay/header.php
This new file is much simpler.
This is in...
modules/mod_jmod_tweetdisplay/tmpl/default.php
It's pretty complicated, as it offers a lot of good options by default. For out single purpose module, we can strip a lot of this out.
Follow link
Show a bird
- What are template overrides
- How template overrides work in Joomla!
- Setting up module overrides
- Setting up component overrides
- Layout overrides, for more variations
- A set of examples
Change your view
template overrides, what, why and how
There are wrapper functions for big and small images
The standard Mod Articles Latest view
And a main function to do the work
There are some image size settings
An example of a wee bit more functionality in a template override
Then, we can use it in template overrides modules and components
This is in...
modules/mod_articles_latest/tmpl/default.php
Include the helper
Our override view, with image
So, in a similar way, it can be used in the component
So, we'll create a helper file, and include it in sever template overides
And lots of debug
Include the helper
It checks files exist
Figures out the WxH ratios
Get the article's image info
A good example of this would be blog type content, where you would want an image on each story.
We'll just use the "Full article image", but we could use the "Intro Image" as well or instead.
in...
templates/<template_name>/html/mod_articles_latest/default.php
- Joomla! 3 has great functionality for having a big and small image for an article.
- This is great, as we used to have to go to K2 for this sort of thing.
- But, K2 did nice resizing of images, in four different sizes, which was really handy.
- But adding a big component for that functionally it a bit heavy handed.
- Maybe, we can just sneak that logic into a template override.
- We could use these multiple size images in modules too.
- Since we'll be re-using the code, we could put it in a common file.
Generates a small image, if it doesn't exist
What are template overides
from...
components/com_content/views/article/tmpl/default.php
to...
templates/<template_name>/html/com_content/article/default.php
We'll make the helper file...
templates/<template_name>/html/image_helper.php
This is a bit un-Joomla! but is a quick solution, and explains how much you can sqeeze into a template override
Display the image
And generates a large image, if it doesn't exist
A practical introduction to Joomla! template overrides.
Let's look at some examples
Display the image
And then prints it
A way of overriding how a module of component looks.
This is done in the template, so nice is and clean.
It leverages the MVC design patern of Joomla.
It is probably one of those things that is simpler to show what is possible using examples.
We'll start with some simpler ones.
Alternative Layouts
How template overrides work in Joomla!
Alternative layouts allow you have variations on a template override.
Just copy the "default.php" file to a new name. These are then picked up in the module or component admin.
But, Watch out
There is a gotcha here, if you put underscores in your filename, then it wont show up in the admin screen
When Joomla renders the view, it checks the template for an overide, before rendering the default view.
If it finds a default view in the template, it renders that. If a custom view is specified, it uses that.
You can set up mulitple views per compoent or module
Thanks for Listening
Thoughts, Queries or ideas?
- Your favorite template-ing tricks
- Queries or questions
- Comments
- Examples
So, to get started, copy the relevant files into the template
I'd be happy to explain or expand on any of this, catch me after this or any time
https://twitter.com/AndyGasman
http://www.ssofb.co.uk
This is slightly different for modules and components, but works on the same principle.