Verslag JUG Eindhoven 28 juli 2026
Buiten is het best warm. Binnen is het beter... de laatste JUG040
De laatste JUG040
Bij de aankondiging al mede gedeeld is dit de laatste JUG040 / Online. Er is vooralsnog geen vervanger om Hans Kuijpers op te volgen als organisator van JUG040 / Online. Mocht je interesse hebben laat het vooral weten bij [email protected] Kennis delen over Joomla en CSS is leuk, maar na 15 jaar organiseren van de Joomla GebruikersGroep 's-Hertogenbosch / Eindhoven / Online en het starten van een nieuwe baan is het tijd om te stoppen.
Hieronder het laatste verslag. Dank jullie wel voor de jaren van deelname aan de leuke kennisdeelsessies.
YouTube Error 153
Dat is wat er op de website https://jacvanhouten.nl in beeld verscheen na het starten van een YouTube filmpje. De Joomla Content Plugin YouTube (https://github.com/hans2103/plg_content_youtube) zou ervoor moeten zorgen dat het filmpje getoond wordt. Bij laden van de pagina wordt wel de fallback image getoond, maar bij starten van de video verschijnt de foutmelding.
YouTube foutcode 153 houdt in dat de embedded video geblokkeerd wordt door een veiligheidsprobleem. Niet dat de site lek is, maar de website stuurt geen geldige 'verwijzingsgegevens' (HTTP referrer) mee naar YouTube. YouTube kan hierdoor niet controleren of de site veilig is en blokkeert de video.
De fout wordt meestal veroorzaakt door een AdBlocker, Privacy extensies of website instellingen.
In de Console van de Dev Tools viel al iets te lezen van referrer-policy, maar bij controle van de settings van de website was alles dik in orde. Wat bleek... de site was recent verhuist naar een snellere server en op server niveau werd de header setting "Referrer-Policy" ingesteld op "same-origin". Dit houdt in dat de website de herkomst (url) alleen mag delen met zichzelf en niet met iemand anders. Omdat YouTube.com niet hetzelfde is als JacvanHouten.nl blokkeert YouTube de video.
De oplossing die doorgevoerd is, is het wijzigen van de "Referrer Policy" naar "strict-origin-when-cross-origin". Dit houdt in dat YouTube te horen krijgt dat de met SSL beveiligde website JacvanHouten.nl een YouTube film op de met SSL beveiligde website JacvanHouten.nl wil laten zien. En YouTube vindt dat goed en toont de video... Error 153 opgelost. HoiHoiHoi
Nog even terug naar de content plugin. Deze toont de default thumbnail van de YouTube film. Ben je zelf de beheerder van de film, dan kun je bij het bewerken van de video een alternatieve thumbnail instellen. Soms / vaak is dat leuker dan de foto die YouTube zelf bedenkt.
Anton Goudsmit
De pagina https://antongoudsmit.nl/releases/ton-petit-plus is, grotendeels door AI, gemaakt als landingpage voor zijn album. Het is een template override van de artikel weergave van com_content item, afkomstig vanuit een blogweergave. Er volgen immers meerdere albums en om die eenvoudig toe te kunnen voegen komt er ook nog een template override voor het overzicht van zijn discografie.
De template override zit in templates/[template]/html/com_content/articles/default_release.php
Om daar te komen zit er logica in templates/[template]/html/com_content/articles/default.php
$categoryAlias = $this->item->category_alias ?? '';
if ($categoryAlias === 'releases') :
echo $this->loadTemplate('release');
endif;Dus... als de alias van de category, waar ik alle albums in ga plaatsen, gelijk is aan `releases`, zal default_release.php ingeladen worden.
En dat bestand zorgt voor het tonen van de body text en de opgegeven Custom Fields. In het verslag van JUG040 januari 2026 staat een mooie uitleg hoe je de inhoud van custom fields kunt oproepen. https://www.joomlacommunity.nl/nieuws/gebruikersgroepen/eindhoven/verslag-jug-eindhoven-27-januari-2026
Zo is er een custom field (subform - repeatable field) waarmee je de tracklist kunt tonen. Voor elke track op het album voeg je een rij toe met titel en lengte van het nummer. Voor de website van AntonGoudsmit.nl is een eigen helper geschreven waarmee de mapping die in genoemd verslag staat niet steeds opnieuw hoeft uit te voeren. De functie dat dat doet zit in getFieldSubformRows voor de Custom Fields van type SubForm
$tracks = [];
foreach (Helper::getFieldSubformRows('tracklist', $item->id) as $row)
{
$tracks[] = [
'title' => (string) ($row['title']->value ?? ''),
'duration' => (string) ($row['duration']->value ?? ''),
];
}Verderop in de template override wordt op twee plekken gebruik gemaakt van de array $tracks.
Bovenin de pagina wordt het aantal nummers op het album getoond middels count($tracks).
Verderop op de pagina staat een hele tracklist.
<?php if ($tracks) : ?>
<section class="layout:content c-release-page__tracklist padding-block:section" aria-labelledby="release-tracklist-heading">
<div class="width:content:md">
<div class="stack stack--xl">
<h2 id="release-tracklist-heading">Tracklist</h2>
<ol>
<?php foreach ($tracks as $track) : ?>
<li>
<?php echo htmlspecialchars($track['title'], ENT_QUOTES, 'UTF-8'); ?>
<?php if ($track['duration'] !== '') : ?>
<span class="c-release-page__track-duration"><?php echo htmlspecialchars($track['duration'], ENT_QUOTES, 'UTF-8'); ?></span>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ol>
</div>
</div>
</section>
<?php endif; ?>CSS zorgt er dan weer voor dat alles netjes getoond wordt.
Omdat de site niet meertalig is heb ik ervoor gekozen om niet met taalstrings te werken, maar de teksten hardcoded te verwerken.
CSSDay.nl
Begin juni dit jaar was het weer feest.. tenminste voor de liefhebbers van CSS. Twee dagen lang toffe sprekers vanuit diverse uithoeken van de wereld die bij elkaar kwamen om een volle zaal blij te maken met nieuwe dingen in CSS. Nieuwe dingen die we het komende jaar nog niet kunnen toepassen. :-)
Als bijvoorbeeld contrast-color(). Deze css functie zal zwart of wit teruggeven op basis van de ingevoerde kleur. De browser bedenkt zelf welke kleur de beste contrast geeft en komt dan met die kleur terug.
:root {
--cassiopeia-color-primary: #112855;
}
.card {
--card-bg: var(--cassiopeia-color-primary);
color: contrast-color(var(--card-bg));
background-color: var(--card-bg);
}Naar verwachting zal de color dan wit zijn. Wijzig je de kleur van --var-cassiopeia-color-primary naar een lichtblauwe kleur #cbdaf9 zal color zwart zijn. De browser doet dit zelf... tenminste.. de nieuwste browsers.
Op de website https://caniuse.com/?search=contrast-color kun je zien hoeveel procent van de browsers hier iets mee kan doen.
Mocht je wit/zwart toch iets te beperkt vinden, heeft Una Kravets een toffe blog post geschreven en color-mix() toegepast om de kleuren iets meer richting je eigen theme te kunnen trekken. https://una.im/advanced-contrast-color/
En zo waren er dus nog veel meer toffe dingen tijdens CSSDay die we volgend jaar gebruiken kunnen, maar nu al mee kunnen spelen.
Volgende keer
Er is vooralsnog geen volgende keer. Dit was de laatste. Dank voor de aandacht en tot ziens tijdens een van de komende JoomlaDagen