D2 les 01

Voorbereiding Drupal 2

We gaan onze nieuwe hosting in gebruik nemen en zetten alles klaar voor de Drupal 2 cursus. We gebruiken daarvoor de didactische distributie.

We gaan onze site toch wat mooier maken:

installeer Lexus Zymphonies Theme
Doe met de bestandensbrower de vorige afbeeldingen weg.
Installeer een slideshow met nivo slider (lets have a third party!)
Voeg drie mooie foto's toe aan de slideshow na comprimeren
Stel een welkomstpagina in als front page
Doe met CSS de voetteksten weg
Zet een Drupal logo en favicon

de voorbeeldsite van deze Drupal 2 cursus wordt deze keer: http://drupalcursisten.be/drupal2/

Multimedia

In dit gedeelte gaan we presentaties van afbeeldingen verfijnen en  audio en video integreren op onze site.

1) Afbeeldingen

 

Image Caption

is een module die de titel van de afbeelding als label toevoegt op de pagina. Dit kan handig zijn. Stel dat je een voorstelling wilt maken van automerken. Schrijf dan bvb telkens de info bij de foto. Zo zal die altijd op de juiste plaats komen. Installeer en activeer.

Bij invoegen van een figuur moet je hem de class 'caption' geven en een passende titel geven:

Je kunt dus nu zoals gewoonlijk tekst typen, maar telkens je deze mogelijkheid benut zal in de breedte van de foto ook een label te zien zijn. Merk op dat deze caption ook als link naar de afbeelding dient.

Bovenstaand voorbeeld heeft wat opmaak gekregen van mij:

Image Resize Filter

Als je in de CKEditor een afbeelding van formaat wijzigt (verkleind) dan blijft het aantal pixels gelijk en blijft de laadtijd ook gelijk. Daar gaan we iets aan doen met de image resize filter:

Inschakelen...en klik op instellingen.

We zetten de filter op de full html versie. Logisch.. Enkel daar kan je afbeeldingen zien. We vinken de filter aan.

Bij de verfijnde instellingen zie je dat je een link kunt voorzien naar de ware grootte. We kiezen ook om de nieuwe afbeeding (er wordt inderdaad een nieuwe afbeelding aangemaakt), lokaal, op onze eigen server, gaan bewaren.

Hieronder zie je een stukje van de ware grootte en de verkleinde foto. Je kunt verkleinen door de formaatgrepen te verschuiven of door de afmeting in pixels in te stellen in de CKEditor.

Wat je natuurlijk niet direct ziet is dat de afmetingen in pixels werden aangepast. Daarvoor moet je door rechtsklikken de info van de afbeelding oproepen. Merk op dat er een nieuwe afbeelding werd aangemaakt in de map resize..

Imagefield Crop

Een volgende interessante tool is imagefield crop. 'To crop' is het Engels voor bijsnijden.  Het gebeurt inderdaad dat je niet de foto wil resizen zoals hierboven maar enkel een stuk er uit wil nemen. Zoals de titel zelf zegt gaat het hier over afbeeldingen die in een veld zitten. Niet binnen een tekst dus. We moeten het dus testen met een inhoudstype met een afbeeldingsveld.

Eerst installeren en activeren.

Er zijn geen instellingen op module niveau. Wel op veld niveau. We gaan naar 'Article' om het uit te testen.

Als je nu terug naar de veldinstelling gaat krijg je hier enkele mogelijkheden:

Als je nu een foto upload dan krijg je een knap bijsnijdvenster. Zo kan je dus een inhoudstype maken waar alle figuren dezelfde afmetingen hebben.

Het resultaat: (ik heb ook nog eens in de tekst de orginele foto meegeleverd.)

We geven nu een overzichtje van de mogelijkheden om afbeeldingen voor te stellen. In Drupal 1 hebben we reeds kennis gemaakt met Colorbox en Juicebox. Daarna gaan we leren werken als administrator met afbeeldingen en andere bestanden.

Insert module gecombineerd met colorbox

In deze verfijning gaan we afbeeldingen als een veld invoeren en daarna integreren tussen onze tekst! We zullen dan in staat zijn om een formaat te geven aan deze afbeeldingen, net zoals ze in een veld zitten. We installeren colorbox mocht dit nog niet gebeurd zijn...Dit is 'third party'... Ook multiupload zullen we installeren.

