Joomla Custom Fields presentatie gegeven tijdens Joomla Gebruikersgroep Bijeenkomst te Bussum op oktober 2017

1. JUG Bussum okt 2017 :: Custom Fields - the next level - 1 of 56

2. JUG Bussum okt 2017 :: Custom Fields - the next level - 2 of 56

3. De basis
Een goed begin, is het halve werk
JUG Bussum okt 2017 :: Custom Fields - the next level - 3 of 56

4. Een basis template
Om mee te beginnen
JUG Bussum okt 2017 :: Custom Fields - the next level - 4 of 56

5. Handig... maar....
Veel tijd kwijt met
via Joomla.org meest recente versie downloaden
installeren op hostingomgeving
handige extensies downloaden en installeren
tof template downloaden en installeren
standaard instellingen wijzigen
accounts aanmaken
JUG Bussum okt 2017 :: Custom Fields - the next level - 5 of 56

6. Dus... een basis website
Investeer eenmalig tijd in een goede basis
Gebruik als kickstart voor ieder template-project
Beheer basis via bijvoorbeeld een github-repo
Maak bibliotheek van overrides, JavaScript, SCSS
JUG Bussum okt 2017 :: Custom Fields - the next level - 6 of 56

7. De PWT basis website
JUG Bussum okt 2017 :: Custom Fields - the next level - 7 of 56

8. Het begin is vrij leeg
JUG Bussum okt 2017 :: Custom Fields - the next level - 8 of 56

9. Zo moet het straks worden
JUG Bussum okt 2017 :: Custom Fields - the next level - 9 of 56

10. Aan het werk
Stap voor stap alle designs doornemen
JUG Bussum okt 2017 :: Custom Fields - the next level - 10 of 56

11. Waar mogelijk alleen com_content
Homepage -> com_content category blog weergave
Team -> com_content category blog weergave
Team member -> com_content article
Expertise -> com_content article met modules
Expertise selectie -> com_content category blog weergave
Opdrachtgevers -> com_content category blog weergave
Opdrachtgevers item -> com_content article
Nieuws -> com_content category blog weergave
Nieuws item -> com_content article
Contact -> com_content article
JUG Bussum okt 2017 :: Custom Fields - the next level - 11 of 56

12. Opdrachtgevers
image_intro van alle artikelen in category
JUG Bussum okt 2017 :: Custom Fields - the next level - 12 of 56

13. Opdrachtgevers
image_intro van alle artikelen in category
JUG Bussum okt 2017 :: Custom Fields - the next level - 13 of 56

14. Template override
van com_content/views/category/tmpl/
- blog.php
- blog.xml
- blog_item.php
naar templates/bla/html/com_content/category/
- clients.php
- clients.xml
- clients_item.php
JUG Bussum okt 2017 :: Custom Fields - the next level - 14 of 56

