D3 les 04

Media vervolmaking

Shadowbox

Met Shadowbox tonen we een mooi alternatief voor de colorbox. Aan u de keuze..

Installeren...

Bij de instellingen zie je in welke map je straks de third party moet FTP'en.

Klik op de link, download, unzippen en overbrengen in de juiste map..

Je krijgt zo iets..

Maak nu een inhoudstype aan met een afbeeldingsveld (onbeperkt). Zet de weergave op Shadowbox.

Je kunt die instellen:

Wil je tekst erboven (title) dan moet je bij je inhoudstype dit voorzien:

Juicebox met commentaar en opmaak

Juicebox kennen we al. Installeren en activeren. Hier gaan we echter commentaar toevoegen en een opmaak geven...

Zet de weergave op Juicebox.

Maak dat de alt en de title getoond wordt. Je kunt trouwens met de andere accordeon tabs de opmaak instellen.

Ik heb ondervonden dat de alt en title niet altijd worden overgenomen vanuit het inhoudstype. Je moet het desnoods via bestanden doen. Als het zo werkt, dan mag je het volgende overslaan..

Hier kan je de velden invullen...

als je bij structuur=> bestandtypes => afbeeldingen extra velden toevoegt. Maak dat de systeemnaam exact dezelfde is!

Fancy Box

De fancy box is beter dan colorbox, met meer mogelijkheden. Knap.

er zijn heel wat instellingen...

We vinken de thumbnails, media en buttons in.

Het is third party.

Je vindt het op hun site. downloaden, unzippen en FTP'en..

bij het inhoudstype kan je nog van alles instellen. (ik stelde wel een scriptingsfoutje vast)

Colorbox Trigger en Popup van velden.

De colorbox wordt uitgebreid naar andere velden (meer dan één als je wilt). Zo kan je tekst als een popup voorstellen.

Het principe is als volgt... Er is een veld dat als link dient (trigger). Hier kies ik de body. Als je daar op klikt krijg je een popup veld te zien. Je kunt ook de body als popup tonen inclusief de afbeeldingen er van. Maak bij de instellingen van de colorbox dat 'enable colorbox inline' aangevinkt staat.

 

Na installatie is dit een cruciale stap. bij weergave stel je de trigger groep en de popup(groep) in.

Laat de pair ID staan zoals ze staan. De popup en de trigger moeten dezelfde ID hebben.

Media Front

In deel 2 hebben we video's geïntegreerd vanuit bvb youtube. Hier gaan we 'eigen' video's tonen, met een bijhorende afbeelding. Media Front aan de hand van deze handleiding:https://www.drupal.org/node/1563580

Na installatie maak je een inhoudstype aan met een upload veld en een afbeeldingsveld. Dit laatste zal getoond worden als de speler niet actief is.

Je moet het upload veld zo instellen:

Het afbeeldingsveld:

Vooraleer je de weergave kiest moet je een voorinstelling maken van de speler.

Je stelt de hoogte en breedte in...

Nu kan je een video bekijken die jouw eigendom is... Je kunt er bv eentje maken met Windows Movie Maker en daarna omzetten naar een mp4 bestandje...OSM speelt namelijk geen wmv bestandjes af.

Javascript

Javascript is een clientsided scripting taal. Dit wil zeggen dat ze op de computer van de gebruiker wordt uitgevoerd. Zoals gewoonlijk verwijs ik naar W3school om de goede (Engelstalige) handleidingen.

Naast Javascript is er ook JQuery. Dit is net zoals bootstrap een kant en klaar pakket (library) waar je dan gebruik van kunt maken als je de juiste syntax gebruikt. Jquery kan ook als CDN (content delivery network) gebruikt worden. 60% van de sites zouden er gebruik van maken.

Drupal en zijn modules maken veelvuldig gebruik van Javascript én JQuery, zonder dat je er notie van moet hebben. Als gevorderden wil ik wel dat je enkel basisprincipes kent. Zo wordt elke javascript actie uitgelokt door een gebeurtenis of een 'event'. Klikken op een foto, het laden van een pagina, klikken op een knop, verzenden van een forumier,.. Zijn allemaal events. Koppel er dan nog een actie aan vast en je bent vertrokken..

Javascript werkt volgens dit principe: iets veroorzaakt een actie. Hier krijg je bij klikken een melding. (stom, maar didactisch verantwoord hé)

Zo doe je dit. Zet je pagina fiilter wel op PHP.

Plezanter wordt het in deze zelf gemaakt hoverfoto's. Als je er over beweegt, dan wijzigt de foto. Hieronder zie je de twee foto's onder elkaar, maar in het echt staan ze over elkaar. (Bo Derek trouwens)

Dit is de code. Welke event wordt er uitgelokt? Er zijn er 2.

Een derde voorbeeld is een aanloop naar volgend thema over cookies. Deze pagina vraagt naar je naam.

