Les 4

De oefening

Voorbereiding

Het onderwerp van deze oefening is 'Werkmateriaal'. Ik heb voor jullie een lijst met werkmateriaal gemaakt. Al deze moeten nu worden toegevoegd. Wij gaan dat niet handmatig doen, maar met een import, dat kan dankzij de module Feeds.

Download hier de Excel-lijst (ter info)

Download hier het reeds klaargemaakte CSV-bestand

Download hier de nodige afbeeldingen, plaats ze uitgepakt in een map in bijvoorbeeld downloads

Taxonomie

Maak een nieuwe woordenlijst aan die de categorieën weergeeft van het werkmateriaal. Het niet nodig om de termen toe te voegen, je kan in Feeds bepalen dat deze automatisch worden gegenereerd.

taxonomie

Inhoudstype

Maak eerst een inhoudstype. Dat inhoudstype geef je de nodige velden, de veldnamen moeten overeenkomen met die uit de lijst die geïmporteerd zal worden

  1. De titel is hier "productname"
  2. Er is een veld dat refereert naar de woordenlijst categorie
  3. Het al-veld is uitgevinkt bij het afbeeldingsveld
  4. Ik gebruik dezelfde benamingen als die uit de Excel

label titel

 

content type

Afbeeldingen toevoegen

De afbeeldingen moeten op de server terecht komen. We maken hiervoor een inhoudstype aan dat ons  daartoe in staat stelt:

  • Naam: Pictures
  • Veld: meervoudig afbeeldingsveld

Voeg nu inhoud toe van Pictures. Alle foto's moeten worden geüpload. Dat zal in stapjes moeten gebeuren.

Feeds

Om dergelijke data uit een excel te importeren in Drupal gebruiken we de module Feeds.

  1. Kijk bij structuur en voeg een nieuwe feed toe:
    1. De naam geef je verplicht op
    2. Een beschrijving is eerder voor jezelf, dus optioneel
    3. We kiezen bij de Fecher om bestanden up te loaden
    4. Het gaat over een CSV-bestand (Parser)
    5. We gaan nodes creëren (Processor)
    6. We kiezen het juiste inhoudstype (Content type)

feed toevoegen

  1. We over lopen de nodige instellingen:

Instellingen

Fetcher instellingen

Parser instellingen

Processor instellingen

  1. Sla dit nu even op. De volgende stap is nu gaan bepalen welke velden uit het inhoudstype we willen opvullen met welke velden uit de Excel: Mapping. Je selecteert hiervoor een doel en vervolgens typ je de naam van de koptitel uit de Excel bij de bron. Aangezien de bron iets onbestaande is nemen we telkens de optie New CSV source...

Mapping

  1. Sla alles op
  2. Nu is het tijd om de import te gaan doen. Ga naar Content - Feeds

feeds

  1. Kies +Feeds toevoegen

feed toevoegen

  1. Kies in de lijst het juiste type feed (indien dit verschijnt)

welk type

  1. Vul het gevraagde in

feed

  1. Sla dit op....en ja hoor, het werkt:

feed


nodes

  1. Bekijk eens een node naar keuze. De taxonomie werkt ook perfect.

taxonomie

 

Uiterlijk

Benodigdheden:

 We gaan de inhoud die we met feeds toevoegden op een aantrekkelijk manier weergeven op de pagina.

  1. Het uiteindelijk doel is ongeveer het onderstaande:

resultaat

Regio 1

Gebruik deze afbeelding als logo:

logo

Regio 2

Plaats dit object in een blok. Het blok krijgt dan een logische plaats binnen het correcte thema. De CSS van dit object is:

  • Gecentreerd
  • 50pt groot
  • kleur: #3333a5
  • lettertype: monospace (zit ingebouwd, hoef je niet voor te downloaden ofzo)
  • een gestippelde rand
  • afgeronde hoeken van 20pt
  • onderaan een marge van 15pt

TER INFO:

border css

-->

border css

