Verslag JUG Eindhoven 4 juli
Maandag 4 juli, mooie zonnige avond.
YOOTheme Pro
Een demo van René Kreijveld waar hij middels YooTheme Pro de Joomla Cassiopeia template gaat trachten nabouwen. https://yootheme.com/page-builder Na installatie heb je eigenlijk twee producten:
- YOOTheme Pro Template
- YOOTheme Pro PageBuilder
Twee afzonderlijke producten die zeer nauw verweven zijn.
De stappen die René normaliter doorloopt met de bouw van nieuwe sites. Na de installatie van YOOTheme.
- Kies een style => meestal de UIKit Style. Of anders eentje die al ver overeenkomt met het aangeleverde design
- plaats vinkje bij "Bekijk een voorbeeld van alle UI-elementen".
- dit kan ook per component getoond worden.
- per component kun je veel elementen aanpassen. Deze wijziging wordt dan direct doorgevoerd door de gehele website waar dit element toegepast wordt.
- Ga naar Ontwerp om hoofdzaken van de website in te stellen:
- Website => waaronder logo en logo tekst
- Header => waaronder de optie "zoeken"
- Ga naar Menu's
- Selecteer het menu dat getoond moet worden, voor zowel navbar positie en mobiel menu
- Instellingen
- invoeren API sleutel. Deze is bij vervolgstappen nodig.
- Inhoud > Artikelen
- Geef titel en sla artikel op
- Daarna verschijnt button "YOOTheme Builder" button... druk daar op en start de YOOTheme Pro PageBuilder
- Kies een bestaande layout (nu al 396 stuks) of creëer een eigen
- Na opslaan kun je ervoor kiezen om de demo afbeeldingen op te slaan naar lokaal.
- Wijzig daarna het standaard menu item Home naar de nieuw aangemaakte pagina.
- Terug naar de YOOTheme Builder van het artikel Home. De pagina bestaat uit twee kolommen.
- Links een schematische weergave van de pagina waarbij je items kunt slepen en toevoegen.
- Rechts de weergave zoals op desktop zichtbaar is. Deze weergave kan linksonder de linkerkolom gewijzigd worden naar tablet of mobiel device.
- Om de pagina meer op Cassiopeia met demodate te laten lijken worden rijen verwijderd en items toegevoegd.
- Bij het toevoegen van een element verschijnt een modal popup met elementen waaruit gekozen kan worden.
- Na de HERO in Joomla Cassiopeia verschijnen drie blokken.
- De drie items komen uit de category Joomla
- Voeg vanuit de YOOTheme Builder in de linkerkolom een nieuwe rij toe
- geef de rij een naam
- kies voor een grid layout... bijvoorbeeld 1 kolom
- voeg een element toe... een grid element
- klik op het grid element en zie dat er items toegevoegd kunnen worden.
- vanuit de instellingen zie je dat er standaard drie kolommen gebruikt worden met een titel en introtekst
- je kunt nu een voor een items toevoegen... maar... we willen inhoud tonen vanuit artikelen
- klik op tabblad geavanceerd en voeg dynamische content toe. Kies in dit geval uit "Custom Articles"
- Haal artikelen uit category Joomla
- Speel met de settings voor aantal, volgorde, tags en meer.
- Titel => selecteer dynamisch titel
- Meta => leeg laten
- Inhoud => selecteer dynamisch Inhoud of Teaser. En beperk op aantal karakters.
- Afbeelding => selecteer dynamisch intro image
- Link => selecteer dynamisch link - artikel. En wijzig daarna met tekst-before "Lees meer"
- Titel weergeven => vinkje verwijderen
- Kies bij Paneel voor _Card Default_ en voeg padding toe, maar kies ervoor om de afbeelding uit te lijnen zonder padding.
- Door naar de volgende rij die in Joomla Cassiopeia verdeeld is in twee kolommen
- Voeg een nieuwe rij toe en kies bij de layout voor twee kolommen verdeling 3:1
- Voeg aan de rechterzijde de modules toe die ook toegepast worden bij Cassiopeia
- Bouw in de linkerkolom een dynamische grid, zoals we dat ook gedaan hebben bij het eerdere blok. Een opsomming van speciale artikelen
- Kies voor Grid element en kies weer voor dynamische artikelen
- Standaard toont het grid drie kolommen. Wijzig dit naar een kolom via de instellingen van het raster.
- Load featured items only... dus alle speciale artikelen, gesorteerd op volgorde speciale artikelen
YOOTheme Templates - blog pagina
Standaard weergaven voor verschillende type content. Bijvoorbeeld voor diverse category blog weergaven.
- Ga naar YOOTheme Pro => Templates en maak een nieuwe template.
- Geef een naam en selecteer Category Blog en kies bepaalde category
- Ga dan naar menu item en selecteer de button Bouwer om de blog pagina te maken
- Ga naar bibliotheek en kijk of er een layout bestaat die er al op lijkt. Of bouw hem met de hand op.
- Bouw met de hand op en kies voor een grid
- Standaard drie kolommen. Wijzig naar twee kolommen
- Ga naar geavanceerd en kies voor Dynamische Content > Artikelen. Dit zijn de artikelen die het bestaande menu item moet laten zien,
- Configureer elk item de titel, inhoud, plaatje
- Configureer de layout, bijv card default met padding (m.u.v. de afbeelding padding)
YOOTheme Templates - blog artikel
- Ga naar YOOTheme Pro => Templates en maak een nieuw template
- Geef naam en selecteer artikel. Sla op
- Open het artikel vanuit het menu item van de template die we hierboven gemaakt hebben
- Bouw de layout met hand en selecteer de velden die je nodig hebt.
- Deze template wordt nu toegepast bij alle artikelen van de gekozen category.
Eigen custom fields toepassen
- Maak vanuit Joomla Administrator > Inhoud > Veldgroep een veldgroep Bloginfo aan.
- Maak vanuit Joomla Administrator > Inhoud > Velden een veld locatie aan, toegewezen aan de veldgroep Bloginfo en toegewezen aan de category Blog
- Ga naar een artikel in de category Blog en vul het veld locatie
- Ga naar YOOTheme Pro > Template en bewerk template = Blog artikel
- Voeg een nieuwe sectie toe genaamd Locatie
- Voeg een element toe genaamd text field en vul deze met dynamic > locatie
Voorbeeld van de makers zelf:
De ingrediënten en bereidingswijze zijn repeatable custom fields.
Voorbeelden van YOOTheme Pro implementaties
René is lyrisch over YOOTheme Pro. Je kunt er handig en snel mooie sites mee maken en veel dingen aan elkaar koppelen.
Wat opvalt... er zijn heel veel dingen mogelijk. Dit heeft tot gevolg dat er ook weer heel veel instellingen zijn.
Handige YOOTheme Links
- "More shortlink to Yootheme Pro" => https://morejoomla.com/products/yootheme-builder/more-shortlink
Dokter Joomla
- vraag 1. In de database zie je bf_… tabellen staan. Wat zijn dat voor tabellen en waar dienen die voor? Als je deze bf_ tabellen verwijderd blijft de website toch functioneren. Maar als je later kijkt zie je deze bf_ tabellen weer in de database staan.
- Deze tabellen zijn afkomstig van mysites.guru, een externe tool waarmee de site gemonitord wordt.
- In custom.css van test02.schijndelfilm.nl is
figure > img {max-width: 100%;height: auto;}toegevoegd. Maar ik zie nog steeds dat de foto's niet responsive zijn. De breedte wordt wel aangepast bij mobiel maar niet de hoogte.- Bij toepassing van de juiste HTML zal deze styling toegepast worden. Uitgezocht moet worden waarom de plaatsing van een afbeelding niet in een figure / img tag komt, maar in een span met gekke classNames
Volgende keer
De volgende JUG Eindhoven is op maandag 1 augustus. Het onderwerp van deze meeting en de mogelijkheid tot aanmelden is terug te vinden op https://joomlacommunity.nl/agenda/event/649-jug040-bijeenkomst-eindhoven
Vragen voor Dr. Joomla kun je kwijt als reactie onder de aankondiging.
Rapporteer
Mijn reacties