Telkens je daarna nog op de pagina terecht komt geeft hij een melding. Geen wereldnieuws, maar kijk eens naar de cookie in je browserbestanden.

Zo worden er cookies gemaakt, opgevraagd en verwijderd..

In het vierde voorbeeld gaan we ons niet meer moe maken met code. We gaan een typische module installeren de bijna puur javascript is. Installeer Cloud Zoom. Je ziet dat er ook een third party aan te pas komt.

Uitpakken en FTP'en.

Maak een inhoudstype aan met afbeeldingen (meerdere). Bij de weergave kies je voor Cloud zoom.

Je kunt bij de instellingen ook een galerij aanmaken. De zoom area image style bepaalt hoe groot de zoom is.

In mijn geval is de originele foto tamelijk groot, vandaar dat de zoom groot is.

Kijk eens naar de js bestanden die je daarvoor nodig hebt... en dankt de Heer voor deze open source...

Er zit wel een klein typfoutje in de code:

 

Tooltip via QTip

Javascript (jquery) kan ook van het net gehaald worden. Om dit aan te tonen, nemen we de tooltip module van Drupal; Qtip.

Maak een standaard weergave aan.

Zet ook in d efull html, de qtip aan, anders filtert CKEditor ze weg.

De volgorde kan je instellen.

Als je kijkt naar de instellingen dan zie je dat we gebruik gaan nemen van een javascipt delivery site.

Nu moet je nog de code inbrengen op een pagina die je wilt gebruiken. Dit doe je als volgt (info uit de readme.txt file van de module)

En ja hoor...Kijk eens naar de broncode van de pagina. Je zult zien waar de javasript code werd gehaald.

Subthema's

In deel 1 hebben we leren updaten en upgraden. Hieronder nog een stukje herhaling. Thema's worden bij een update en upgrade ook soms grondig aangepakt. In dit stuk leer je hoe je de wijzigingen die jij hebt aangebracht vrijwaart van wijzigingen van buitenaf. We maken daarvoor een subthema.

Bij beschikbare updates zien we bijvoorbeeld dit:

Via 'cron' kijk je of er recnte updates mogelijk zijn.

Upgrades zijn meestal compleet nieuwe installaties, meestal manueel. De werkwijze is net zoals bij Back-up en migrate. Je back-upt je site. Bewaar de mappen die belangrijk zijn (sites), alsook robots.txt en .htaccess, en zet de nieuwe versie op je hosting. Zie Drupal Deel 1.

Updates en upgrades komen ook voor bij thema's. Als je daar wijzigingen hebt aangebracht ben je die soms kwijt na een update of upgrade.Bij Drupal is het dan ook aangewezen dat je de wijzigingen die je hebt aangebracht in het subthema bewaart. We zie dat in de mappenstructuur van Marinelli er een map 'subtheme' aanwezig is. Her principe is eenvoudig. Alle opmaak wordt uitgevoerd uit het hoofdthema, tenzij er een gelijkaardig bestand in de map subtheme aanwezig is. Dan wordt dit uitgevoerd.

De map bevat initieel maar enkele bestanden. subtheme.info is zelfs op non actief gezet door er een txt bestand van te maken.

We kopiëren de map 'subtheme' en plaatsen het naast marinelli.

Subtheme gaan we herbenoemen naar marinelli2.

De map bevat het bestand subtheme.info.txt Waar je volgende wijzigingen aanbrengt:

Zo geef je aan Drupal de opdracht om marinelli2 te nemen voor zijn opmaak.

Wijzig ook de nepnaam naar marinelli2.info. Geen txt meer laten staan?

De voorbereidingen zijn nu voltooid. Nu kunnen we de opmaak aan onze wensen aanpassen. Wat gaan we nu wijzigen? De opmaak zit hem vooral in het layout.css bestand in de map CSS. Kopieer dit.

Dit moet in een gelijkaardige map (css) worden aangebracht. Maak die map en plak het bestand layout.css.

We testen nu eens onze site met marinelli2 als standaard.

Als je weer alles ziet zoals vroeger dan is het goed. We hebben tot hiertoe enkel het thema ontdubbeld, zonder opmaak wijzigingen. Nu gaan we de layout.css wijzigen. We moeten eerst te kennen geven dat we dit bestand (uit het hoofdthema )willen overschrijven.  Open het bestand, je zult zien dat er puntkomm'as voor de regels staan. dit is om ze te desactiveren. als je een ";" weg doet dan word thet actief. We doen dit voor layout.css. , want dit gaan we wijzigen.

Nu kunnen we het gekopieerde bestand wijzigen/

Ik werk hier met notepad++ . Ga naar body.marinelli in de css.

en wijzig naar keuze.

Leeg de cache, bij instellingen => prestaties

De site heeft een andere achtergrond.

