Verslag JUG Eindhoven 20 februari - YOOTheme 4.2 en 4.3

Het is een warme februari avond. Vanavond een demo avond over de wijzigingen in YOOTheme Pro. 

Joomla 5.0.3 - 4.4.3

Eerder vandaag is een bugfix / security release uitgebracht. Meer informatie via onze blogpost op https://joomlacommunity.nl/nieuws/versies/joomla-5-0-3-en-4-4-3-zijn-nu-beschikbaar

YOOTheme Pro 4.0, 4.2 en 4.3

Demo van Rachel Walraven over de leuke en handige nieuwe features in YOOTheme Pro 4.2 en 4.3. 

Nieuw in YOOTheme Pro 4.0

Parent Content Sources

Er zijn veel nieuwe features in YOOTheme Pro 4, maar de meest opvallende is het gebruik van Parent Content Sources. Nu kan je een container - zoals een sectie, rij of kolom - instellen als bron voor de informatie die je op wil halen. Binnen die sectie kan je elementen linken aan de bron. Dit scheelt database queries waardoor je site sneller wordt. Maar het wordt pas echt leuk als je met een bron werkt waar meerdere items in zitten, zoals een categorie met artikelen. In dat geval zal de broncontainer zichzelf herhalen tot de items van de bron op zijn.

Voorbeeld: Een categorie met daarin nieuwsberichten. Als je de sectie koppelt aan de bron 'categorie' en de elementen in de sectie aan die parent, dan zal de hele sectie voor ieder artikel herhaald worden. Gebruik je de rij als bron container dan zal de rij herhaald worden en gebruik je een kolom als bron parent, dan zal de kolom herhaald worden. Nu hoor ik je denken 'daar hebben we toch het grid element voor' en dat klopt ook deels. Maar daar kan je maar zoveel informatie in kwijt. In een kolom kan je onbeperkt aantal elementen toevoegen. Denk bijvoorbeeld aan een overzicht van huizen die verhuurd worden. In een overzicht kan je dan naast de naam van het huis, de foto en een korte omschrijving ook de custom fields op halen waarin je aangeeft voor hoeveel personen het huis is, of het een zwembad heeft en of er Wifi is bijvoorbeeld. 

Je kan zelfs bronnen nesten. Zo kan je een overzicht maken van een categorie met subcategorieën waarbij van iedere subcategorie een x aantal artikelen getoond worden. Heb je een nieuwe subcategorie? Dan wordt die gewoon toegevoegd aan de pagina.

Verbeterd sublayout element

Het sublayout element is verbeterd. Je kan nu ook een dynamische bron koppelen en een parallax animatie toevoegen.

Nieuw in YOOTheme Pro 4.2

Voorbeeldweergave

De voorbeeldweergave in YOOTheme is verbeterd. Nu laadt bij een wijziging niet de hele pagina opnieuw, maar alleen het element dat is aangepast. Hierdoor zijn wijzigingen veel sneller zichtbaar.

Builder wordt Pages

De Builder is (in naam) vervangen door Pages. YOOTheme maakt onderscheid tussen pages en posts (zoals in Wordpress). Pages zijn artikelen die niet gecategoriseerd zijn en post zijn artikelen die wel in een categorie staan.

Als je de pages opent in YOOtheme zie je een lijst met alle ongecategoriseerde artikelen. Dit kan je aanpassen bij de geavanceerde instellingen. Zo kan je een categorie maken die je ‘algemeen’ noemt bijvoorbeeld en YOOtheme deze laten gebruiken voor de pages.

Wil je een artikel opmaken met de builder die wel in een categorie staat, dan kan je in het onderdeel Pages zoeken op de titel.

Ook heel fijn is dat je nu artikelen kan aanpassen vanuit de YOOTheme omgeving. Klik op de 3 puntjes achter de naam van het artikel en het Joomla artikelbeheer opent in een pop-up venster. Je kan zelfs vanuit de Pages nieuwe artikelen aanmaken. Dit scheelt een boel heen en weer klikken bij het opzetten en beheren van een website.

Zit je op een pagina in de preview die je wilt aanpassen? Klik dan op de Builder knop bovenaan het Pages gedeelte en ga los.

Heb je een meertalige website? Binnen de page panel kan je op taal selecteren.

Templates verbeteringen

Met het aanpassen van de Builder/ Pages is ook het Templates onderdeel aangepast. Voorheen moest je eerst in je preview naar de juiste pagina navigeren voor je de template aan kon passen. Lastig als je niet meer precies wist op welke pagina die ene template ook alweer gebruikt werd. Nu opent de preview een bijpassende pagina als je op de naam van de template klikt. 

Modules

Ook het onderdeel Module is in deze aanpassing mee genomen. Klik op een (builder)module en de builder opent. Klik je op een ander soort module dan openen de instellingen van deze module zodat je dingen kan aanpassen. Dit zat eerst op een tabblad in de module. Die is nu verwijderd. 

Ook kan je vanuit de Module gedeelte van YOOTheme bestaande modules aanpassen en nieuwe modules toevoegen. Net zoals bij Pages.

Overig

De ID, class en attributen van een element kan je nu ook dynamisch inladen. Zo kan je in het artikelbeheer een veld maken waar je de naam van een class of ID kan invullen of selecteren en deze in een element inladen om er bepaalde opmaak aan te koppelen.

Nieuw in YOOTheme 4.3

