Transcript
Page 1: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayouts

has entered the building!

Joomla 3JLayouts#JD14NL

Page 2: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayouts

Philip Lockewww.fastnetwebdesign.co.uk

&www.joostrap.com

WHOWHO IS THIS GUY?

Page 3: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

MamboMamboleading toleading to

JoomlaJoomla

MamboMamboleading toleading to

JoomlaJoomla

Open Source Open Source Matters (OSM)Matters (OSM)Open Source Open Source

Matters (OSM)Matters (OSM)

Bootstrap Bootstrap &&

JoostrapJoostrap

Bootstrap Bootstrap &&

JoostrapJoostrap

WHOWHO IS THIS GUY?

20032010

2012

Joomla 3JLayouts

Page 4: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

WHATSO WHAT’S THIS SESSION ABOUT?

1. Blinding you with science2. What is a JLayout3. Why use JLayout’s4. Process & Implementation5. How to use JLayout6. Q … A

Joomla 3JLayouts

Page 5: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

WHATWHAT IS A JLAYOUT?

No hacking

Override

Untie data & design

Super easy integration

Joomla 3JLayouts

Page 6: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

WHATWHAT IS A JLAYOUT?

Joomla 3JLayouts

Page 7: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

WHATWHY USE JLAYOUTS?

Maintain one layout

Split code from design

Designers customise layout’s

Joomla 3JLayouts

It’s bloody awesome!

Page 8: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

SETUPWHAT WE HAVE TO DO

Joomla 3JLayouts

Page 9: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

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 3JLayouts

Page 10: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

SIMPLE2 EASY STEPS

1. Create our new JLayout file

2. Add to our tmpl HTML override

Joomla 3JLayouts

Page 11: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayoutsEXAMPLE

CREATING A NEW JLAYOUT

Page 12: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

THE CODE

The Code:<?phpdefined('JPATH_BASE') or die;?>

<div class="hottopic"> <h3><span class="label label-success">Hot Topic!</span></h3></div>

Joomla 3JLayouts

CREATING A NEW JLAYOUT

File Location:templates/[our-template]/html/layouts/joomla/content/hottopic.php

Page 13: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

THE CODE

The Code:<?php$layout = new JLayoutFile('joomla.content.hottopic');echo $layout->render();?>

Joomla 3JLayouts

CREATING A NEW JLAYOUT

File Location:templates/[our-template]/html/com_content/article/default.php

Page 14: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayoutsEXAMPLE

CREATING A NEW JLAYOUT

Page 15: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayoutsEXAMPLE

CREATING A NEW JLAYOUT

Page 16: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayoutsEXAMPLE

OVERRIDING AN EXISTING JLAYOUT

Page 17: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

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 3JLayouts

CREATING A NEW JLAYOUT

File Location:[our-template]/html/layouts/joomla/content/info_block/create_date.php

Page 18: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

THE CODE Joomla 3JLayouts

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

Page 19: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayoutsEXAMPLE

OVERRIDING AN EXISTING JLAYOUT

Page 20: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

WHY NOT!LET’S TAKE THIS FURTHER

Joomla 3JLayouts

So….

Where to go from here?

We all want the simple thingsin life… right?

Page 21: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayoutsWHY NOT!

LET’S TAKE THIS FURTHER

Normal blog_item.php

350+ lines of code… woo!

Page 22: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayouts

Brain wave!Actually… it’s pretty obvious

WHY NOT!LET’S TAKE THIS FURTHER

Page 23: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayoutsWHY NOT!

LET’S TAKE THIS FURTHER

Page 24: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

WHY NOT!LET’S TAKE THIS FURTHER

Joomla 3JLayouts

Our new blog_item.php file

31 lines of code

All code split into easy tomanage JLayouts snippets

Page 25: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

OTHER IDEASGOING THE EXTRA MILE

Joomla 3JLayouts

Place JLayout’s where you want

Blog view, Article view, etc…

Componets, Modules

Mash things up - just have a play!

JLayouts are Super Cool

Page 26: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

WOWGOING THE EXTRA MILE

Joomla 3JLayouts

After explaining JLayouts…

Nerd- Gasm!

Page 27: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

QUESTIONS & ANSWERS

Q…A

Joomla 3JLayoutsQUESTIONS?

OR SHALL WE JUST GO TO THE BAR!

Page 28: Joomla 3 JLayout's - Joomladay Netherlands 2014 #jd14nl

Joomla 3JLayoutsPHILIP LOCKE

CONTACT ME

Website:

www.joostrap.com

www.fastnetwebdesign.co.uk

Email:

[email protected]

Twitter:

@philiplocke

@joostrap