Joomla Custom Fields - the next level

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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) { :: Custom Fields - the next level - 21 of 56 JUG Bussum okt 2017 @include grid column(1 of 5);

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

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

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

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

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

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

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

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

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> JUG Bussum okt 2017 :: Custom Fields <?php echo $this->loadTemplate(‘aside’); ?> - the next level - 30 of 56 /di

heading html/layouts/template/content/heading.php

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

heading html/layouts/template/content/heading.php

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

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> JUG Bussum okt 2017 :: Custom Fields <?php echo $this->loadTemplate(‘aside’); ?> - the next level - 33 of 56 /di

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

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

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

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

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

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

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

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

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

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 }

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

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 }

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 }

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 }

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 }

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 }

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 }

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 }

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

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

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> JUG Bussum okt 2017 :: Custom Fields <?php echo $this->loadTemplate(‘aside’); ?> - the next level - 54 of 56 /di

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

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