Je ziet dat het een heel karwei is om met subthema's te werken. Als je ordentelijk te werk gaat, kan je natuurlijk rechtstreeks in het moederthema werken. Weet dan dat met een update van het thema er vorig werk kan verloren gaan....

Context

Context is een module die het uizicht van je site overneemt van de core instellingen. Je kunt met blokken een plaats toewijzen en voorwaarden instellen qua wel of niet tonen van een blok. Via blokken kan je ook in de core menu's instellen. Al vlug wordt de zaak echter onoverzichtelijk en soms zijn er specifieke zaken die je niet met de core kunt. Context heeft daar een oplossing voor.

We installeren. Dat context zorgt er voor dat je het uiterlijk van je site volgens een tijdsregeling kunt aanpassen...Enkel de vertaling laat ik ongeactiveerd staan.

Context werkt met voorwaarden en acties. Een beetje zoals Rules. Je ziet dat je dus ook al naar gelang de gebruiker van uitzicht kunt switchen...

We gaan iets intstellen voor het inhoudstype cursussen

Nu gaan we het uitzicht bepalen. Je ziet alle blokken en daarnaast zie je alle items die instelbaar zijn.

We selecteren een blokje..

en zetten het navigatiemenu ook in de eerste zijbalk.

Het resultaat.

Je kunt ook gebieden uitsluiten van weergave. De blokken in de core en die van context komen inderdaad nu samen. Mijn ervaring is echter dat je beter de blokken in de core uitschakelt.

Zelfs de CSS injector is instelbaar.

Nu gaan we op een view de blokken instellen:

 

een beetje van alles:

Het resultaat:

Ook heb ik op de voorpagina een extra menu gezet. Dit doe je door de voorwaarde path te gebruiken en <front> in te stellen.

Conclusie. Context wordt enorm veel gebruikt (meer dan een miljoen geregistreerde websites maken er gebruik van. Schakel alle blokken uit en begin met context. Je kunt trouwens een algemen sitecontext instellen en daar dan van afwijken. Context blijkt ook sneller te zijn dan de blokken in de core. Telkens een pagina wordt geladen overloopt de php alle blokken van de core en kijkt of ze werden toegewezen. Bij context is dit een ander systeem, heb ik op de fora gelezen..

Veldinhoud beheren

In deze les gaan we technieken leren om inhoud in een veld op automatische wijze toe te kennen. Feeds en Editable views kunnen ook inhoud input aan, maar deze modules hebben we reeds gezien.

Onderstaande print heeft zowat alles in huis om een overzicht te krijgen van de mogelijkheden. Het gaat over een inschrijving voor een BBQ...

1) Automatische node titel

Via Auto Node Title wordt de titel automatisch gegenereerd op basis van drie andere velden: Naam, aantal volwassenen en aantal kinderen. De titel wordt zelfs als veld verborgen voor de input. In het webshop gedeelte zullen we daar later ook gebruik van maken om producten automatisch bvb de kleur en maat mee te geven. vb Tshirt (blauw, XL)

met als resultaat...

2) Serial field

Het inschrijvingsnummer wordt automatisch gemaakt door een autonummeringsveldje.

Dit gebeurt door de module Serial Field. Ideaal om bvb factuurnummers te genereren.

3) Views Bulk operations (VBO)

Met deze module kan je in een view een selectieblokje creëren voor elke node in de tabel. Daarmee selcteer je de nodes die je wilt bewerken. Dit gaat van verwijderen, depubliceren,.. tot en met de inhoud wijzigen. Wij focussen ons op dit laatste.

Om dit te bekomen voeg je eerst het veld in:

Daarna verfijn je.

Een waarde instellen voor de geselecteerde nodes kan als volgt: (je kunt ook alle nodes selecteren)

 

Je kunt ook via search and replace in een tekstveld woorden vervangen

het resultaat...

4) Standaard waarden

Eén van de meest gekende manieren om inhoud aan een veld toe te kennen is een standaardwaarde instellen. Er zijn 2 modules die een uitbreiding zijn van deze standaard werkwijze. Default token zorgt er voor dat je dynamisch kunt werken door de inhoud vna andere velden te bebruiken via tokens. Field Defaults wordt gebruikt om de standaardwaarde te wijzigen en in te stellen. Tot daar geen probleem, maar wat doe je met nodes die reeds bestaan. Standaardwaarden worden maar ingevuld bij het aanmaken van nieuwe inhoud. Met deze module kan je met terugwerkende kracht op bestaande nodes de velden een standaadwaarde geven. Merk bij onderstaande print de mogelijkheden op.

5) Computed fields (berekende velden)

Deze module is tot heel wat in staat.

We berekenen eerst het toaal aantal personen die per inschrijving komt.. 2 + 4 = 6..

