Les 4

Inleiding

Afbeeldingen zijn op een website van cruciaal belang. Deze worden eigenlijk de blikvangers van de site. Hoe meer en hoe mooier, hoe aantrekkelijker de site. Neem hierbij een heel belangrijke regel in acht: hoe groter de afbeelding, hoe zwaarder de site. Streef naar afbeeldingen onder de 50kb

Er zijn veel manieren om foto's weer te geven. In deze eerste les rond afbeeldingen bespreken we:

  • Afbeeldingen in de body
  • De afbeeldingen van de slideshow
  • De Afbeeldingsstijlen
  • De colorbox

Afbeelding in de body

Voor we afbeeldingen in de body kunnen plaatsten moeten we de instellingen aanpassen zodat we van op onze harde schijf kunnen uploaden naar de server. Hiervoor hebben we de module CKEditor nodig. In jullie distributie is deze al aanwezig. Later leren we hoe we modules die nog niet geïnstalleerd zijn kunnen toevoegen.

Eerst bekijken we de huidige situatie:

  • Voeg inhoud toe van het type Artikel
  • Bij de body zie je dit:

  • Voor we afbeeldingen kunnen toevoegen moeten we de tekstopmaak instellen op Full HTML

  • Klik je nu op het afbeeldingssymbooltje dan krijg je een dialoogvenster

--> Dit is echter niet goed, je kan namelijk nergens kiezen om een foto up te loaden van de computer naar de server. Volg hieronder de stappen om dit in orde te zetten:

  • Ga naar modules

  • Via de filter zoek je naar CKEditor

  • Klik op het pijltje en kies Instellingen

  • Onder File Browser Settings verander je het type naar IMCE

  • Sla de instellingen op

--> bekijk opnieuw de body onder Full HTML bij het inhoudstype Artikel. Je zal merken dat er een knop is bijgekomen:

Bij wijze van oefening voegen we opnieuw een boom toe. Dit keer de beuk.

  • We maken dus nieuwe inhoud van het type Artikel. Geef een correcte titel en vergeet de tags niet!
  • Zoek nu via Wikipedia wat tekst over de beuk en plak dit in de body.
  • Zoek vervolgens een foto van een beuk en sla dit op, op de computer.
  • De opgeslagen afbeelding voegen we nu toe in de body, dus niet in het veld!

-->

  • Klik op het afbeeldingssymbooltje

  • Kies voor Bladeren op Server

  • Kies voor Uploaden

  • Zoek de afbeelding in de verkenner (de afbeeldingen hieronder is van een Mac)

  • Kies vervolgens opnieuw voor Uploaden (let wel dat je de juiste knop kiest)

  • Het volgende beeld geeft je nog een aantal opties:
    • Pas de breedte aan omdat de foto anders veel te groot is
    • Geef een randje van 10pt
    • Plaats de HSpace op 25 (Horizontal Space ofwel Inspringen)

  • Klik op OK om te bevestigen --> de foto is toegevoegd aan de body.
  • Zorg er tot slot voor dat onze nieuwe node 'Beuk' ook een linkje krijgt in in het navigatiemenu.
  • Bekijk nu even de teaser. Merk hier op dat de foto niet te zien is en bij de andere wel.
  • Een ander nadeel van deze werkwijze zijn de beperkte mogelijkheden tot het instellen van de afbeelding.

Afbeeldingen van de slideshow

Iets dat ons al een tijdje stoort zijn de afbeeldingen op de Front Page. Dit zijn de standaard afbeeldingen van het thema. Deze afbeeldingen aanpassen is helaas niet zo eenvoudig. We hebben namelijk een programma nodig waarmee we afbeeldingen van op onze computer rechtstreeks kunnen uploaden naar de server, meteen in de juiste map van het thema. Zo een programma heeft een FTP-programma. Er bestaan veel dergelijke programma's maar voor didactische redenen kiezen we allemaal voor FileZilla. Gebruik de link hieronder om dit programma te installeren.