15. Client.xml
van
<layout title="COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE"
option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
<help key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG" />
<message>
<![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>
</message>
</layout>
naar
<layout title="COM_CONTENT_CATEGORY_VIEW_CLIENTS_TITLE"
option="COM_CONTENT_CATEGORY_VIEW_CLIENTS_OPTION">
<help key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG" />
<message>
<![CDATA[COM_CONTENT_CATEGORY_VIEW_CLIENTS_DESC]]>
</message>
</layout>
JUG Bussum okt 2017 :: Custom Fields - the next level - 15 of 56

16. Taalstrings
administrator/language/overrides/nl-NL.overrides.ini
COM_CONTENT_CATEGORY_VIEW_CLIENTS_TITLE="Categorieblog Opdrachtgevers p
COM_CONTENT_CATEGORY_VIEW_CLIENTS_OPTION="Categoryblogclientpage"
COM_CONTENT_CATEGORY_VIEW_CLIENTS_DESC="Weergave van artikelintroductie
JUG Bussum okt 2017 :: Custom Fields - the next level - 16 of 56

17. Menu type
Nieuwe optie beschikbaar bij aanmaken menu item
JUG Bussum okt 2017 :: Custom Fields - the next level - 17 of 56

18. Override van cateogory blog
blog.php gekopieerd naar clients.php
<?php if (!empty($this->intro_items)) : ?>
<section class="section section__client-items<?php echo $this->para
<div class="container">
<div class="section__content">
Hier de plaatjes van alle opdrachtgevers
</div>
</div>
</section>
<?php endif; ?>
JUG Bussum okt 2017 :: Custom Fields - the next level - 18 of 56

19. Override van category blog
oproepen van alle plaatjes
<?php
foreach ($this->intro_items as $key => &$item)
{
$this->item = &$item;
echo $this->loadTemplate('item');
}
?>
Waar zijn die plaatjes? Die zitten in clients_item.php
JUG Bussum okt 2017 :: Custom Fields - the next level - 19 of 56

20. Override van category blog_item
eindelijk die plaatjes
<?php $images = json_decode($this->item->images); ?>
<?php if (isset($images->image_intro) && !empty($images->image_intro))
<figure class="section__image">
<?php echo JHtml::_('image', $images->image_intro, $this->item-
</figure>
<?php endif; ?>
JUG Bussum okt 2017 :: Custom Fields - the next level - 20 of 56

21. Wat styling erover
.section__client-items {
padding-top: 2rem;
padding-bottom: 5rem;
.section__content {
@include grid-column(12);
@include grid-media($grid-charlie) {
@include grid-column(10);
@include grid-push(1);
}
}
.section__image {
@include grid-column(1 of 2);
padding: $spacing-xs;
@include grid-media($grid-alpha--plus) {
@include grid-column(1 of 3);
}
@include grid-media($grid-beta) {
@include grid-column(1 of 4);
}
@include grid-media($grid-charlie) {
@include grid column(1 of 5);
JUG Bussum okt 2017 :: Custom Fields - the next level - 21 of 56

22. Het resultaat met com_content
JUG Bussum okt 2017 :: Custom Fields - the next level - 22 of 56

23. Die was eenvoudig
Nu een pittige
JUG Bussum okt 2017 :: Custom Fields - the next level - 23 of 56

24. JUG Bussum okt 2017 :: Custom Fields - the next level - 24 of 56

25. Team member
Header toont article title
Sidebar: afbeelding link is image_intro, typisch via custom
elds, plaatjes via custom elds, stuk tekst via taalstring
Main-top: Quote via custom elds, LinkedIn via custom elds,
telefoon via custom elds, e-mail via custom elds
Content: drie velden via custom elds
Main-bottom: twee modules
JUG Bussum okt 2017 :: Custom Fields - the next level - 25 of 56

26. Overzicht van aangemaakte elds
JUG Bussum okt 2017 :: Custom Fields - the next level - 26 of 56

27. Template override
van com_content/views/article/tmpl/
- default.php
naar templates/bla/html/com_content/article/
- vennoot.php
JUG Bussum okt 2017 :: Custom Fields - the next level - 27 of 56

28. Template override
van com_content/views/article/tmpl/
- default.php
naar templates/bla/html/com_content/article/
- vennoot.php
let op: dit keer geen vennoot.xml
JUG Bussum okt 2017 :: Custom Fields - the next level - 28 of 56

29. Weergave override via Opties
Bij aanmaken nieuw com_content article
JUG Bussum okt 2017 :: Custom Fields - the next level - 29 of 56

30. Overzicht door templates
<?php echo Jlayouts::render('content.heading', array('title' => $this->
<section class="section section__vennoot">
<div class="container">
<div class="section__content section__content--vennoot">
<div class="block__vennoot-top">
<?php echo $this->loadTemplate('top'); ?>
</div>
<div class="block__vennoot-main">
<?php echo $this->item->event->beforeDisplayContent; ?>
<?php echo $this->loadTemplate('body'); ?>
<?php echo $this->item->event->afterDisplayContent; ?>
</div>
<div class="block__vennoot-bottom">
<?php echo $this->loadTemplate('bottom-opdrachten'); ?>
<?php echo $this->loadTemplate('bottom-publicaties'); ?
</div>
</div>
<div class="section__content section__content--aside">
<div class="block__vennoot-image">
<?php echo $this->loadTemplate('image'); ?>
</div>
<?php echo $this->loadTemplate('aside'); ?>
/di
JUG Bussum okt 2017 :: Custom Fields - the next level - 30 of 56

31. heading
html/layouts/template/content/heading.php
<?php echo Jlayouts::render('content.heading',
array('title' => $this->item->title, 'bgcolor' => 'white')); ?>
JUG Bussum okt 2017 :: Custom Fields - the next level - 31 of 56

32. heading
html/layouts/template/content/heading.php
<?php echo Jlayouts::render('content.heading',
array('title' => $this->item->title, 'bgcolor' => 'white')); ?>
eigen JLayout
<section class="section section__heading <?php echo 'section__heading--
<div class="container">
<h1><?php
echo $displayData['title'] ? $displayData['title'] : '';
?></h1>
</div>
</section>
<?php endif; ?>
JUG Bussum okt 2017 :: Custom Fields - the next level - 32 of 56

33. Overzicht door templates - herhaling
<?php echo Jlayouts::render('content.heading', array('title' => $this->
<section class="section section__vennoot">
<div class="container">
<div class="section__content section__content--vennoot">
<div class="block__vennoot-top">
<?php echo $this->loadTemplate('top'); ?>
</div>
<div class="block__vennoot-main">
<?php echo $this->item->event->beforeDisplayContent; ?>
<?php echo $this->loadTemplate('body'); ?>
<?php echo $this->item->event->afterDisplayContent; ?>
</div>
<div class="block__vennoot-bottom">
<?php echo $this->loadTemplate('bottom-opdrachten'); ?>
<?php echo $this->loadTemplate('bottom-publicaties'); ?
</div>
</div>
<div class="section__content section__content--aside">
<div class="block__vennoot-image">
<?php echo $this->loadTemplate('image'); ?>
</div>
<?php echo $this->loadTemplate('aside'); ?>
/di
JUG Bussum okt 2017 :: Custom Fields - the next level - 33 of 56

34. loadTemplate('top')
html/com_content/article/vennoot_top.php
JUG Bussum okt 2017 :: Custom Fields - the next level - 34 of 56

35. loadTemplate('top')
html/com_content/article/vennoot_top.php
viertal Custom Fields
Quote
LinkedIn
Telefoon
E-mail
JUG Bussum okt 2017 :: Custom Fields - the next level - 35 of 56

36. Weergave in beheer van artikel
Inhoud > Artikelen
JUG Bussum okt 2017 :: Custom Fields - the next level - 36 of 56

37. Overzicht van de Custom Fields
Inhoud > Velden
JUG Bussum okt 2017 :: Custom Fields - the next level - 37 of 56

38. Oproepen in een override
<?php echo $this->item->jcfields[2]->value; ?>
JUG Bussum okt 2017 :: Custom Fields - the next level - 38 of 56

39. Oproepen in een override
<?php echo $this->item->jcfields[2]->value; ?>
2? Wat is 2? Veldnaam quote zou handiger zijn toch?
JUG Bussum okt 2017 :: Custom Fields - the next level - 39 of 56

40. mapping aanmaken van naam -> id
foreach ($this->item->jcfields as $jcfield)
{
$this->item->jcfield_name_id_map[$jcfield->name] = $jcfield->id;
}
$jcfield_name_id_map = $this->item->jcfield_name_id_map;
echo $this->item->jcfields[$jcfield_name_id_map['quote']]->value;
JUG Bussum okt 2017 :: Custom Fields - the next level - 40 of 56

41. loadTemplate('top')
html/com_content/article/vennoot_top.php
<?php
foreach ($this->item->jcfields as $jcfield)
{
$this->item->jcfield_name_id_map[$jcfield->name] = $jcfield->id;
}
$jcfield_name_id_map = $this->item->jcfield_name_id_map;
?>
<div class="block__vennoot-top-headline">
<?php
if (!empty($quote =
$this->item->jcfields[$jcfield_name_id_map['quote']]->value))
{
echo $quote;
}
?>
</div>
Herhalen voor LinkedIn, Telefoon en E-mail
JUG Bussum okt 2017 :: Custom Fields - the next level - 41 of 56

42. loadTemplate('body')
html/com_content/article/vennoot_body.php
JUG Bussum okt 2017 :: Custom Fields - the next level - 42 of 56

43. loadTemplate('body')
html/com_content/article/vennoot_body.php
foreach ($this->item->jcfields as $jcfield)
{
$this->item->jcfield_name_id_map[$jcfield->name] = $jcfield->id;
}
$jcfield_name_id_map = $this->item->jcfield_name_id_map;
$fields = array('achtergrond-en-ervaring','leiderschapsvisie-en-managem
if ($this->item->language == 'en-GB')
{
$fields = array('background-and-experience','leadership-vision-and-
}
foreach ($fields as $field)
{
$vennoot_body = $this->item->jcfields[$jcfield_name_id_map[$field]]
if ($vennoot_body->value)
{
echo JText::_('<h2>' . $vennoot_body->title . '</h2>');
echo JText::_($vennoot_body->value);
}
}
JUG Bussum okt 2017 :: Custom Fields - the next level - 43 of 56

44. dafuq?
JUG Bussum okt 2017 :: Custom Fields - the next level - 44 of 56

45. loadTemplate('body')
html/com_content/article/vennoot_body.php
foreach ($this->item->jcfields as $jcfield)
{
$this->item->jcfield_name_id_map[$jcfield->name] = $jcfield->id;
}
$jcfield_name_id_map = $this->item->jcfield_name_id_map;
$fields = array('achtergrond-en-ervaring','leiderschapsvisie-en-managem
if ($this->item->language == 'en-GB')
{
$fields = array('background-and-experience','leadership-vision-and-
}
foreach ($fields as $field)
{
$vennoot_body = $this->item->jcfields[$jcfield_name_id_map[$field]]
if ($vennoot_body->value)
{
echo JText::_('<h2>' . $vennoot_body->title . '</h2>');
echo JText::_($vennoot_body->value);
}
}
JUG Bussum okt 2017 :: Custom Fields - the next level - 45 of 56

46. loadTemplate('body')
html/com_content/article/vennoot_body.php
foreach ($this->item->jcfields as $jcfield)
{
$this->item->jcfield_name_id_map[$jcfield->name] = $jcfield->id;
}
$jcfield_name_id_map = $this->item->jcfield_name_id_map;
$fields = array('achtergrond-en-ervaring','leiderschapsvisie-en-managem
if ($this->item->language == 'en-GB')
{
$fields = array('background-and-experience','leadership-vision-and-
}
foreach ($fields as $field)
{
$vennoot_body = $this->item->jcfields[$jcfield_name_id_map[$field]]
if ($vennoot_body->value)
{
echo JText::_('<h2>' . $vennoot_body->title . '</h2>');
echo JText::_($vennoot_body->value);
}
}
JUG Bussum okt 2017 :: Custom Fields - the next level - 46 of 56

47. loadTemplate('body')
html/com_content/article/vennoot_body.php
foreach ($this->item->jcfields as $jcfield)
{
$this->item->jcfield_name_id_map[$jcfield->name] = $jcfield->id;
}
$jcfield_name_id_map = $this->item->jcfield_name_id_map;
$fields = array('achtergrond-en-ervaring','leiderschapsvisie-en-managem
if ($this->item->language == 'en-GB')
{
$fields = array('background-and-experience','leadership-vision-and-
}
foreach ($fields as $field)
{
$vennoot_body = $this->item->jcfields[$jcfield_name_id_map[$field]]
if ($vennoot_body->value)
{
echo JText::_('<h2>' . $vennoot_body->title . '</h2>');
echo JText::_($vennoot_body->value);
}
}
JUG Bussum okt 2017 :: Custom Fields - the next level - 47 of 56

48. loadTemplate('body')
html/com_content/article/vennoot_body.php
foreach ($this->item->jcfields as $jcfield)
{
$this->item->jcfield_name_id_map[$jcfield->name] = $jcfield->id;
}
$jcfield_name_id_map = $this->item->jcfield_name_id_map;
$fields = array('achtergrond-en-ervaring','leiderschapsvisie-en-managem
if ($this->item->language == 'en-GB')
{
$fields = array('background-and-experience','leadership-vision-and-
}
foreach ($fields as $field)
{
$vennoot_body = $this->item->jcfields[$jcfield_name_id_map[$field]]
if ($vennoot_body->value)
{
echo JText::_('<h2>' . $vennoot_body->title . '</h2>');
echo JText::_($vennoot_body->value);
}
}
JUG Bussum okt 2017 :: Custom Fields - the next level - 48 of 56

49. loadTemplate('body')
html/com_content/article/vennoot_body.php
foreach ($this->item->jcfields as $jcfield)
{
$this->item->jcfield_name_id_map[$jcfield->name] = $jcfield->id;
}
$jcfield_name_id_map = $this->item->jcfield_name_id_map;
$fields = array('achtergrond-en-ervaring','leiderschapsvisie-en-managem
if ($this->item->language == 'en-GB')
{
$fields = array('background-and-experience','leadership-vision-and-
}
foreach ($fields as $field)
{
$vennoot_body = $this->item->jcfields[$jcfield_name_id_map[$field]]
if ($vennoot_body->value)
{
echo JText::_('<h2>' . $vennoot_body->title . '</h2>');
echo JText::_($vennoot_body->value);
}
}
JUG Bussum okt 2017 :: Custom Fields - the next level - 49 of 56

50. loadTemplate('body')
html/com_content/article/vennoot_body.php
foreach ($this->item->jcfields as $jcfield)
{
$this->item->jcfield_name_id_map[$jcfield->name] = $jcfield->id;
}
$jcfield_name_id_map = $this->item->jcfield_name_id_map;
$fields = array('achtergrond-en-ervaring','leiderschapsvisie-en-managem
if ($this->item->language == 'en-GB')
{
$fields = array('background-and-experience','leadership-vision-and-
}
foreach ($fields as $field)
{
$vennoot_body = $this->item->jcfields[$jcfield_name_id_map[$field]]
if ($vennoot_body->value)
{
echo JText::_('<h2>' . $vennoot_body->title . '</h2>');
echo JText::_($vennoot_body->value);
}
}
JUG Bussum okt 2017 :: Custom Fields - the next level - 50 of 56

51. loadTemplate('body')
html/com_content/article/vennoot_body.php
foreach ($this->item->jcfields as $jcfield)
{
$this->item->jcfield_name_id_map[$jcfield->name] = $jcfield->id;
}
$jcfield_name_id_map = $this->item->jcfield_name_id_map;
$fields = array('achtergrond-en-ervaring','leiderschapsvisie-en-managem
if ($this->item->language == 'en-GB')
{
$fields = array('background-and-experience','leadership-vision-and-
}
foreach ($fields as $field)
{
$vennoot_body = $this->item->jcfields[$jcfield_name_id_map[$field]]
if ($vennoot_body->value)
{
echo JText::_('<h2>' . $vennoot_body->title . '</h2>');
echo JText::_($vennoot_body->value);
}
}
JUG Bussum okt 2017 :: Custom Fields - the next level - 51 of 56

52. Het resultaat
JUG Bussum okt 2017 :: Custom Fields - the next level - 52 of 56

53. Het resultaat - Engels
JUG Bussum okt 2017 :: Custom Fields - the next level - 53 of 56

54. Overzicht door templates - herhaling
<?php echo Jlayouts::render('content.heading', array('title' => $this->
<section class="section section__vennoot">
<div class="container">
<div class="section__content section__content--vennoot">
<div class="block__vennoot-top">
<?php echo $this->loadTemplate('top'); ?>
</div>
<div class="block__vennoot-main">
<?php echo $this->item->event->beforeDisplayContent; ?>
<?php echo $this->loadTemplate('body'); ?>
<?php echo $this->item->event->afterDisplayContent; ?>
</div>
<div class="block__vennoot-bottom">
<?php echo $this->loadTemplate('bottom-opdrachten'); ?>
<?php echo $this->loadTemplate('bottom-publicaties'); ?
</div>
</div>
<div class="section__content section__content--aside">
<div class="block__vennoot-image">
<?php echo $this->loadTemplate('image'); ?>
</div>
<?php echo $this->loadTemplate('aside'); ?>
/di
JUG Bussum okt 2017 :: Custom Fields - the next level - 54 of 56

55. loadTemplate('image')
html/com_content/article/vennoot_image.php
<?php
$images = json_decode($this->item->images);
if(isset($images->image_teammember) && !empty($images->image_teammember
{
echo '<figure>';
echo JHtml::_('image', $images->image_teammember, $this->item->titl
echo '</figure>';
}
JUG Bussum okt 2017 :: Custom Fields - the next level - 55 of 56

56. Dank voor jullie
aandacht
Hans Kuijpers
@hans2103
JUG Bussum okt 2017 :: Custom Fields - the next level - 56 of 56