Regio 3

  • Dit object zit in een blok
  • Het geeft een overzicht weer van alle afbeeldingen van de werkmaterialen
  • De afbeeldingen worden in willekeurige volgorde getoond
  • Gebruik hiervoor Views Slideshow Cycle 2 (= responsive)

Regio 4

  • Gebruik het bestaande inhoudstype
  • Pas de body aan met deze tekst:

Gereedschap tegen de scherpste prijzen

Welk merk of type gereedschap je ook zoekt, de kans is groot dat je het bij Tools @ Work gaat vinden en in de meeste gevallen ook voor de beste prijs. Wij bieden je een assortiment dat zowel informatief, prijstechnisch en kwalitatief in evenwicht is. Je vindt bij ons niet alleen de bekende merken gereedschap zoals Bosch, Makita, Dewalt, Hitachi, Milwaukee en Festool, maar ook de minder bekende merken. Voor iedere professional en klusser proberen we een aansluitend aanbod te bieden.

  • De CSS pas je zodanig aan dat:
    • Er een afstand tot de rand is van 15pt
    • de achtergrondkleur Powderblue is
    • De afstand tot andere objecten is 15pt
    • De tekengrootte is 1,5 keer zo groot
    • De tekst staat in het midden
    • De tekst staat vetgedrukt

Regio 5

  • Ook dit onderdeel zit in een blok
  • Je kan de afbeelding hier downloaden:

promo

  • De achtergrondkleur van het blok is #00a1ff4f
  • Onderstaande toont de broncode van het blok, gebruik dit ter inspiratie

broncode

(voorlopig hoef je nog geen linken te leggen op dit blok, dat komt later)

Regio 6

  • Deze tekst zit in een blok. Om ook de pijltjes weer te geven heb je de module Font Awesome Icons nodig. 
  • Het uiterlijk van dit blok:
    • Gecentreerd
    • Tekengrootte: 31pt
    • achtergrondkleur: #121265
    • tekstkleur: #68c4e2

Regio 7

  • Je kijkt hier naar een blok dat de verschillende logo's weergeeft
  • Maak een view aan die de logo's weergeeft in een Waterfall Display
  • Ik gebruikte als afbeeldingsstijl 'gemiddeld'
  • Geef de view uiteindelijk een plaats als blok op de pagina

Regio 8

  • Pas de achtergrondkleur van de pagina aan. De kleur mag je zelf bepalen.

Gefilterde view met tabs

  1. Maak een overzicht aan van de werkmaterialen. Leg voorlopig geen link in het menu.
  2. Zorg voor de volgende velden:
    1. Afbeelding
    2. Categorie
  3. Geef deze eerste hoofdpage een naam, handig om later alles terug te vinden:

naam

  1. Titel en categorie uitsluiten van weergave
  2. Geef het overzicht reeds een klasse mee die je dan later kan coderen met de injector.
  3. Voeg nu een eerste Page toe

Page

  1. Geef deze meteen een logische naam, kies één van de categorieën waarop je gaat filteren.

hamers

  1. Zorg met de nodige filter dat enkel de hamers worden weergegeven. Je zal dus moeten filteren op de categorie. Let hier goed op dat je deze enkel toepast op deze pagina!

filter

  1. Deze pagina zal niet werken zonder pad, geef een logisch pad op:

pad

  1. Sla alles op
  2. We leggen nu eerst de correcte link in het menu, we doen die niet via views zelf

menu

  1. Keer terug naar de view. Pas nu eerst de hoofdpagina (de eerste) aan van de view. geef deze een Standaard menu-tap met passende naam:

menu

  1. In het volgende venster geef je aan dat deze reeds bestaat. Dat gaat hier over ons net aangemaakte menu-link

bestaat al

  1. Voor de pagina van de hamers voegen we ook een link toe, maar dit keer kiezen we voor een Menu-tab:

menu tab

  1. Herhaal bovenste stappen om ook de andere categorieën weer te geven:
    1. Messen
    2. Schroevendraaiers
    3. Handchaven
    4. Handzagen
    5. Troffels
  2. Zorg voor wat CSS:
    1. Left floaten
    2. Marge van 15pt
  3. Pas ook de tabs aan met CSS:

tabs css