Les 3. Menu instellen

Transcriptie

1 Les 3 Menu instellen In de vorige les hebben we reeds menu-linken voorzien voor al onze schilders en schilderijen. We merken op dat het menu zonder aanpassingen een beetje druk begint te worden. We kunnen dit oplossen door uitklapbare menu's te creëren. Ga naar Structuur - Menu's - Hoofdnavigatie Je ziet een lijst met alle reeds ingestelde menulinken. Merk ook de kruisjes op. Met deze kruisjes kan je de volgorde aanpassen. Zorg ervoor dat 'Home' op de eerste plaats staat.

2 Plaats nu de schilders en schilderijen zoals hierboven. Dit wil concreet zeggen dat we de schilder bij zijn schilderij gaan plaatsen. Met hetzelfde kruisje kan je nu de schilderijen laten inspringen onder de schilder: Door op te slaan kan je het resultaat gaan bekijken. Dit zal tegenvallen. De schilderijen klappen niet uit. We keren terug naar de instellingen van het hoofdmenu. Naast elke schilder dien je op Bewerken te klikken en een vink te zetten bij Uitgeklapt Weergeven: Resultaat:

3 Opmerking: Blijkbaar lukt het niet om ook de parent (bovenliggend menuonderdeel) te laten werken nadat je een submenu gaat maken. Na onderzoek op het net en het bevragen bij collega's blijkt dit niet aan een instelling te liggen, wel aan het thema zelf. Er zou hiervoor een oplossing bestaan maar dat is me tot op dit moment van schrijven niet gelukt. Waarschijnlijk zullen we in een volgende les van thema wisselen. PathAuto instellen Als laatste onderdeel van de vorige les hebben we PathAuto geïnstalleerd en geactiveerd. Wat ons rest is het instellen van deze module. Open op de reeds gekende manier de instellingen van deze module Standaard is er geen patroon ingesteld voor een bepaalde URL automatisch te generen. We stellen dit in door te klikken op +Add Pathauto pattern

4 Hieronder het resultaat. Om ook het Path pattern in te stellen kijk je even verder onder deze afbeelding: Klik bij het Path pattern op Door beschikbare tokens bladeren. Deze tokens zijn eigenlijk variabelen. We stellen hier in dat de URL telkens de titel van de node moet bevatten. Klik op het grijze pijltje voor 'Node' en klik vervolgens op het blauwe 'node:title' Homepage instellen

5 Wanneer je de website niet voorziet van een eigen ingestelde Homepage of Frontpage dan zal Drupal automatisch teasers tonen van als jouw toegevoegde inhoud. Dit is handig voor een blog, niet meteen voor ons. In de eerste les hebben we reeds een soort welkomst-pagina gemaakt van het type Eenvoudige pagina. We openen deze even: Klik op Inhoud in het beheersmenu Klik bij Welkom op Bewerken Kijk nu bij de URL-instellingen, bepaal zelf de URL: /welkom Sla dit even op Ga nu naar Instellingen - Systeem - Basis site-instellingen Pas de standaardvoorpagina aan door de jou gekozen URL in te geven:

6 Herhalingsoefening In de vorige les hebben we inhoud toegevoegd in inhoudstypes. We doen dit vandaag opnieuw ter herhaling. Download de nodige bestanden 1. Voeg een nieuw inhoudstype toe: Musea 2. Vergeet niet om 'Auteur en datum' uit te vinken 3. Voeg een nieuw veld toe: 1. Veldtype: Tekst (plat) 2. Label: Adres 3. In de volgende vensters mogen de instellingen gewoon blijven zoals ze zijn 4. Voeg opnieuw een veld toe: 1. Bestaand veld: Afbeelding 2. In de volgende vensters mogen de instellingen blijven staan zoals ze zijn 5. Voeg nu de 5 musea toe, gebruik hiervoor de gedownloade bestanden. Let op: een menulink is hier voorlopig niet nodig 6. Aangezien we gebruik maken van PathAuto hoef je je ook niet druk te maken over de URL. Nieuw veld: lijst Bij de musea willen we graag de mogelijk om in een lijstje te kiezen in welk land de verschillende musea zich bevinden. Open het veldenbeheer van het inhoudstype Musea