De instellingen van dit veld vergen een woordje uitleg...De display code toont dat $entity_field_item['value'] de variabele is waar we mee moeten werken. Het voorbeeld spreekt boekdelen. Kijk hoe je naar een veldwaarde verwijst. Je voegt zelf zoveel variabelen toa als je wilt. Tel ze op en ken ze toe aan de $entity_field_item['value'] Klaar. Vergeet nooit een $ teken te plaatsen voor een variabele. PHP werkt zo...

Computed field tools is een module die met terugwerkende kracht alle nodes waar het veld in voorkomt herberekent. Bij structuur is er een optie bijgekomen.

Als tweede oefening berekenen we het totaal bedrag. Je ziet dat we de kinderen aan de helft van de prijs rekenen.

Als derde oefening van berekende velden gaan we zelf HTML schrijven, afhankelijk van een waarde  in een ander veld. Als er korting is van 20 € (veld korting bevat dan 20), dan gaan we een leuke kortingsfiguur tonen, anders tonen we niets...Eerst halen we het veld op. Dan controleren we met de PHP if functie of het 20 is. Bekijk aandachtig de syntax om te vergelijken. Vergeet geen 2X een gelijkheidsteken te zetten. De strings worden in PHP door een punt aan elkaar gekoppeld. Onze figuur heeft als naam korting20.jpg zaols je kunt zien. Deze methode kan dus gebruikt worden om getallen en waarden om te zetten naar figuren. In views konden we ook dit al met herschrijven...

Als vierde oefening gaan we de eigen node overstijgen en zien we dat we met Computed Fields ook de Drupal database kunnen aanspreken.. Hou je vast aan de takken van de bomen.. We gaan het toaal aantal ingeschreven personen berekenen. Daarvoor gaan we eerst via het control panel in de database om de namen te bekijken van de tabellen en velden die we nodig hebben. Met 'foreach' doorlopen we alle records van deze tabellen en tellen zo het aantal volwassenen en daarna het aantal kinderen op. We vullen telkens onze uiteindelijke Computed Field variabelen met deze waarden. Als je ooit veel inschrijvingen hebt moet je de 0, 10 optrekken natuurlijk. Dit is het begin en aantal records die je wilt tellen.

Uit een andere oefening heb ik dit gehaald. Het maakt gebruik van de PHP switch functie. Bekijk maar eens hoe logisch die is opgebouwd..

6) PHP veld

Een teskveld (body) kan je met de CKeditor omzetten naar een PHP veld als deze module (van de kern) werd aangevinkt. PHP kan verbinding maken met de database van Drupal en zelfs met andere databases. Wij houden het bij deze eerste en gaan opverkenning via het Control Panel van de hosting. We verkennen in de dabase een table met naam 'node'. We zien de node titels staan in het veld 'title' en het inhoudstype heeft blijkbaar de naam 'type'.

We willen nu een veld met de naam 'alle inschijvingen' toevoegen aan ons inschrijvings resultaat. Ik weet wel je kunt dit ook met een view, maar dit is plezanter..

Hoe ga je te werk... Eerst vul je de connectiewaarden in. Natuurlijk moet je de paswoorden kennen van je database. Daarna ga je naar een tabel en je haalt er de records uit. Hier filteren we op het type= inschrijvingen. anders hebben we alle titels uit onze Drupal. Met een tellertje houden we nog het aantal bij.. 'echo' is de PHP syntax om iets op het scherm te laten verschijnen.

Als je nu iemand laat isnchrijven, dan ziet die gans deze php code. Zeker niet ideaal... met de paswoorden.. Field extra widgets laat je toe om een veld verborgen te zetten. Let wel het is dan ook voor jou verborgen. Je kunt het echter terug normaal zetten om aan te werken..Als het niet openstaat voor de anonieme gebruikers kan je gerust PHP gebruiken. De bezoeker ziet enkel het resulaat. Ook niet met een inspector.. PHP wordt op de server uitgevoerd.

 

7) Rules

Alhoewel dit nog als een afzonderlijk les wordt behandeld, geef ik toch al een kleine voorzet.. Als je meer dan drie kinderen hebt krijg je 20 € korting..

We maken een nieuwe regel aan. We gaan eerst de gebeurtenissen bepalen waarvoor de rule geldt. Als we nieuwe inschrijvingen hebben of bestaande wijzigen willen we dat er gerekend wordt.

Daarna gaan we de voorwaarde instellen. We kiezen voor data vergelijking.

met deze instellingen. Je kiest het veld, de operator en daarna de waarde.

Nu gaan we bepalen welke acties er worden ondernomen. We kiezen om een waarde in te stellen en een berichtje op het scherm te laten verschijnen van de korting. Je kutn er evengoed een mail mee versturen naar de persoon (als er een mail veld zou zijn).

De waarde wordt zo ingesteld

En het berichtje:

Het veld wordt ingevuld en ja hoor..