https://filezilla-project.org/

-->

  • Eens het programma is geopend zie dit venster:

  • Het linkergedeelte is jouw computer, vergelijk het met een soort verkenner.
  • Het rechter gedeelte is alles wat op de server staat. Dit is op dit moment leeg omdat we nog geen connectie hebben gemaakt.
  • Hiervoor heb je de Host, Gebruikersnaam en Wachtwoord nodig. Om evidente redenen krijgen jullie deze in de les en plaats ik die niet op deze website.

--> De drie afbeeldingen die we gaan gebruiken heb ik hieronder voor jullie klaargezet, sla deze eerst op, op de harde schijf, doe dit op een logische plaats, bijvoorbeeld Downloads.

Wat je nu moet doen is de naam van deze drie bestanden aanpassen:

  • Banner 1 --> slide-image-1
  • Banner 2 --> slide-image-2
  • Banner 3 --> slide-image-3

Wanneer je bent ingelogd op de server via FileZilla:

  • Links zorg je ervoor dat de drie afbeeldingen te zien zijn

  • Rechts navigeer je naar de correcte map. Zorg ervoor dat je hier geen fouten maakt.

  • Vervolgens selecteer je links de drie afbeeldingen. Je klikt op de selectie rechts en kiest voor uploaden. Je krijgt een venster met de waarschuwing dat je iets gaat vervangen. Kies hier dus voor overschrijven.
  • Bekijk het resultaat op de website. Je zal waarschijnlijk moeten vernieuwen. 

  • Als we dan toch bezig zijn met het aanpassen van de site kunnen we evengoed het logo ook in dit thema juist zetten. Doet dit even bij wijze van oefening.
  • Ik kan me voorstellen dat je de naam van site nu storend vindt. Pas deze aan naar believen.

Afbeeldingsstijlen

Een totaal andere manier van afbeeldingen beheren is het gebruik van afbeeldingsstijlen. We plaatsten de afbeelding hier niet in de body maar wel in een afbeeldingsveld.

