In deze blog spreken we over schalende (ook wel responsive) afbeeldingen in tabellen, dit is namelijk complexer dan een losstaande afbeelding responsive maken in Moodle.

Bij het maken van een dergelijke tabel adviseren we graag om dit eerst op papier uit te werken. Dit adviseren we, omdat je celeigenschappen meegeeft in percentages. Dit is bepalend voor de manier van tonen op je cursuspagina. Om dit te doen moet je dus weten wat jouw gewenste weergave is. Kortom, hoeveel (tussen)ruimte geef je de content?

Deze gedachtegang maken we visueel met bovenstaande tabel. Bij het maken van een tabel in de TinyMCE editor zetten wij de breedte standaard op 100% en vullen we het aantal rijen en kolommen in. Zet de ruimte in de cellen op 10px. Overigens, om je tabel in bovenstaande samenstelling te krijgen is enige uitleg vereist. Wanneer je boven een rij toevoegt, krijg je dezelfde samenstelling met 4 kolommen. Om per rij af te wijken selecteer je alle kolommen en kies je voor ‘cellen samenvoegen’.

Wanneer de breedte van je gehele tabel op 100% staat en het aantal rijen en kolommen hebt ingevuld, kun je beginnen met het aanpassen van de celeigenschappen. Ons eerste screenshot met de tabelpercentages is slechts nog een schets. Om daadwerkelijk de waardes toe te kennen kies je voor ‘cel-eigenschappen’.

Zet de ‘Breedte’ op 25%. Zo schaalt de afbeelding die je in deze kolom plaatst automatisch op 25% van de 100% van de gehele tabel. Gewoon uitproberen en het resultaten testen. Dan wordt dit heel concreet.

Wat betreft de tabel zijn we nu klaar! Nu willen we de plaatsjes die we plaatsen in de tabel ook schalend maken natuurlijk. Dit is gelukkig heerlijk simpel en maakt het niet onnodig complex. Voeg je afbeelding in en kies bij ‘Klasse’ voor: img-responsive.

Sla je wijzigingen op en bekijk je resultaat. Een volledig schalende tabel met schalende afbeeldingen. Test je resultaat door te schuiven met het formaat van je browser window. Succes!

Het bericht Schalende content in tabellen verscheen eerst op Avetica.

1. Voeg je afbeelding in en kies bij ‘Klasse’ voor: img-responsive
2. Typ achter ‘Stijl’ height: 25%; width: 25%; in als je graag wilt dat de afbeelding op 25% van de originele grootte wordt getoond.

Hoe simpel kan het zijn? Meer dan dit is het eigenlijk niet! Een handig trucje om je afbeeldingen mee te laten schalen. Nu is je Moodle site écht helemaal responsive! Succes!

Het bericht Schalende afbeelding in Moodle verscheen eerst op Avetica.

Er is duidelijk een trend te zien dat men voortbouwt op populaire Moodle template. Adaptable komt voort uit het BCU template, maar er zijn meer opties aan toegevoegd waardoor er veel instelmogelijkheden zijn.

Adaptable is een template met maar twee kolommen. Dit geeft een cursuspagina al een veel rustiger weergave dan het drukke drie kolommen waarbij je te snel afgeleid wordt door de vele blokken aan beide zijkanten.

Wat kan je allemaal instellen in Adaptable:

• kleuren
• lettertypes
• stijl van de blokken
• de icontjes
• de look-and-feel van de buttons
• sliders op de homepage
• nieuwsberichten op de homepage
• marketingspots
• instellingen voor specifieke weergave op tablets
• eigen favicon
• achtergrondafbeelding
• social media buttons of een zoekvenster in header

Beschikbaar vanaf Moodle 2.8 en al geschikt voor Moodle 3.0.x.

Het bericht Adaptable, nieuwe Moodle template met veel instelmogelijkheden verscheen eerst op Avetica.