Flexbox

[peitman]

Hallo zusammen,
ich möchte gerne Flexboxen im wysiwyg einsetzen, bzw. gibt es ein Modul dafür?
Es sollen drei Boxen nebeneinander sein.
In jeder Box soll links ein Icon links positioniert sein und rechts davon eine Headline mit einem kurzen Text.
Über Items habe ich es schon versucht, habe es aber nicht hinbekommen.
Hat jemand einen Lösungsvorschlage?
Vorab schon mal Danke.

[hgs]

Hast du hier schon mal geschaut?
https://dev4me.com/modules-snippets/opensource/bootstrap-multiple-columns/

[dbs]

Kenne itemz nicht, wenn es aber ähnlich gebaut ist wie topics, members, OFA, dann ist nicht ganz klar wo dein Problem liegt.
Vielleicht beschreibst du es etwas genauer.

[Gast]

eine ganz einfache Lösung ohne ein anderes Modul wäre die Erstellung einer Formatvorlage für den Editor in der editor.templates.js entweder im Ordner modules/ckeditor/wb_config oder in einer zu deinem Template kopierten Datei mit diesem Namen.

Benötigt wird ein Gridsystem, etwas CSS z.b. aus W3CSS oder Bootstrap und ein Code für diesen Block, ein paar HTML- oder zumindest Kopierkenntnisse, ein Editor deiner Wahl zum Anpassen der editor.templates.js
Möchte man es schön haben, vielleicht noch eine kleine Grafik, die bei der Auswahl des Templates gezeigt wird

Im Beispiel mal eine responsive Art solcher Box, die das Grundprinzip zeigt, wie man solche Templatevorlagen erstellt. Dies entspricht nun nicht genau dem Flexboxprinzip, welches ja noch dynamischer ist. Während eine "echte" Flexbox eher die Einträge summiert und auch 5 oder 13 aneinanderreiht, sind im Beispiel nur 3 Boxen fix, aber eben responsive. Sie ordnen sich mit schmaler werdenem Display untereinander an. Eine "echte" Flexbox ließe sich nach diesem Schema aber genau so darstellen, in dem man statt der hier gezeigten Dreierbox nur eine einzelne Box erstellt und diese mit dem entsprechenden Tag drum herum versieht.
Das Verfahren wäre dann analog. Man erstellt sich zuerst eine Vorlage für das Rahmengerüst um die Einzeleinträge drum herum und dann noch eine Vorlage für solch Einzeleintrag. Dann wird zuerst der Rahmen eingefügt und in das erstellte Element eine weitere Vorlage, die solch Einzeleintrag enthält. Dieser Vorgang läßt sich dann unendlich wiederholen und mit dem entsprechendem CSS wird so eine "echte" Flexbox draus
Mit solchen Vorlagen kann ich eigentlich jede Ausgabe von x-beliebigen Modulen "kopieren", von einer FAQ-Liste bis hin zu OneforAll oder Bakery oder irgendwelche Kalender mit Terminen. Der Vorteil von Einzelmodulen ist aber die vereinfachte Bedienung über Eingabemasken im Backend.

Im Bild 1 die Auswahl im CKEditor - Vorlagen bzw Templates


Im Bild 2 die Ansicht nach dem Einfügen im Editor


Hier wird nun einfach der Text ersetzt - erledigt 
Ich habe hier aus Zeitgründen eine meiner Vorlagen kopiert und darum einen h1-Tag als Überschrift gewählt. Braucht man statt dessen ein Bild oder gar ein anderes HTML, muß man es entsprechend anpassen.

Im Anhang die editor.templates.js dazu zum Reinschauen und die Grafik für die Vorschau
Diese Grafik gehört in den Ordner modules/ckeditor/ckeditor/plugins/templates/templates/images

Lesestoff zum Thema mit Tips und Beispielen -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

P.S.: die Vorlage nutzt das W3CSS, das ich in allen neueren Templates benutze. Es müßte also entsprechend integriert werden oder man passt den Code an für ein anderes System
Infos zu W3CSS -> https://www.w3schools.com/w3css/

[LudwigSt]

Hallo zusammen,
ich möchte gerne Flexboxen im wysiwyg einsetzen, bzw. gibt es ein Modul dafür?
Es sollen drei Boxen nebeneinander sein.
In jeder Box soll links ein Icon links positioniert sein und rechts davon eine Headline mit einem kurzen Text.
Über Items habe ich es schon versucht, habe es aber nicht hinbekommen.
Hat jemand einen Lösungsvorschlage?
Vorab schon mal Danke.