De plugin moet uitgepakt worden en herbenoemd tot colorbox en in de juiste map worden aangebracht. De plugin dient om een Colorbox mogelijk te maken voor figuren tussen de tekst.

We kunnen ook de vertaling van de knoppen instellen.

We maken nu een nieuw inhoudstype aan:

Het veld image kan een onbeperkt aantal afbeeldingen bevatten. Stel dit zo in.

Bij weergave beheren kan men kiezen voor Colorbox. Bij de instellingen worden de voorkeuren bepaald.

We testen eerst onze colorbox.

We kunnen ook voor ons als beheerder deze modules installeren:

Dit stelt ons in staat om meervoudig up te loaden voor een afbeeldingsveld.

Een beeld van het Multiupload scherm:

Als we willen afbeeldingen tussen de body tekst aanbrengen én als colorbox willen tonen dan moeten we eerst Insert installeren.

Deze tool zorgt ervoor dat bestanden en afbeeldingen als een veld worden beschouwd. Het zijn als het ware image fields tussen de tekst.. Vroeger heette het dan ook File Field Insert.

Activeer..

Als we nu naar ons inhoudstype gaan en het veld images gaan bekijken is er een knop bijgekomen. We kunnen nu enkele instellingen doen. We maken dat we gebruik kunnen maken van de insert tool en activeren enkele stijlen die we zullen gebruiken.

Als we nu terug gaan naar onze webpagina, dan zien we dat bij de images een Insert veld werd toegevoegd. Alle afbeeldingen kunnen nu lukraak tussen de tekst worden aangebracht. Kies een Colorbox stijl en test uit…

Vanaf nu is de Colorbox van toepassing op de afbeeldingen in de tekst. Als je het resultaat bekijkt heb je nu wel de afbeeldingen dubbel. De ene keer ingevoegd in je tekst in de body én nog eens als image field. Daarom moet in het inhoudstype bij de weergave, het imageveld als verborgen worden ingesteld:

Media

Laat ons ook eens de allernieuwste versie van Media installeren. Het heeft een andere look dan voorheen en bij inhoud zit het nu bij Bestand. Media bestaat niet meer... Er is ook een bulk upload voorzien, maar deze beta versie werkt bij mij nog niet. Doe zo verder gasten...

dit is de nieuwe look:

Deze media heeft ook een media browser widget.

Zo krijg je de upload mogelijkheden:

Vanuit media (=bestanden) kan je nu invoegen. (vergeet niet tot onderaan te scrollen)

 

Afbeeldings galerijen

Naast de Views slideshow heb je ook nog het populaire Juicebox. Deze hebben we echter al in Drupal 1 gezien. Een verfijning volgt in Drupal 3.

2)Audio

Naast afbeeldingen maakt ook geluid deel uit van media. We zullen met een simpele module de mogelijkheid creëren om muziek op een pagina te integreren. We gebruiken daarvoor Audio Field.

Na installatie kan je bij instellingen naar Audio Field gaan. Er is reeds een player voorzien.

Bij een inhoudstype kan nu bij bestand gekozen worden voor audio upload.

Dit zet een aantal parameters zoals bestandextensies en maximum grootte. Merk op dat je de juiste map selecteert. Deze ligt vast bij de instellingen (zie boven).

Als je nu inhoud toevoegt dan zie je een link. Bij klikken komt er een palyer te voorschijn.

We willen echter meer. Bij de instellingen klikken we op XSFP slim player en downloaden de inhoud. Deze moet uitgepakt worden in onderstaande map.

De instellingen tonen nu een andere mogelijkheid. Kies die en sla op.

We hebben bij de weergave van de standaard voorstelling ( bij inhoudstype), gekozen voor een link met de player.

3) Video

Bij Multimedia behoort ook video natuurlijk.  Hier gaan we een veld maken om een video te kunnen weergeven. We gebruiken hiervoor Video Embed Field

Activeren…

Je kunt bij de instellingen, bepalen hoe groot de speler moet zijn. Zowel voor de teaser als voor de full versie.

Bij de inhoudstypes kan je nu een veld maken.

Deze wordt dan met inhoud gevuld. Kopieer de link van het net.

Het resultaat.