7 Voeg een nieuw veld toe: Voeg nu handmatig een lijstje in met mogelijke landen. We kiezen hier logischerwijs de landen van onze musea: Sla dit op en in het volgende veld kan je ook gewoon opslaan. Bewerk nu telkens de inhoud van de musea. Je zal merken dat er een veld is bijgekomen en dat je het land kan selecteren:

8 Pathauto BIS Wanneer we naar de URL van één van de musea kijken dan zien we dat we daar weer te maken hebben met.../node/4. Raar want zonet hebben we dat patroon bij PathAuto ingesteld. Nu is het zo dat dit niet automatisch met terugwerkende kracht werkt. Gelukkig bestaat er een eenvoudige oplossing. Open de instellingen van PathAuto Kies bovenaan het tabblad Bulk Generate Vink inhoud aan, zo weet Drupal wat je wil gaan bijwerken Klik Bijwerken Na een aantal seconden en een vooruitgangsbalk verschijnt er een groene melding met het aantal bijgewerkte URL's. Controleer maar door een museum naar keuze te bekijken en de URL te checken. Weergave beheren Je hebt het misschien gemerkt maar de afbeeldingen van onze musea zijn ofwel heel erg groot ofwel aan de kleine kant. Het is voor een bezoeker veel aangenamer om deze allemaal in dezelfde grootte te zien verschijnen. Ga naar Structuur - Inhoudstypen - Musea - Weergave beheren

9 Merk naast het afbeeldingsveld het kleine grijze tandwieltje op. Klik daar even op en je krijgt volgend instellingsveld: Afbeeldingsstijl: o Geen: hier kies je gewoon de originele foto o Groot: een stijl die de afbeelding gaat bijsnijden op 480x480 pixels o Gemiddeld: idem maar dan 220x220 o Miniatuur (Thumbnail): idem maar dan 100x100

10 Link afbeelding naar: o Niets: wanneer de bezoeker op de foto klikt gebeurt er niets o Inhoud: de inhoud van de foto zal getoond worden, in dit geval gebeurt er dus niets want je kijkt al naar de inhoud o Bestand: de foto wordt groot getoond in een nieuw venster Test de verschillende mogelijkheden uit. Kies uiteindelijk voor Groot en Bestand Vergeet niet om telkens op Bijwerken te klikken gevolgd door Opslaan Colorbox Colorbox is een leuke module voor het weergeven van foto's. Helaas dis deze module third party, dit wil zeggen dat we handmatig een plugin moeten installeren op onze server in de juiste map. Voorlopig hoeven jullie zich daar niet druk over te maken. Ik heb dit reeds klaargezet voor jullie. Wat wel met gebeuren is het installeren van de colorbox module. Gebruik eventueel de link hieronder: Colorbox Voor colorbox iets van nut kan hebben moeten we er eerst voor zorgen dat we wat meer afbeeldingen hebben bij onze schilders: Download deze bestanden Bewerk nu een schilder naar keuze en probeer eens om een foto toe te voegen. Dit gaat helaas niet. Open het veldenbeheer van het inhoudstype schilder

11 Klik op Bewerken bij het veld afbeelding Klik in het verschenen venster op het tabblad veldinstellingen, we negeren de rode melding Onderaan zie je dat de toegestane waardes op 1 staan, we veranderen dit even naar Onbeperkt Vergeet niet op te slaan Bewerk nu de inhoud van alle eerder toegevoegde schilders, gebruik vervolgens de inhoud van de gedownloade bestanden om bij elke schilder twee foto's toe te voegen

12 Na dit werk open je de weergave van het inhoudstype schilder Pas nu het formaat aan van het afbeeldingsveld naar colorbox

13 Klik nu op het grijze tandwiel ter hoogte van het afbeeldingsveld We overlopen volgende instellingen klassikaal: Klik zeker op Bijwerken gevolgd door opslaan Bekijk het resultaat Mogelijk opmerkingen / problemen: o De afbeeldingen blijken niet allemaal even groot te zijn o De afbeeldingen staan niet mooi naast elkaar als je naar de node kijkt --> problemen om op te lossen in de volgende les