ILIAS-Blog

機能

Kunkel, Matthias [mkunkel] - 12. Aug 2015, 09:00

Responsives Spaltenlayout mit dem ILIAS-Seiteneditor

Wer bislang Inhalte auf einer Kurs- oder Kategorienseite nebeneinander in Spalten darstellen wollte, kam um die Benutzung von Layouttabellen nicht herum. Allerdings können diese Tabellen auf mobilen Endgeräten nicht gut dargestellt werden, und Nutzer sind gezwungen, auf ihrem kleinen Display horizontal zu scrollen. Benutzerfreundlicher ist es, wenn sich auch die in ILIAS eingestellten Inhalte an die jeweilige Bildschirmbreite anpassen. Wie Sie in ILIAS 5.0 ein Mehrspaltenlayout umsetzen, das sich responsiv verhält und keine Layouttabelle nutzt, wird im heutigen Beitrag beschrieben.

In unserem Beispiel setzen wir ein fünfspaltiges Layout in einem Standard-ILIAS um. Die Spalten sollen später Logos bzw. Icons enthalten, die bei ausreichender Breite nebeneinander darstellt werden. Verringert der Benutzer die Bildschirmbreite, bricht ILIAS die Icons bei definierten Breiten automatisch um – bis alle Spalten bei einer Ansicht auf einem mobilen Endgerät untereinander platziert werden, siehe Screenshot rechts.

Hinweis: Die Startseite von ilias.de verwendet ein vierspaltiges Layout. Hier können Sie das responsive Verhalten schnell selbst ausprobieren, in dem Sie das Browserfenster einfach mal verkleinern.

Es empfiehlt sich, das Mehrspaltenlayout mit Hilfe des Seitenelements „Block“ umzusetzen. So können die Spalten sowohl Bilder als auch Texte enthalten. Da Sie diese Blöcke wahrscheinlich nur für Kategorien-, Kurs- oder Gruppenseiten nutzen, sollte ein eigenständiger Content Style angelegt und verwendet werden.

Alle Änderungen am Content Style nehmen Sie in Administration » Layout : Content-Styles vor. Sie benötigen also entsprechende Rechte auf Ihrer ILIAS-Installation.

Erster Schritt: Definieren von Media Queries im Content Style

Damit sich Seiteninhalte überhaupt responsiv verhalten, müssen für den verwendeten Content Style sogenannte „Media Queries“ definiert werden. Diese Regeln bestimmen, ab welcher Bildschirmbreite ILIAS welche CSS-Angaben für die Darstellung des Seitencontents verwendet. Die Definition dieser Regeln erfolgt im Reiter Media Queries des entsprechenden Content Styles.

Im Beispiel sollen die fünf Spalten eine Minimalbreite von 100px haben. Entsprechend müssen zusätzlich zur ohnehin vorhandenen Regel „Standard“ noch vier weitere Media Queries mit folgenden Angaben angelegt werden:

only screen and (max-width: 1067px)
only screen and (max-width: 967px)
only screen and (max-width: 867px)
only screen and (max-width: 767px)

Der Pixel-Wert des letztgenannten Media Queries ist auch der Wert, bei dem ILIAS automatisch in die Ansicht für Mobilgeräte wechselt und beispielsweise die Inhalte der rechten Spalte der Kursansicht unterhalt der Content-Spalte anzeigt. Die Werte der darüber liegenden Queries ergeben sich aus der Forderung einer mindestens 100px breiten Spalte. Durch das Anlegen der Media Queries erscheint jetzt auf dem Bearbeitungsformular einer Styleklasse zusätzlich ein Auswahlmenü für den entsprechenden Media Query. Diese sind mit @media gekennzeichnet.

Zweiter Schritt: Neue Styleklassen für responsive Spalten

Im Content-Style, der von der entsprechenden Kategorie- oder Kursseite verwendet wird, müssen außerdem zwei neue Styleklassen vom Typ „Block“ angelegt werden (die nachfolgend verwendeten Style-Namen können auch anders gewählt werden):

ResponsivContainerFluidAlle5 : Dieser Block ist der Container, der nachher die fünf Spalten enthält. Es müssen nur Angaben für den Media Query (@media) „Default“ vorgenommen werden. Tragen Sie am Ende des Formulars unter „Weitere CSS-Regeln“ folgende „Zusatzparameter“ ein:
- width: 100%
- float: left
- padding: 0
- margin: 0
ResponsivElement1Spalte : Dieser Block wird für die einzelne Spalte verwendet. Hier müssen pro Media Query andere Werte eingetragen werden. Nur so zeigt ILIAS bei geringerer Bildschirmbreite automatisch weniger Spalten an.
- @media: Standard : Tragen Sie unter „Weitere CSS-Regeln“ folgende „Zusatzparameter“ ein, um standardmäßig ein Fünf-Spalten-Layout anzuzeigen:
  - width: calc(20%)
  - float: left
  - padding: 0
  - margin: 0