We testen dit concreet uit en hiervoor maken we een nieuw inhoudstype aan:

  • Maak een veld aan Afbeelding
  • Veldtype: Afbeelding
  • Widget: Multiupload (dit omdat je dan meteen een reeks foto's kan toevoegen)
  • Vergeet niet om bij de instellingen het aantal waardes op onbeperkt te zetten

We bepalen vervolgens hoe de velden moet worden weergegeven, klik daarvoor op het tabblad Weergave Beheren

Klik nu even op het tandwiel naast het veld Afbeelding

Hier kan je kiezen tussen een aantal afbeeldingsstijlen:

De bedoeling is nu om een stijl toe te voegen aan deze vier bovenstaande standaard-stijlen.

Eerst moeten we een nieuwe module installeren.

Een module is eigenlijk een uitbereiding voor Drupal. Deze modules zijn gratis te downloaden van het net.

-->

  • Zoek in Google naar de volgende trefwoorden:

  • Klik de eerste site aan
  • Scroll naar beneden:

  • Klik recht op het groene zip-bestand en kies Koppelingslocatie kopiëren

  • Ga naar jouw website. Kies Modules - Nieuwe module installeren

  • Plak de eerder gekopieerde koppelingslocatie

  • Kies voor Installeren
  • Samen doorlopen we dit installatie proces
  • Op het einde van de rit moeten we de nieuw toegevoegde module activeren (lees:aanzetten)

Nu de module is geïnstalleerd kunnen we nieuwe stijl aanmaken die ervoor zorgt dat de foto wordt weergegeven met afgeronde hoeken.

  • Ga naar Instellingen - Media - Afbeeldingsstijlen

  • Klik op Stijl toevoegen

  • Geef een passende naam aan de nieuwe stijl

  • Kies eerst voor Schalen en Bijsnijden, dit om de foto al wat kleiner te maken. We schalen ook om de verhoudingen te respecteren

  • Vervolgens voegen we opnieuw een effect toe, kies dit keer Afgeronde hoeken

  • De straal bepaald de mate van afronding. We kiezen bijvoorbeeld 25

  • Bevestig uiteindelijk met Stijl bijwerken

Om onze nieuwe stijl te testen moeten we eerst wat inhoud toevoegen:

  • Voeg nieuwe inhoud toe van het type Afbeeldingsstijl oef
  • We voegen enkel wat foto's toe. Kies een bepaald thema en zoek van dat thema 5 foto's die je eerst op de computer opslaat. Merk op dat we bij het maken van het inhoudstype voor Multiupload hebben gekozen. Dit werpt nu zijn vruchten af, want we kunnen in de verkenner de vijf foto's tegelijk selecteren en uploaden.

Sla je de nieuwe inhoud op, dan zie je het resultaat. We hebben helaas nog geen ronde hoeken.

  • Ga naar het Weergave Beheer van het inhoudstype

  • Klik op het tandwiel naast het Afbeeldingsveld

  • Naast de vier standaard stijlen krijgen we nu onze nieuwe stijl te zien.
  • Verander naar Ronde hoeken
  • Klik op Bijwerken en bekijk het resultaat.
  • Helaas: het werkt niet :(
  • De reden is simpel de foto is een JPG en moet een PNG zijn.
  • Hiervoor zetten we nog een module aan:

  • We navigeren naar ons Afbeeldingsstijl en voegen een nieuwe effect toe:

  • Kies bij de instelling voor PNG
  • Tot slot moet je ervoor zorgen dat de effecten in de juiste volgorde worden toegepast. Pas dit aan door met het kruis voor de effecten te verschuiven van plaats.

  • Vergeet niet op te slaan.
  • Bekijk het resultaat
  • Bij wijze van oefening:
    • Pas de straal van de hoeken aan naar 45
    • Zorg ervoor dat de foto's 500 x 250 groot zijn
    • Zorg ervoor dat er in het hoofdmenu een link verschijnt die je doorverwijst naar de foto's.

Colorbox

Colorbox is een module die ons toelaat om afbeeldingen weer te geven in een soort pop-up venster. De gebruiker kan dan door te klikken navigeren naar de volgende foto. Dit wordt veel gebruikt op bijvoorbeeld immo-sites. http://www.nobels.be/nl/

  • We werken voor dit deel rond de Sequoia --> download een aantal foto's van de Sequoia
  • De module Colorbox is reeds meegeleverd met de distributie. Controleer of deze is ingeschakeld.
  • Maak een nieuw inhoudstype met naam Colorbox
  • Zorg dat de reacties gesloten zijn en er geen Auteur en datum wordt getoond

  • Maak naast de standaardvelden een nieuw veld aan Afbeeldingen van het type Afbeelding met widget Multiupload (hierdoor kunnen we meer dan één foto uploaden)

  • Zorg ervoor dat het aantal waardes onbeperkt is. Vergeet je deze instelling, dan kan je maar 1 foto uploaden.

  • Ga na naar de Weergave van het inhoudstype

  • Kies bij het veld Afbeeldingen als formaat Colorbox.
  • Klik vervolgens op het tandwiel om de Colrobox in te stellen.

  • Neem de instellingen over zoals onderstaand voorbeeld. Klassikaal wordt besproken wat hier nu juist de opties zijn.

  • Sla alles op.
  • Voeg nu nieuwe inhoud toe van het type Colorbox
    • De titel: Sequoia
    • Zoek op wikipedia een passend teksje
    • Upload al jouw eerder opgeslagen foto's van de Sequoia
  • Sla op!
  • Zorg voor een menulink in het navigatiemenu
  • Bekijk het resultaat.

--> UITDAGING

  1. Zorg ervoor dat er boven de afbeeldingen geen label 'Afbeeldingen' getoond wordt.
  2. Zorg ervoor dat de eerste foto in de inhoud medium wordt getoond, de rest thumbnail