Afwerken les 9

De vorige les eindigden we met een oefening waar nieuwe blokken werden aangemaakt. We willen hier twee aanpassingen doorvoeren: kleur geven met CSS en i.p.v. een getypt adres hadden we graag een kaartje gezien.

Nieuwe bloksoort

1. Op dit moment hebben we één bloksoort met daarin één veld: de body

-->

2. Klik nu op + Aangepast bloktype toevoegen om een nieuwe soort aan te maken
3. Geef deze een naam en eventueel een beschrijving
4. Eens het nieuwe blok is aangemaakt kan je velden beheren

5. We willen een veld waarin we een adres intypen om vervolgens als kaart te laten verschijnen. Iedereen weet dat je dan een tekst (plat) - veld moet nemen

6. Als het veld een feit is, kijk dan meteen bij de weergave en pas aan

--> -->

Nieuw blok aanmaken

Nu onze nieuwe bloksoort een feit is kunnen we een nieuwe blok aanmaken van deze soort. Om problemen te vermijden gaan we eerst ons eerder aangemaakte blok 'Contact' verwijderen

1. Ga naar de Aangepaste blokken-bibliotheek

2. Verwijder het blok 'Contact'

3. Voeg nu een aangepast blok toe

4. Merk op dat je nu moet kiezen welke soort je wil gaan aanmaken, kies voor onze nieuwe bloksoort

5. Voeg nu de nodige info aan, het veld body heb ik zelfs leeggelaten.

CSS Footer

Om de footer wat meer te laten opvallen geven we deze een passende kleur. Ik heb hiervoor mijn bestaande regel 'CSS NewsLite' gewoon aangevuld. Om te weten wat ik moet bewerken heb ik de inspector gebruikt.

--> We maken deze oefening klassikaal

Opdrachtje tussendoor

Zorg voor volgende homepage, de foto kan je HIER downloaden

Views Slideshow

Met de module kan je in blokformaat een leuke slideshow maken. Deze kan je bijvoorbeeld gebruiken op de homepage als blikvanger.

1. Installeer de module Views Slideshow
2. Installeer de module Cycle2 (dev-versie)

3. We maken een nieuw overzicht aan. Gebruik onderstaande afbeeldingen om de eerste stap zelf uit te voeren:

4. Voeg nu eerst het veld afbeelding toe. Kies voor een Responsivie Image en als stijl ga je voor Wide. (deze stap kan geen kwaad, maar is overbodig, de module is op zich reeds responsive)

5. Het veld titel is hier overbodig, we gaan het uitsluiten van weergave

6. Onderaan zie je de diavoorstelling reeds in werking. Klik even bij Instellingen naast Diavoorstelling. Je zal zien dat je nog het één en ander kan regelen. We overlopen dit klassikaal.

7. Het blok is af. Het enige dat we nu moeten doen is het een plaats geven. Ga daarvoor naar structuur - blok-layout

8. Ga op zoek naar het blokgebied 'Page Intro' en kies 'blok plaatsen'.

9. Ga in de verschenen lijst op zoek naar het zonet gemaakte blok en kies 'Blok plaatsen'.

10. We willen liever geen titel zien

11. Tot slot bepalen we in het volgende venster dat dit blok enkel zichtbaar mag zijn op de front-page:

12. Sla alles op en bekijk het resultaat.

Captcha

Je kent het wel, sites waarin er gevraagd wordt een bepaalde reeks tekens in te voeren om te bewijzen dat je geen robot bent. Dit heet Captcha. Het wordt gebruikt ter beveiliging van een site. Een programma kan deze tekens namelijk niet interpreteren. Het is lastig maar een effectieve veiligheidsmaatregel.

1. Download en installeer eerst de module

2. Je kan nu de instellingen van de Captcha-module openen:

3. Eerder heb je twee soorten captcha geactiveerd. Deze kan je nu in het instellingsveld kiezen:

4. Nu dienen we de module te activeren op de inlogpagina. Dit doe je bij de Captcha Points

Zoek de inlogpagina en schakel de captcha in

5. Klik nu op Bewerken om de captcha te specificeren. Je kan hier opnieuw kiezen tussen een afbeelding of rekensom

6. Wanneer je nu uitlogt en opnieuw gaat inloggen krijg je afhankelijk van de instellingen de rekensom of afbeelding:

             

Herhalingsoefening