Hallo,

dafür brauchst du nicht unbedingt ein Modul. Nur etwas HTML und CSS Kenntnisse. Im Editor gehst du auf "Quelltext" und gibst z. B. etwas in dieser Art ein

Code: [Select]

<div class="columns">
            <div class="column">
                <article class="media">
                    <figure class="media-left">
                        <span class="icon">
                        <i class="fab fa-css3-alt"></i>
                    </span>
                    </figure>

                    <div class="media-content">
                        <div class="content">
                            <h1 class="title">Flexboxen</h1>
                            <p>DFKJLAKSDJLKADSJFLDSJFDLSKFJakdjfasdkf</p>

                        </div>
                    </div>
                </article>
            </div>

             <div class="column">
                <article class="media">
                    <figure class="media-left">
                        <span class="icon">
                        <i class="fab fa-css3-alt"></i>
                    </span>
                    </figure>

                    <div class="media-content">
                        <div class="content">
                            <h1 class="title">Flexboxen</h1>
                            <p>DFKJLAKSDJLKADSJFLDSJFDLSKFJakdjfasdkf</p>

                        </div>
                    </div>
                </article>
            </div>

             <div class="column">
                <article class="media">
                    <figure class="media-left">
                        <span class="icon">
                        <i class="fab fa-css3-alt"></i>
                    </span>
                    </figure>

                    <div class="media-content">
                        <div class="content">
                            <h1 class="title">Flexboxen</h1>
                            <p>DFKJLAKSDJLKADSJFLDSJFDLSKFJakdjfasdkf</p>

                        </div>
                    </div>
                </article>
            </div>
        </div>
Und in deinem css-File, oder inline im Quelltext als style, definierst du dann die benutzten css-Klassen nach deinen Wünschen. Hier ein Beispiel:

Code: [Select]

.columns {
                display: flex;
            }

            .column {
                display: block;
                flex-basis: 0;
                flex-grow: 1;
                flex-shrink: 1;
                padding: .75rem;
            }
            .article{
                display:block;
            }
            .media {
                align-items: flex-start;
                display: flex;
                text-align: left;
            }

            .media-left,
            .media-right {
                flex-basis: auto;
                flex-grow: 0;
                flex-shrink: 0;
            }In die icon-Klasse kommt dein Bild, wenn du kein Fontawesome Grafiken benutzen möchtest, rein und in den <p>-Tag dein Text. Wenn die 3 Boxen jeweils Überschriften haben sollen, kommt das in den <h1>-Tag. Viel Spaß beim Probieren!

[Gast]

Für den Code von LudwigSt eine editor.template.js mit entsprechendem Code sowie die Grafiken für den Ordner modules/ckeditor/ckeditor/plugins/templates/templates/images

den Code für die W3CSS-Box habe ich drin gelassen, so kann man diese auch noch per Mausklick verwenden oder zumindest das Grundschema solcher Templates erkennen.

Damit das mit den FontAwesome-Icons auch funktioniert, muß in der Datei modules/ckeditor/wb_config/wb_ckconfig.js ganz unten hinter der allerletzten Zeile und dem letzten Semikolon dies eingefügt werden (sonst filtert der CKEditor die leeren Elemente wieder heraus)

Code: [Select]

CKEDITOR.dtd.$removeEmpty['i'] = false;
CKEDITOR.dtd.$removeEmpty.span = false;
Bearbeitung der FontAwesome-Icons geht nur über den Quelltext des Editors (css-Klasse anpassen)
Für den Rest wie oben beschrieben, rein klicken, Text anpassen, Speichern, fertig

[peitman]

Hallo zusammen,
erst einam vielen Dank für die konstruktiven Lösungsansätze.
Ich hatte mich dann auf die Suche gemacht und bin auf das Modul "bootstrap-multiple-columns" gestossen. Das ist super und völlig ausreichend.
Sehr interessant finde ich den Vorschlag von jacobi22. Ich wusste nicht das bzw. wie man Formatvorlagen für den Editor erstellt.
Werde ich mir in einer ruhigen Minute mal anschauen.
Ich wünsche euch allen einen schönen 3. Advent.