- @media: ...(max-width: 1067px) : Macht aus fünf Spalten ein Vier-Spalten-Layout.
  - width: calc(25%)
- @media: ...(max-width: 967px) : Erzeugt ein Drei-Spalten-Layout.
  - width: calc(33.3%)
- @media: ...(max-width: 867px) : Zeigt nur noch zwei Spalten nebeneinander an.
  - width: calc(50%)
- @media: ...(max-width: 767px) : Stellt den Seiteninhalt für mobile Endgeräte in einer einzigen Spalte dar.
  - width: calc(100%)

Letzter Schritt: Gestaltung des Spaltenlayouts mit ILIAS-Seiteneditor

Nach der Definition der benötigten Stylesheet-Angaben kann nun mit dem ILIAS-Seiteneditor eine Seite mit responsivem Spaltenlayout erstellt werden.

Legen Sie auf der Kurs- oder Kategorieseite zunächst einen neuen Block mit dem Style ResponsivContainerFluidAlle5 an.
Innerhalb dieses Blocks legen Sie nun weitere fünf Blöcke an. Diese bilden jeweils die responsiven Spalten ab und können später mit Inhalt gefüllt werden. Weisen Sie diesen fünf Blöcken jeweils den Style ResponsivElement1Spalte zu.

Das war es auch schon. Das responsive Spaltenlayout ist umgesetzt. Lassen Sie sich nicht davon irritieren, dass das Layout im Bearbeitungsmodus des ILIAS-Seiteneditors etwas treppenartig aussieht:

Wenn Sie die Blöcke probeweise bereits mit einem Text oder einem Bild befüllt haben, können Sie den Effekt der Stylesheets schnell selbst überprüfen. Alle Spalten sind sauber nebeneinander positioniert:

Um die Responsivität zu überprüfen, verkleinern Sie jetzt einfach schrittweise die Breite des Browserfensters. Sobald eine bestimmte Breite unterschritten wird, springt der Inhalt der letzten Spalte rechts in die zweite Zeile. Der nachfolgende Screenshot zeigt das obige Fünf-Spalten-Layout, wenn der Media Query @media: ...(max-width: 967px) zur Anwendung kommt und zwei der fünf Spalten in eine zweite Reihe verschoben werden:

Weitere Hinweise

Die Angaben für das Fünfspaltenlayout können relativ einfach angepasst werden, um ein Dreispalten- oder Vierspaltenlayout zu realisieren. Es würden dann entsprechend weniger Media Queries definiert und andere Breiten gewählt werden.

Sollen die Spalten vor allem Text enthalten, empfiehlt sich auch eine grössere Minimalbreite und entsprechend größere Abstände bei der Angabe der Maximalbreite in den Media Queries. Die im Beispiel verwendeten 100 Pixel haben sich an der Breite der verwendeten Icons orientiert.

Auch die Präsentation von Text- oder Bildinhalten über zwei Spalten hinweg ist möglich. Dazu bedarf es nur eines weiteren Block-Stylesheets (z.B. mit Namen ResponsivElement2Spalten). Je nach Media Query definieren Sie für dieseb Block dann immer Breite von zwei Spalten. Im Fall einer Drei-Spalten-Ansicht mit dem Media Query @media: ...(max-width: 967px) müsste für den Block über zwei Spalten width: calc(66.6%) angegeben werden.

機能