Verbeterde uitlijning

Herken je dat, dat je een aantal panels naast elkaar hebt staan, maar dat ze niet allemaal even hoog zijn, laat staan dat de buttons uitlijnen? Dat is nu verleden tijd. Je kan panels nu aan laten passen aan de hoogte van de de kolom waar hij zich in bevindt. Zo zijn individuele panels in kolommen nu ook even hoog. Je kan zelfs aangeven welke deel van het panel moet uitbreiden om die hoogte te bereiken; de image of de content (standaard). Dit werkt ook bij Card of Tile stylen. Het werkt zelfs als er meerder elementen in een kolom staan.

In een Grid element kan je op dezelfde manier aangeven dat de content moet uitbreiden om de buttons op gelijke hoogte te krijgen. hier is het niet nodig in te stellen dat het panel zich aan de hoogte van de kolom moet aanpassen, want dat deden ze al.

Ook afbeeldingen en video elementen kan je nu in hoogte automatisch aan laten passen aan de hoogte van de kolom. Zo worden uitlijningen lekker strak. Het is ook mogelijk om foto's en video's de hoogte van de viewport in te laten nemen. 

Altijd transparante header

Als je een hero-sectie (die direct onder de navigatie) transparant maakt dan loopt de achtergrondkleur of -afbeelding van die sectie door onder het menu. Als het menu sticky is en je gaat scrollen, dan neemt de menubalk weer de ingestelde kleur aan. In 4.3 is het mogelijk om deze balk altijd transparant te houden. Je kan dit instellen bij de Header instellingen. Maar wat nu als je hero sectie heel donker is, maar daarna een sectie komt met een licht achtergrond? Gelukkig kan het menu zich aanpassen aan de instellingen van de sectie en zelfs het element waar hij overheen valt wat betreft de tekstkleur instelling. In de sectie of element instellingen kan je de tekstkleur aangeven (licht of donker) en het menu pakt dat automatisch over.

In de demo zagen we wel dat het heel erg van je ontwerp afhangt of dit een mooie functie is, want een menu met een transparante achtergrond over tekst is niet meer echt leesbaar. Dan kan het handiger zijn om de achtergrond van je navigatie in de stijle semitransparant te maken, bijvoorbeeld wit met een opacity van 80%.

Slider en slideshow parallax effect

Je kan nu sliders en slideshows met een parallax effect laten scrollen. Dus terwijl jij naar beneden scrolt scrol je horizontaal door de slides/ slideshow. Het zou zo moeten werken dat de pagina stopt met scollen als de slider of slideshow de bovenkant van de viewport bereikt en dan horizontaal verder scrollt tot het laatste element. Daarna zou de pagina weer zoals normaal verder moeten scrollen. Dit werkte in de demo alleen niet. Als we gevonden hebben wat er fout ging zullen we dat hier melden.

WVTTK

Grote vraag die bij ons allen naar voren kwam is de wens naar een workshop over "How to start with YOOTheme Pro". We hebben dit doorgegeven aan de programmamakers van de JoomlaDagen. Los daarvan is er op dinsdagavond 27 februari een hele avond YOOTheme bij JUG076. Aanmelden via https://joomlacommunity.nl/agenda/overige/event/776-yootheme

Dr. Joomla

• vraag: Vanuit formulieren gemaakt met RSForms Pro komt de laatste tijd veel spam submissions binnen. Er wordt reCaptcha v2 gebruikt. Kan ik beter v3 gebruiken of iets anders?
  antwoord: vervelend dat de botjes je formulier gevonden hebben. Drie adviezen die zouden kunnen helpen:
  1. Wijzig de url van de pagina waar het formulier op staat. De oude url met form is daardoor niet meer vindbaar en de botjes zullen vertrekken.
  2. Vervang Google reCaptcha v2 door Google reCaptch v3. Deze is net een tikje beter in het afvangen van boefjes
  3. Implementeer een Honeypot die een voor de bezoeker onzichtbaar veld plaatst en ook leeg moet blijven. Botjes gaan dit veld vullen. 
• vraag: Via de website https://realfavicongenerator.net/ een set van favicons gemaakt voor volvovk.nl en zijn ze niet altijd zichtbaar. Hoe komt dat?
  antwoord: De website bevat op dit moment, naast een dubbele registratie van de realfavicon icons, een paar andere verwijzingen naar favicons. Probeer eerst middels je template de favicons te unsetten, of plaats favicons op de genoemde plek. Dat zal 404 hits voorkomen. Daarnaast levert realfavicongenerator te veel favicons. Lees de blog post "How to Favicon in 2024: six files that fit most needs" via https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
• vraag: Ik heb een multilinguale website met Hikashop. Op welke manier kan ik de productbeschrijvingen meertalig aanbieden?
  antwoord: Meerdere oplossingen mogelijk:
  1. Verplaats alle categorieën naar de categorie Engelstalig en dupliceer die naar Nederlandstalig. Verwerk in beide categorieën de producten in eigen taal. 
  2. Gebruik het component Falang om bij bewerken van een product te switchen naar de andere taal.
  3. Maak een custom field voor de velden die vertaald moeten worden. Zorg er met PHP logica voor dat de tekst van de andere taal gekozen wordt, daar waar nodig en gebruik het originele veld als fallback. => deze oplossing geniet de voorkeur daar alle content NL en EN op dezelfde pagina beheerd wordt.  

Volgende keer

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

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