Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

2,865 views

Published on

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.

Published in: Technology

Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

  1. 1. Joomla 3 JLayouts has entered the building! Joomla 3 JLayouts#JD14NL
  2. 2. Joomla 3 JLayouts Philip Locke www.fastnetwebdesign.co.uk & www.joostrap.com WHOWHO IS THIS GUY?
  3. 3. Mambo leading to Joomla Open Source Matters (OSM) Bootstrap & Joostrap WHOWHO IS THIS GUY? Joomla 3 JLayouts
  4. 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. 5. WHATWHAT IS A JLAYOUT? No hacking Override Untie data & design Super easy integration Joomla 3 JLayouts
  6. 6. WHATWHAT IS A JLAYOUT? Joomla 3 JLayouts
  7. 7. WHATWHY USE JLAYOUTS? Maintain one layout Split code from design Designers customise layout’s Joomla 3 JLayouts It’s bloody awesome!
  8. 8. SETUPWHAT WE HAVE TO DO Joomla 3 JLayouts
  9. 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. 10. SIMPLE2 EASY STEPS 1. Create our new JLayout file 2. Add to our tmpl HTML override Joomla 3 JLayouts
  11. 11. Joomla 3 JLayoutsEXAMPLECREATING A NEW JLAYOUT
  12. 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. 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. 14. Joomla 3 JLayoutsEXAMPLECREATING A NEW JLAYOUT
  15. 15. Joomla 3 JLayoutsEXAMPLECREATING A NEW JLAYOUT
  16. 16. Joomla 3 JLayoutsEXAMPLEOVERRIDING AN EXISTING JLAYOUT
  17. 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. 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. 19. Joomla 3 JLayoutsEXAMPLEOVERRIDING AN EXISTING JLAYOUT
  20. 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. 21. Joomla 3 JLayoutsWHY NOT!LET’S TAKE THIS FURTHER Normal blog_item.php 350+ lines of code… woo!
  22. 22. Joomla 3 JLayouts Brain wave! Actually… it’s pretty obvious WHY NOT!LET’S TAKE THIS FURTHER
  23. 23. Joomla 3 JLayoutsWHY NOT!LET’S TAKE THIS FURTHER
  24. 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. 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. 26. WOWGOING THE EXTRA MILE Joomla 3 JLayouts After explaining JLayouts… Nerd- Gasm!
  27. 27. QUESTIONS & ANSWERS Q…A Joomla 3 JLayoutsQUESTIONS?OR SHALL WE JUST GO TO THE BAR!
  28. 28. Joomla 3 JLayoutsPHILIP LOCKECONTACT ME Website: www.joostrap.com www.fastnetwebdesign.co.uk Email: phil@joostrap.com Twitter: @philiplocke @joostrap

×