Waarschuwing
Kan map niet verwijderen. Pad: /data/sites/web/joomlacommunitynl/data/test.joomlacommunity.nl/public_html/cache/com_content
Bericht sluiten

| Door: Hans Kuijpers. | Categorie: Eindhoven.

Verslag JUG Eindhoven 7 februari

Het is maandag 6 februari met een ongekende luxe van maar liefst drie demo's / presentaties. Presentatie over de editor Brackets.io, presentatie over hetgeen mis kan gaan bij de upgrade van Joomla 3.10.3 naar 3.10.4 en een presentatie over Layout Overrides, JLayouts en custom css.

Brackets (brackets.io)

Een van de vele editors. Lichtgewicht, gebouwd met HTML, CSS en Javascript. Omdat het open source is kun je, net als bij Joomla, meehelpen aan de ontwikkeling ervan. Arjan Abbink laat zien wat je met deze editor kunt doen. 

View Brackets en CSS on Notist.

Joomla 3.10.3 => 3.10.4

Tijdens de vorige bijeenkomst van JUG040 had Rinse Janse een issue met het uitvoeren van de upgrade. Tijdens deze bijeenkomst zou er een demo volgen waarbij we allen konden zien waar er wat mis zou gaan met de update. Helaas... of anders geschreven, gelukkig. Bij de update naar Joomla 3.10.5 was er geen vuiltje aan de lucht. De upgrade ging prima en de site werkt als een zonnetje. Dus geen presentatie. 

Wel een tip voor de gebruikers van Akeeba Backup. Het is algemeen bekend in welke directory standaard de backups opgeslagen worden. De maker van de extensie weet dit en heeft deze directory afgeschermd met een .htaccess bestand die directe toegang tot deze directory verbiedt. De maker van de extensie voegt ook een random string aan de naam van de backup toe. En geeft een waarschuwing hierover dat het beter is de backup op te slaan in een directory anders dan de standaard directory. Het maakt eigenlijk niet uit welke, als het maar een andere is dan de standaard directory en eentje die niet voor de hand ligt. Vele hosting providers staan het ook toe om een directory te kiezen buiten het publiek bereikbare gedeelte van je hostingomgeving. Kies je daarvoor, dan voegt Akeeba Backup geen random string toe. Weer een stukje veiliger.

Alternate layout en css voor aanklikbare tiles. 

Op dit moment is de website schijndelfilm.nl nog gebouwd met Joomla 3. De beheerders zijn druk doende om de site om te zetten naar Joomla 4. Deze migratie biedt ze tevens de kans om wijzigingen door te voeren in de styling. De nieuw gekozen template is RSMatias van RSJoomla. Op de website van RSMatias zijn screenshots van dit design te vinden. Heel leuk, maar geen enkele heeft de optie zoals toegepast op de website https://oeteldonk.org, volledig aanklikbare tegels. Hans Kuijpers laat in een live demo zien hoe dit vanuit Joomla Administrator verzorgd kan worden. 

{image path="images/gebruikersgroepen/eindhoven/jug040-22020207-tegel-oude-situatie.png" caption="Oude situatie"}

{image path="images/gebruikersgroepen/eindhoven/jug040-22020207-tegel-nieuwe-situatie.png" caption="Nieuwe situatie"}

De nieuwe situatie is tot stand gekomen door het maken van een layout override, JLayouts en custom css. Alle overrides zijn gemaakt vanuit Joomla Administrator. De wijziging die plaatsvindt is heeft betrekking op de Category Blog weergave op de homepage. 

Layout Override

  • Ga naar Joomla Administrator > Systeem > Templates > Website templates > "RSMatias! gegevens en bestanden"
  • Tabblad "Tekstverwerker" > html > com_content > => de directory category is niet aanwezig, dus bestaat er momenteel nog geen override voor de category blog weergave
  • Tabblad "Maak overrides" > Componenten > com_content > category => de tmpl bestanden van deze view worden gekopieerd naar de template
  • Tabblad "Tekstverwerker" > html > com_content > category => vele nieuwe bestanden, maar voor nu is alleen blog.php voor ons interessant.
  • Klik op blog.php om het bestand te openen. Zoek naar het stukje code <?php if (!empty($this->intro_items)) : ?--> tot en met <?php endif; ?>
  • Vervang het tussenliggende stuk door < echo LayoutHelper::render('template.cards', ['items' => $this->intro_items]); ?>
    • Dit stukje code roept een JLayout, een klein stukje code dat op meerdere plekken gebruikt kan worden, op.
    • De code staat in de template map html/layouts/template/cards.php
    • Het stukje $this->intro_items wordt als 'items'meegezonden in een array().

