Verslag JUG Eindhoven 4 oktober
Het is maandag 4 oktober, wereld dierendag. Vandaag een demo waarbij de verschillen en overeenkomsten van de standaard Joomla! editor en een commerciële editor met elkaar worden vergeleken.
TinyMCE vs JCE - Hans Kuijpers
Geen slides, maar een demo vanuit Joomla! 4. Hans Kuijpers laat de verschillen en overeenkomsten zien tussen Joomla! standaard editor TinyMCE en de commerciële editor JCE.
Standaard wordt de editor TinyMCE ingeladen en daarmee heb je bij het bewerken van een artikel en op alle plaatsen waar de editor ingeladen wordt het volgende beeld. Met een druk op de knop aan het einde van de eerste regel zorg je ervoor dat alle ingestelde buttons verschijnen.
{image path="images/gebruikersgroepen/eindhoven/1e67664a98.png"}
Het instellen van de standaard editor gaat via Joomla Administrator > System > Global Configuration > Default Editor. Deze kun je wijzigen naar None en CodeMirror. Na installatie van JCE, gratis en betaald verkrijgbaar via https://www.joomlacontenteditor.net/, heb je ook de optie om deze te wijzigen naar JCE. Het bewerken van een artikel ziet er dan als volgt uit.
{image path="images/gebruikersgroepen/eindhoven/8b73031ad3.png"}
Beide editors kent standaard een grote hoeveelheid buttons. Handige en buttons die wellicht niet nodig zijn. Het is met beide extensies mogelijk om dit aantal aan te passen. Voor TinyMCE kun je dat doen via Joomla Administrator > System > Manage > Plugins > "Editor - TinyMCE". Je kunt in deze editor plugin meerdere Sets configureren en toewijzen aan bepaalde gebruikersgroepen. Via het tabblad Advanced kun je het aantal sets opgeven. Als de standaard drie niet genoeg mocht zijn kun je het aldaar uitbreiden. Vervolgens kun je middels drag&drop iconen toevoegen, verwijderen of op een andere plaats zetten. Of kiezen voor een van de presets. Zet het veld _Use Joomla Text Filter_ op Yes om gebruik te maken van de Joomla Textfilter. Hiermee voorkom je dat je zelf alle HTML elementen moet opsommen die door de editor gebruikt mogen worden. Uiteindelijk kun je een editor overhouden gelijkend aan onderstaand:
{image path="images/gebruikersgroepen/eindhoven/32daa41c26.png"}
Voor JCE kun je dit doen via Joomla Administrator > Components > JCE Editor (Pro) > Profiles. Je kunt diverse profielen aanmaken die je niet alleen aan gebruikersgroepen, maar ook aan gebruikers, componenten, devices en omgevingen (frontend / backend) kunt toewijzen. Bij het bewerken van een profiel kun je via het tabblad _Features & Layout_ middels drag&drop iconen toevoegen, verwijderen of op een andere plaats zetten. Verder biedt het de mogelijkheid een eigen css bestand voor de editor in te laden. Dit kan handig zijn wanneer je de editor gelijk wil laten ogen als de voorzijde van de website. Kies bij de Global Configuration van de extensie bij het veld _Editor Styles_ voor _Custom CSS Files_ en verwijs in het volgende veld _Custom CSS Files_ naar de locatie van je css bestand.
Voor het beheer van afbeeldingen beveelt René Kreijveld de gratis extensie Quantum Manager (https://www.norrnext.com/quantum-manager) aan. Deze extensie is nog niet beschikbaar voor Joomla! 4.
Het toevoegen van afbeeldingen gaat in JCE nog steeds vele malen handiger dan via TinyMCE. Maar gelukkig is de Joomla Media Manager in Joomla! 4 een flink stuk verbeterd en kun je via de Editor button CMS Content > Media middels de vernieuwde Media Manager je afbeelding uploaden. Het grote voordeel van JCE is dat je de _File Directory Path_ per profiel kunt instellen.
Relative path to file directory. Defaults to images or the Editor Parameters File Directory Path value if left blank.
This path can contain the variables :
- $id - Will be replaced with the user ID
- $username - Will be replaced with the user username
- $usertype - Will be replaced with the user usertype eg: author
- $profile - Will be replaced with the profile name
- $year - Will be replaced with current year, eg: 2010
- $month - Will be replaced with current month number, eg: 06
- $day - Will be replaced with the day number, eg: 10
Voor een nieuwswebsite met meerdere redacteuren waarbij je wil dat afbeeldingen van iedere redacteur in een eigen map komen zou de configuratie van dit veld als volgt kunnen zijn:
/$username/$year/$monthHet toevoegen van code voorbeelden zoals het stukje hierboven gaat in TinyMCE out of the box een stuk makkelijker dan in JCE. Bij laatstgenoemde schakel je van Editor naar de Code view en plaats je het stukje code tussen de elementen pre en code waarbij je de < en > vervangen hebt door < en >. De editor TinyMCe heeft hiervoor de button met opdruk {;}. Klik hierop en een modal popup verschijnt. Plak daarin je HTML code en de editor doet de rest.
{image path="images/gebruikersgroepen/eindhoven/7c0d302f02.png"}
Het ene project is het andere niet. En daarom wordt er per project gekeken welke editor het meest geschikt is. Waar je voorheen zonder meer JCE installeerde op een website is dat met de huidige versie TinyMCE niet meer vanzelfsprekend.
Joomla Custom Fields
Velen die werken met Joomal! maken ook gebruik van een of meerdere extensies van Regular Labs. De ontwikkelaar is bezig met het herschrijven van zijn extensies en houdt hiervan een overzicht bij op de website https://regularlabs.com/blog/1374-joomla-4-plans-and-roadmap-for-regular-labs-extensions. Lang niet alle extensies zijn gereed voor Joomla! 4. Bij de upgrade van Joomla! 3 naar Joomla! 4 zal bij de (nog-)niet-geschikte extensies de melding verschijnen dat deze niet compatible is met Joomla! 4. Het is dan ook nog niet aan te bevelen door te gaan met de upgrade als je afhankelijk bent van deze extensies.
Articles Field
Een van de extensies die nog niet klaar is en genoemd werd tijdens deze meeting was _Articles Field_. Een custom field waarmee je vanuit een artikel een of meerdere artikelen kunt selecteren. Als voorbeeld werd een receptenwebsite getoond waarbij middels _Articles Field_ andere recepten gekoppeld werden. Rick Spaan heeft een gelijke extensie gemaakt voor Joomla! 3. https://github.com/R2H-BV/articleselect
Custom Fields ACL
Situatie: Een klant moet de aangemaakte Custom Fields wel kunnen vullen, maar mag niet een Custom Field zelf wijzigen, verwijderen of een nieuwe aanmaken. Op dit moment is het in Joomla! niet mogelijk deze rechten in te stellen. Rick Spaan heeft voor een klant een maatwerk plugin gemaakt die inhaakt op de URL van het component fields en de redacteur omleidt zodra deze wel een custom field zelf wil bewerken.
YouTube Lazy Loading
Om de perceived website te verbeteren en de plaatsing van youtube cookies op de website initieel tegen te gaan is er een mooie oplossing beschikbaar voor Lazy Loading van YouTube filmpjes. In eerste instantie wordt alleen een plaatje met start button getoond en pas na het aanklikken van de startbutton wordt de YouTube iFrame ingeladen. Carlos Delgado heeft op https://ourcodeworld.com/articles/read/1383/how-to-properly-configure-lazy-loading-of-a-youtube-embed-video een mooie implementatie beschreven. Hetgeen hieronder in zijn JSFiddle te zien is
Dit kan dus ook via een JLayout gemaakt worden. Stel...
- de url van YouTube video is https://www.youtube.com/watch?v=VWcG8mpc208
- de JLayout zit in je template in map html/layouts/template/content/media/video.php
- je wil een eigen afbeelding meesturen
- je wil een titel tonen
Dan roep je de Lazy Loading YouTube als volgt op:
<?php
use Joomla\CMS\Layout\LayoutHelper;
echo LayoutHelper::render('template.content.media.video', ['videoId' => 'VWcG8mpc208', 'placeholder' => 'location/of/your/custom/image.png', 'heading' => 'your custom title']);
?>In de meest simpele vorm stuur je alleen de videoId mee in de array. De JLayout is als volgt:
<?php
/**
* @package Joomla.Site
* @subpackage Templates.pwttemplate
*
* @copyright Copyright (C) 2021 Perfect Web Team / perfectwebteam.nl
* @license GNU General Public License version 3 or later
*/
defined('JPATH_BASE') or die;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\Utilities\ArrayHelper;
/**
*
* @param string $videoId The YouTube video ID
* @param string $heading The heading of the video
* @param string $placeholder Alternate video placeholder - if none provide the YouTube hqdefault will be used
*/
/** @var array $displayData */
extract($displayData);
$videoId = $videoId ?? false;
if ($videoId):
HTMLHelper::_('script', 'YouTubeContainer.js', ['version' => 'auto', 'relative' => true]);
$heading = $heading ?? false;
$attribs = [
'class' => 'embed-youtube ratio:16:9',
'data-video-id' => $videoId,
'data-video-placeholder' => $placeholder ?? 'https://img.youtube.com/vi/' . $videoId . '/maxresdefault.jpg',
];
?>
<figure class="frame wider">
<div class="frame__media ratio:16:9">
<div <?php echo ArrayHelper::toString($attribs); ?>>
<div class="embed-youtube-play"></div>
</div>
</div>
<?php if ($heading): ?>
<figcaption class="frame__caption"><?php echo $heading; ?></figcaption>
<?php endif; ?>
</figure>
<?php endif; ?>
Uit bovenstaande code kun je opmaken dat alleen de videoId verplicht is. Wordt er geen placeholder meegegeven dan valt het script terug op ee YouTube afbeelding. Wordt er geen heading meegegeven, dan wordt deze simpelweg niet getoond.
Het ingeladen stukje javascript wijkt op slechts 1 regel af van de bedenker hierboven.
//let imageSource = "https://img.youtube.com/vi/" + container.dataset.videoId + "/sddefault.jpg";
let imageSource = container.dataset.videoPlaceholder;De implementatie zoals hierboven beschreven is toegepast op https://www.oeteldonk.org/carnaval-in-oeteldonk/over-oeteldonk/oeteldonk-in-1-minuut
Volgende keer
De volgende JUG Eindhoven is op maandag 1 november. Het onderwerp van deze meeting en de mogelijkheid tot aanmelden is terug te vinden op https://www.joomlacommunity.nl/agenda/joomla-gebruikersgroepen/eindhoven/event/610-jug040-bijeenkomst-eindhoven.
Vragen voor Dr. Joomla kun je kwijt als reactie onder de aankondiging.
Rapporteer
Mijn reacties