昇順でソート
Kruse, Fabian [Fabian] - 09. Jan 2018 Hallo sesterhenn, die angesprochene Verbesserung kann in der Beta bereits ausprobiert werden, siehe: http://www.ilias.de/docu/goto_docu_wiki_wpage_4292_1357.html Die generelle Überarbeitung des Seiteneditors wird hier diskutiert: https://www.ilias.de/docu/goto_docu_wiki_wpage_4555_1357.html
Sesterhenn, Fabian [sesterhenn] - 09. Jan 2018 Ich sehe unter 5.3 Beta 4 keine Verbesserung im Seiteneditor. Ist vielleicht 5.4 gemeint :)? Problematisch ist vor allem der Javascript-Modus des Seiteneditors. In dieser Ansicht sind die eingesetzten responsiven Blöcke kaum noch zu erkennen und zu bearbeiten. Den Javascript-Modus sollte man daher deaktivieren. Mit dem reinen Formularmodus geht es wesentlich besser, auch wenn man dort dann sicher den ein oder anderen Klick mehr tun muss.
Kruse, Fabian [Fabian] - 08. Jan 2018 Hallo Slam92, man muss beim Zusammenklicken genau aufpassen, dass man das Layout richtig anlegt (siehe zweiter Screenshot). Dann sollte es in der Präsentation aber passen. Die gute Nachricht ist, dass dieses Layout ab ILIAS 5.3 viel leichter umsetzbar ist. Es ist dann ganz einfach und deutlich übersichtlicher im Seiteneditor anzulegen. Wir werden hierzu noch einen Blogpost mit einem Update veröffentlichen.
[Slam92] - 05. Jan 2018 Hallo :-) tolle Anleitung :-) Konnte viel dadurch lernen. Eine kleine Herausforderung habe ich noch damit. Im Bearbeiten Modus sehe ich die Blöcke nicht nebeneinander angeordnet sonder alle in- und untereinander. Es wird auch beim betrachten (also auf Seite) genauso komisch angezeigt. Kann mir wer verraten wie ich so eine schöne Anzeige bekomme wie in diesem Post beim Screenshot "5 Columns Layout im Bearbeitenmodus"? Ich würde das DesignPattern wirklich gerne umsetzen. Ich habe übrigens Ilias Version 5.2.9 :-) Danke :-)
Kunkel, Matthias [mkunkel] - 10. Feb 2017 Hallo Max, Danke für die Lorbeeren ;-) und den Feature-Request. Mit 5.2 haben wir ja schon einen Schritt Richtung Skalierung getan, siehe http://www.ilias.de/docu/goto_docu_wiki_wpage_2876_1357.html. Die oben stehende Anleitung sollte dann spätestens mit 5.3 obsolet werden, wenn dieses Feature umgesetzt ist: http://www.ilias.de/docu/goto_docu_wiki_wpage_4292_1357.html. Gruß, Matthias
10. Feb 2017 Vielen Dank! Das war genau was ich gesucht habe. Tolle Funktionalität und super Beschreibung. Als Idee für die Zukunft wäre es jetzt noch wünschenswert, wenn Bilder automatisch skalieren würden. Einen Featurerequest habe ich hierzu erstellt: http://www.ilias.de/docu/goto.php?target=wiki_1357_Allow_images_to_scale_with_browser_width . Viele Grüße! Max
Kiegel, Colin [kiegel] - 最終編集 18. Jan 2017 Übrigens wird das alles ab ILIAS 5.3 viel komfortabler möglich sein -- dank der Finanzierung der Douglas Parfümerie für dieses Feature: http://www.ilias.de/docu/goto_docu_wiki_wpage_4292_1357.html. Umsetzung und Konzeption: Leifos und Qualitus. :-)
Kellermann, Manfred [mkellermann] - 18. Jan 2017 Besten Dank, super Anleitung!
Kolonko, Thomas [TomaszKolonko] - 最終編集 06. Nov 2015 Vielen Dank für den Beitrag. Ich habe leider noch ein Problem, dass ich nicht schön lösen kann. Wenn man den Repository Tree zur linken Seite aufklappt, nimmt dieser eine beträchtlich Breite des gesamten Screens in Anspruch. Dieser wird nun dem Seitenlayout nicht abgezogen. Ohne diesen Tree funktionert alles Bestens, sobald dieser da ist, laufen die Bilder des Seitenlayouts wenn die Breite verkürzt wird. Eine Erhöhung des max-width in den mediaquerries löst das Problem aber im ausgeklappten Zustand schlagen die Bilder viel zu früh um. Gibt es eine schönere Lösung für dieses Problem?
Wegener, Miriam [miriamwegener] - 11. Sep 2015 Danke für den hilfreichen Blogbeitrag! Das ist wirklich sehr sehr praktisch!!!
Kunkel, Matthias [mkunkel] - 17. Aug 2015 Peter,thanks for this hint. I have added the missing description for the 1067 media query.
17. Aug 2015 This is great! However, it goes from 5 to 3 columns. I think you forgot one media query in ResponsivElement1Spalte class: @media: ...(max-width: 1067px) : Erzeugt ein Vier-Spalten-Layout. width: calc(25%) -Peter
Seiler, Yvonne [yvseiler] - 最終編集 12. Aug 2015 Ein toller Beitrag! Vielen Dank für die genaue Schritt-für-Schritt-Anleitung. Ich habe diese sofort selber umgesetzt und es funktioniert bestens. Damit haben wir nun auch auf unserer ILIAS-Installation Bilder im Magazin, die sich auf kleineren Bildschirmen untereinander anordnen lassen. Wer bereits das eine oder andere im Content-Style selber angepasst hat, wird keine Probleme haben (und ich bin sicher, die anderen werden dank der Anleitung ebenfalls schnell ein solches Layout umsetzen können). Ein riesengrosses Merci aus Bern! Liebe Grüsse, Yvonne