JLayout

  • Ga naar Joomla Administrator > Systeem > Templates > Website templates > "RSMatias! gegevens en bestanden"
  • Omdat de JLayout waar we hierboven naar verwijzen nog niet bestaat en de directory ook nog niet, maken we die bij deze aan.
  • Klik op de button "Beheer mappen"
  • Selecteer links de parent directory, in dit geval html > layouts
  • Geef rechts in het veld de naam "template" en druk op "Maken"
  • Klik op de button "Nieuw bestand"
  • Selecteer links de parent directory, in dit geval html > layouts > template
  • Geef rechts in het veld de naam "cards" en kies het type = .php en druk op "Maken"
  • Het nieuwe bestand is aangemaakt en de editor staat direct open. 

De template RSMatias is gebouwd op basis van Bootstrap 5 en we gaan een grid maken op basis van de HTML zoals getoond bij Grid Cards (https://getbootstrap.com/docs/5.0/components/card/#grid-cards).

JLayout template/cards.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.rsmatias
 *
 * @copyright   Copyright (C) 2022 SchijndelFilm
 * @license     GNU General Public License version 3 or later
 */

defined('JPATH_BASE') or die;

use Joomla\CMS\Layout\LayoutHelper;

/** @var array $displayData */
extract($displayData, EXTR_OVERWRITE);

$items = $items ?? false;

if($items) :
?>
<div class="container container--films">
  <div class="row row-cols-1 row-cols-xl-2 g-4">
    <?php foreach($items as $item): ?>
      <?php echo LayoutHelper::render('template.card', ['item' => $item]); ?>
    <?php endforeach; ?>
  </div>
</div>
<?php 
endif;

JLayout template/card.php

Zie dat er wederom een JLayout opgeroepen wordt. Ditmaal met de naam van een enkele card en die vullen we met een enkel $item. Herhaal de eerste stappen, maar sla het aanmaken van een directory over, want die bestaat al. Maak wel een bestand aan met de naam card.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.rsmatias
 *
 * @copyright   Copyright (C) 2022 SchijndelFilm
 * @license     GNU General Public License version 3 or later
 */

defined('JPATH_BASE') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;

/** @var array $displayData */
extract($displayData, EXTR_OVERWRITE);

$item = $item ?? false;

if ($item) :
?>
  <div class="col">
    <div class="card">
      <?php echo LayoutHelper::render('template.figure', ['figureClass' => 'card-img-top', 'item' => $item]); ?>
      <div class="card-body">
        <h2 class="card-title"><?php echo HTMLHelper::_('link', Route::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catid, $item->language)), $item->title); ?></h2>
        <div class="card-text">
          <dl>
            <div>
              <dt class="sr-only">Datum</dt>
              <dd><?php echo HTMLHelper::_('date', $item->created, Text::_('d F')); ?></dd>
            </div>
            <div>
              <dt class="sr-only">Tijd</dt>
              <dd><?php echo HTMLHelper::_('date', $item->created, Text::_('H:i')); ?></dd>
            </div>
            <div>
              <dt class="sr-only">Locatie</dt>
              <dd><?php echo $item->category_title; ?></dd>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </div>
<?php
endif;

JLayout template/figure.php

En ook hier wordt een JLayout opgeroepen. Het bestand html/template/figure.php.

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.rsmatias
 *
 * @copyright   Copyright (C) 2022 SchijndelFilm
 * @license     GNU General Public License version 3 or later
 */

defined('JPATH_BASE') or die;

use Joomla\CMS\Layout\LayoutHelper;

/** @var array $displayData */
extract($displayData, EXTR_OVERWRITE);

$item = $item ?? false;

