It is extremely common that parts of pages within a Joomla! website are replicated across several views, or even across several extensions. So what does Joomla! contain that could potentially make our lives easier to manage these repeating entities? JLayouts enters the room... Joomla's superb JLayout structure was added to Joomla! v3 to help solve this very problem. Having the ability to use different layout's and associated data across views and extensions is such an awesome addition to Joomla!, but have you used it? Philip will be explaining JLayouts, what it is, how it works & where you could possibly be missing a trick in your front-end development of Joomla! websites.

1. Joomla 3
JLayouts
has entered the building!
Joomla 3
JLayouts#JD14NL

2. Joomla 3
JLayouts
Philip Locke
www.fastnetwebdesign.co.uk
&
www.joostrap.com
WHOWHO IS THIS GUY?

3. Mambo
leading to
Joomla
Open Source
Matters (OSM)
Bootstrap
&
Joostrap
WHOWHO IS THIS GUY?
Joomla 3
JLayouts

4. WHATSO WHAT’S THIS SESSION ABOUT?
1. Blinding you with science
2. What is a JLayout
3. Why use JLayout’s
4. Process & Implementation
5. How to use JLayout
6. Q … A
Joomla 3
JLayouts

5. WHATWHAT IS A JLAYOUT?
No hacking
Override
Untie data & design
Super easy integration
Joomla 3
JLayouts

6. WHATWHAT IS A JLAYOUT?
Joomla 3
JLayouts

7. WHATWHY USE JLAYOUTS?
Maintain one layout
Split code from design
Designers customise layout’s
Joomla 3
JLayouts
It’s bloody awesome!

8. SETUPWHAT WE HAVE TO DO
Joomla 3
JLayouts

9. SETUPLET’S DO THIS PUNK
1. Copy the ‘layout’ files from core
…[root]/layouts/joomla
2. Paste them into your template
HTML folder
…/html/layouts/joomla
Joomla 3
JLayouts

10. SIMPLE2 EASY STEPS
1. Create our new JLayout file
2. Add to our tmpl HTML override
Joomla 3
JLayouts

11. Joomla 3
JLayoutsEXAMPLECREATING A NEW JLAYOUT

12. THE CODE
The Code:
<?php
defined('JPATH_BASE') or die;
?>
<div class="hottopic">
<h3><span class="label label-success">Hot Topic!</span></h3>
</div>
Joomla 3
JLayouts
CREATING A NEW JLAYOUT
File Location:
templates/[our-template]/html/layouts/joomla/content/hottopic.php

13. THE CODE
The Code:
<?php
$layout = new JLayoutFile('joomla.content.hottopic');
echo $layout->render();
?>
Joomla 3
JLayouts
CREATING A NEW JLAYOUT
File Location:
templates/[our-template]/html/com_content/article/default.php

14. Joomla 3
JLayoutsEXAMPLECREATING A NEW JLAYOUT

15. Joomla 3
JLayoutsEXAMPLECREATING A NEW JLAYOUT

16. Joomla 3
JLayoutsEXAMPLEOVERRIDING AN EXISTING JLAYOUT

17. THE CODE
The Code:
<dd class="create">
<span class="label label-primary">
<?php echo
JText::sprintf('COM_CONTENT_CREATED_DATE_ON',
JHtml::_('date', $displayData['item']->created,
JText::_('DATE_FORMAT_LC3'))); ?>
</span>
</dd>
Joomla 3
JLayouts
CREATING A NEW JLAYOUT
File Location:
[our-template]/html/layouts/joomla/content/info_block/create_date.php

18. THE CODE Joomla 3
JLayouts
CREATING A NEW JLAYOUT
The Code:
<?php
$layout = new JLayoutFile('joomla.content.info_block.create_date');
echo $layout->render();
?>
File Location:
templates/[our-template]/html/com_content/article/default.php

19. Joomla 3
JLayoutsEXAMPLEOVERRIDING AN EXISTING JLAYOUT

20. WHY NOT!LET’S TAKE THIS FURTHER
Joomla 3
JLayouts
So….
Where to go from here?
We all want the simple things
in life… right?

21. Joomla 3
JLayoutsWHY NOT!LET’S TAKE THIS FURTHER
Normal blog_item.php
350+ lines of code… woo!

22. Joomla 3
JLayouts
Brain wave!
Actually… it’s pretty obvious
WHY NOT!LET’S TAKE THIS FURTHER

23. Joomla 3
JLayoutsWHY NOT!LET’S TAKE THIS FURTHER

24. WHY NOT!LET’S TAKE THIS FURTHER
Joomla 3
JLayouts
Our new blog_item.php file
31 lines of code
All code split into easy to
manage JLayouts snippets

25. OTHER IDEASGOING THE EXTRA MILE
Joomla 3
JLayouts
Place JLayout’s where you want
Blog view, Article view, etc…
Componets, Modules
Mash things up - just have a play!
JLayouts are Super Cool

26. WOWGOING THE EXTRA MILE
Joomla 3
JLayouts
After explaining JLayouts…
Nerd- Gasm!

27. QUESTIONS & ANSWERS
Q…A
Joomla 3
JLayoutsQUESTIONS?OR SHALL WE JUST GO TO THE BAR!

28. Joomla 3
JLayoutsPHILIP LOCKECONTACT ME
Website:
www.joostrap.com
www.fastnetwebdesign.co.uk
Email:
phil@joostrap.com
Twitter:
@philiplocke
@joostrap