Hans Kuijpers

JUG017 vond plaats op 12 december bij Meet&Greet. Hans Kuijpers begint te avond met uitleggen wat custom fields zijn. Met custom fields is het mogelijk binnen een artikel velden toe te voegen. Voorheen had je daarvoor extensies nodig als FieldsAttach, Form2Content, K2 en meer. Custom Fields is de Joomla implementatie van de extensie DPFields. Werken met custom fields in Joomla betekent dat zonder een extensie te installeren gebruik gemaakt kan worden van een nieuwe functionaliteit binnen o.a. artikelen. Hierdoor kan veel herhaalwerk uit handen worden genomen.

Aan het eind van de avond komt het gesprek op de positie van custom fields ten opzichte van de extensies RS Forms en RS Events. Voor uitgebreidere toepassingen zijn deze en andere extensies zeer geschikt, voor een eenvoudigere toepassing, die ook door meerdere gebruikers van een template goed te hanteren zijn, kunnen custom fields een goede uitkomst zijn.

Gedurende de avond gebruikt Hans een eenvoudig voorbeeld van custom fields voor gerechten om uit te wijden naar wat de mogelijkheden allemaal zijn. Het basisprincipe van custom fields is eenvoudig: eerst wordt een veld aangemaakt (meestal een tekstveld), daarna een categorie, en vervolgens wordt het veld in een aangemaakte veldgroep geplaatst.

Door het aanpassen van de css en andere codes en door het maken van overrides kan de functionaliteit van de custom fields tot in het schier oneindige worden uitgebreid. Dat Hans daarin zeer bedreven is, werd gaandeweg de avond heel duidelijk.

Voorbeelden van websites waarop veel met custom fields is gewerkt: website:

www.custommanagement.nl (elk lid van het team een eigen invulling)
www.hartforher.nl (elke vestiging een eigen invulling).

Responsive video container

De vestigingpagina's van HartforHer hebben een responsive video. Hieronder staat toegelicht hoe deze gemaakt is.

http://hartforher.nl/vestigingen/vrouwen-sport-fitness-afvallen-almere

De pagina is een grote template override met calls naar module posities en de output van custom fields. De beheerders van elke vestiging hebben de mogelijkheid om één youtube video toe te voegen aan de pagina. Dit doen ze door de Youtube url (bijv https://www.youtube.com/watch?v=wQ9C6ka7xd0) te kopiëren naar de custom field (type = text) die daarvoor aangemaakt is. 

Vervolgens kent de template een helper functie die vanuit de template override aangeroepen wordt:

$this->template = JFactory::getApplication()->getTemplate();
require_once JPATH_THEMES . '/' . $this->template . '/helper.php';

De helper bevat vele functies... in dit voorbeeld gaat het om de youtube functie:

!--?php/**
 *@package perfecttemplate
 * @copyright Copyright (c) Perfect Web Team / perfectwebteam.nl
 * @license GNU General Public License version 3 or later
 */
defined('_JEXEC') or die();

class PWTTemplateHelper
{
  static public function youtube($url, $width = 560, $height = 315, $fullscreen = true)
 {
    parse_str(parse_url($url, PHP_URL_QUERY), $my_array_of_vars);
    $youtube = '<iframe allowtransparency="true" scrolling="no" width="' . $width . '" height="' . $height . '" src="//www.youtube.com/embed/' . $my_array_of_vars['v'] . '" frameborder="0" ' . ($fullscreen ? ' allowfullscreen' : null) . ' ></iframe>';

    return $youtube;
  }
}

Deze functie leest de opgegeven url uit en stuurt de value van key = v terug. Van het opgegeven voorbeeld hierboven is dat dan de Youtube iframe van video met id = "wQ9C6ka7xd0".

Terug naar de template override waar we het custom field van youtube oproepen. Dit doen we middels een id->name mapping, waardoor je een custom field kunt oproepen via de naam ipv het id. 

/**
 * Create custom fields name -> id mapping.
 * It will allow you to use field names instead of field 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;


$youtube = item->jcfields[$this->item->jcfield_name_id_map['youtube']];
if($youtube->value) :
  echo '<div class="video-container">';
  echo PWTTemplateHelper::($youtube->value);
  echo '</div>';
endif;

De bijbehorende css is als volgt:

.video-container{position:relative}
.video-container:before{padding-top:56.25%;display:block;content:" "}
.video-container iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
.video-container iframe:first-child{margin-top:0}
.video-container iframe:first-child:last-child{margin-bottom:0}

En de responsive video is een feit. Veel plezier er mee. 

Andere besproken sites en extensies

Enkele andere handige websites en extensies die gedurende de avond werden besproken:

JoomlaDagen 2018

In de loop van de avond vertelt Hans iets over de JoomlaDagen 2018 die dit jaar op de High Tech Campus Eindhoven plaatsvinden. Niet alleen de locatie is veranderd maar ook de dagen waarop: in plaats van zaterdag en zondag vinden de JoomlaDagen 2018 plaats op vrijdag 13 en zaterdag 14 april 2018. Meer informatie over de JoomlaDagen vind je terug op de website https://www.joomladagen.nl/

 

Reageer

1000 Resterende tekens