if ($item) :
  $images = json_decode($item->images);

  if (!empty($images->image_intro)): ?>
    <figure class="<?php echo $figureClass ?? ''; ?>">
      <?php echo LayoutHelper::render('joomla.html.image',
              [
                'src'      => $images->image_intro,
                'itemprop' => 'image',
                'alt'      => empty($images->image_intro_alt) && empty($images->image_intro_alt_empty) ? false : $images->image_intro_alt,
              ]
            ); ?>
    </figure>
  <?php
  endif;
endif;

JLayout joomla/html/image.php

In bovenstaande en laatste JLayout wordt werderom een JLayout opgeroepen. En ditmaal eentje vanuit Joomla Core. https://github.com/joomla/joomla-cms/blob/4.0-dev/layouts/joomla/html/image.php

JLayouts toegelicht

De opbouw van de JLayouts zijn als volgt:

  • Start met DOCBlock
  • defined() => om directe toegang tot het bestand te voorkomen
  • twee regels aangaande $displayData => normaal werk je in een JLayout met $displayData. Door deze in de PHP functie extract() te plaatsen kun je gebruik maken van de namen die je als variabele in de array() meegegeven hebt bij het oproepen van de JLayout.
  • een check of $items of $item gezet en niet leeg is...en anders is het false. 
  • een wrapping if-then statement... en als die niet false is, mag je door naar de rest
  • vervolgens code die afhankelijk is van de bedoeling van de JLayout. 

Custom CSS

Zoals bij vele templates bevat ook deze een bestand genaamd custom.css welke gevuld kan worden met eigen css overrides. De overrides in dit geval zijn:


.container--films .col {
  display: flex;
}

.container--films .card {
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.container--films .card figure {
  flex: 1;
  margin-bottom: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.container--films .card:hover img {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
  -webkit-transition: all 0.35s ease-in;
  -moz-transition: all 0.35s ease-in;
  -o-transition: all 0.35s ease-in;
  transition: all 0.35s ease-in;
}

.container--films .card img {
  max-width: 100%;
  border-radius: inherit;
  -webkit-transition: all 1.2s ease-out;
  -moz-transition: all 1.2s ease-out;
  -o-transition: all 1.2s ease-out;
  transition: all 1.2s ease-out;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.container--films .card figure + .card-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.container--films .card-title {
  margin-top: auto;
  margin-bottom: .5rem;
  color: currentColor;
}

.container--films .card-title a {
  color: currentColor;
}

.container--films .card-title a::after {
  position: absolute;
  inset: 0;
  content: '';
}

.container--films .card-body {
  padding: 1.5rem;
  color: #fff;
  text-shadow: 0 0 1rem #000;
  background-image: linear-gradient(
    180deg,
    hsla(0, 0%, 35.29%, 0) 0%,
    hsla(0, 0%, 34.53%, 0.034375) 16.36%,
    hsla(0, 0%, 32.42%, 0.125) 33.34%,
    hsla(0, 0%, 29.18%, 0.253125) 50.1%,
    hsla(0, 0%, 24.96%, 0.4) 65.75%,
    hsla(0, 0%, 19.85%, 0.546875) 79.43%,
    hsla(0, 0%, 13.95%, 0.675) 90.28%,
    hsla(0, 0%, 7.32%, 0.765625) 97.43%,
    hsla(0, 0%, 0%, 0.8) 100%
  );
}

.container--films .card-text dl,
.container--films .card-text dl * {
  margin: 0;
}

De css overrides zorgen ervoor dat de afbeelding groeit bij mouse-over (transform: scale()) en de tekst leesbaar blijft door een semi-transparante linear-gradient.

Volgende keer

De volgende JUG Eindhoven is op maandag 7 maart. Het onderwerp van deze meeting en de mogelijkheid tot aanmelden is terug te vinden op https://www.joomlacommunity.nl/agenda/event/644-jug040-bijeenkomst-eindhoven

Vragen voor Dr. Joomla kun je kwijt als reactie onder de aankondiging.

Mijn reacties

1000 Resterende tekens


Deze site wordt beschermd door reCAPTCHA en Google Privacybeleid en Servicevoorwaarden zijn van toepassing.

© Copyright 2008