We zetten net over de helft van deze module. Daarom lassen we hier een herhalingsoefening in. De bedoeling is dat je op jouw eigen tempo eens gaat kijken hoever je reeds geraakt met Drupal. Doorloop in chronologische volgorde de deel opdrachten en een goed resultaat is zeker mogelijk.

1. Download de nodige bestanden
2. Schakel alle menu-linken van ons thema Schilders en Schilderijen uit. Dit kan je doen via Structuur - Menu's - Hoofdnavigatie. Door de hoofdlinken uit te vinken en op te slaan verberg je meteen ook alle onderliggende linken.

3. In de gedownloade bestanden vind je een nieuwe banner voor de frontpage.
   1. In bepaalde thema's zou je dit met filezilla kunnen uploaden op de server
   2. In ons huidig thema gaat dat helaas niet, zorg ervoor dat de banner verschijnt met CSS
4. De slogan van de site mag zichtbaar blijven maar voer volgende aanpassingen door:
   1. tekst: 'About bands and members'
   2. Kies een andere kleur en een groter lettertype voor de leesbaarheid

5. Maak een nieuw inhoudstype aan: Band. Gebruik onderstaande afbeeldingen voor de velden:

(--> Vergeet Auteur en datum niet uit vinken)

 

6. Pas nu eerst het standaardpatroon bij PathAuto aan, op die manier worden de nodes automatisch voorzien van aliassen.
7. Voeg nu inhoud toe van het type Band. Gebruik de gedownloade bestanden.
   1. The Beatles + groepsfoto
   2. The Rolling Stones + groepsfoto
   3. Pink Floyd + groepsfoto

8. Zet bij de weergave het label van het veld Afbeelding verborgen
9. Zorg ervoor dat er in het menu drie linken terug te vinden zijn:

10. Maak een nieuwe afbeeldingsstijl aan:

11. Pas deze afbeeldingsstijl toe op het veld afbeelding van het inhoudstype band, doe dit bij de weergave.

12. In de gedownloade bestanden vind je een afbeelding terug 'music.gif' dat is een klein fotootje dat we gerepeated willen zien verschijnen op de homepage (ENKEL op de homepage):

13. Kijk op de homepage met de element inspector naar de naamgeving van dit gebied. Test even uit door de achtergrond-kleur te wijzigen, dan weet je zeker dat je het juiste gebied gevonden hebt.
14. Kopieer of onthoud die naam en maak een nieuwe CSS-regel aan, geef deze een voor jou logische naam.
15. Zorg ervoor dat als achtergrond de afbeelding music.gif verschijnt
16. Dit mag enkel op de homepage het geval zijn!
17. De homepage is nu nog afgestemd op onze schilders. Pas daarom aan zoals op onderstaande afbeelding. Wil je graag dezelfde afbeelding klik dan HIER

18. Om ook dezelfde kleuren en opmaak te verkrijgen moet je gaan roeren in de HTML-soep, roep deze op met de knop Broncode. De volgende screenshot toont mijn code, niet zo proper, maar ze werkt wel.

19. Op de homepage staat ons blok met schilderijen nog te draaien. We gaan dit vervagen door hetzelfde maar dan met de bandleden.
    1. Verberg eerst het blok met de schilderijen
    2. Gebruik nu de lesinhoud van het eerste deel van deze les om een blok te maken met daarin een diavoorstelling. Deze komt op de frontpage. Een aantal tips:
       1. Het gaat hier over een overzicht van het inhoudstype bands, geen pagina, wel een blok
       2. Plaats het blok in de het juiste blokgebied
       3. Het blok is enkel zichtbaar op de frontpage
       4. Je zal een nieuwe afbeeldingsstijl moeten aanmaken

 

De brondcode die ik gebruikte op mijn site voor de homepage, kopieer gerust, aanpassingen zullen noodzakelijk zijn

 

<center><strong><font><span style="color:#a8000e;font-size:45pt;text-shadow:4px 4px 4px #666;">Welkom</span></font></strong></center>

<p>&nbsp;</p>

<center><span style="color:#a8000e;font-size:20pt;">bij Bands and Members</span></center>

<center>&nbsp;</center>

<p><strong><img alt="Jean" class="schaduwtekst" data-entity-type="file" data-entity-uuid="814edfa5-b1f4-4bbb-ac7a-f9e6f0f0d413" src="/sites/default/files/inline-images/jean.jpeg" /></strong></p>