Schalende content in tabellen

We kennen het allemaal; een mooie layout maken in Moodle. Het ziet er goed uit, maar je stoort je aan dat éne plaatje, dat niet meeschaalt op de mobiele en tablet versie van je leeromgeving. Met een achtergrond in design zijn dit de details waar ik mij desnoods uren op kan vastbijten!

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!