Verschachtelte Blöcke

[dr]

Hi,

ich suche eine Möglichkeit Blöcke zu verschachteln. Verwenden möchte ich das um z.B.

• an einer beliebigen Stelle einen Block "Zweispalter" einzufügen und darin andere Blöcke wie Text, Bild, etc. hinzuzufügen
• verschiedene Blöcke in einer Box (div) zusammenzufassen

Mit den Spalten, die man zu Templates anlegen kann, lässt sich das nicht umsetzen.

Bisher habe ich ein Modul verwendet, dass die Inhalte von mehreren Artikeln einblendet. Das führt aber schnell zu einer inflationären Anzahl von Artikeln und wird schnell unübersichtlich.

Man könnte natürlich einfach Module "Beginne linke Spalte", "Beginne rechte Spalte" und "Beende Spalte" einfügen. Redakteure müssten dann aber beachten alle Spalten wieder zu schliessen, damit am Ende valider Code dabei herauskommt.

Ideen?

Grüße, Dominik

[Markus.Staab]

Hi Dominik,

aktuell geht das so einfach nicht..

Du könntest mal schauen ob du mit den CTYPES weiterkommst.

Gruß,
Markus

[site-concept]

Hallo zusammen,

ich grabe diesen Thread nochmal aus.
Wird das irgendwann möglich sein bzw. gibt es mittlerweile Lösungsansätze dazu?

Beste Grüße

Pascal

[Ingo]

Ctypes. Damit gehts. Ein Ctype ist ein Ausgabebereich in einem Template. Erstell dir einfach ein Template mit 2 divs drin (links und rechts) und lass in jedem einen Ctype ausgeben.

[site-concept]

Hallo Ingo,

danke für deine Antwort.
Das mit den Ctypes ist mir bekannt und wird auch von mir eingesetzt.
Allerdings gibt es Situationen, in denen das nicht reicht.

Kleines Beispiel:
Ich habe eine 2-spaltige Seite (links content + rechts sidebar).
Jetzt gibt es zwei Ctypes in denen man Module/Blöcke anlegen kann "content" + "sidebar".
Jetzt möchte ich gerne folgendes im Content abbilden.
1. Box mit voller Breite
2. 3 Boxen nebeneinander
3. 2 Boxen nebeneinander
4. Box mit voller Breite

Das Modul könnte für alle 4 Fälle das gleiche sein, es würde nur eine andere Klasse benötigt werden.
Und hinter jedes Modul bräuchte ich ein Clear-Div.

Ich weiß im Vorhinein nicht ob der Redakteur pro Zeile eine Box, zwei, drei oder vier anlegen möchte.
Momentan löse ich das mit einem dynamischen Script.
Allerdings wäre es schön, wenn man ein "Modul Wrapper" anlegen könnte und da drin wiederum n Boxen, so könnte man das Box-Modul viel öfters einsetzen.

Ich hoffe Ihr versteht ungefähr was ich meine...

LG

Pascal

[Ingo]

Das Modul könnte für alle 4 Fälle das gleiche sein, es würde nur eine andere Klasse benötigt werden. Und hinter jedes Modul bräuchte ich ein Clear-Div.

Mach ein Module mit 4 Eingabebereichen (Tabs?). Bei der Ausgabe fragst du ab, in wieviele der Ausgabebereich der Redakteur was eingegeben hat und gibst den Inhalt in entsprechend vielen Spalten aus. Oder mach vier Module. Was du da vorhast (bist zu vier Blöcke in einen Block einbinden) scheint mir - auch für den Redakteur - unnötig kompliziert zu sein.

[MAZup!]

Hallo zusammen,

ich grabe diesen Thread nochmal aus.
Wird das irgendwann möglich sein bzw. gibt es mittlerweile Lösungsansätze dazu?

Beste Grüße

Matthias

[site-concept]

Was ein Zufall, ich habe gerade auch nochmal alles zu diesem Thema abgesucht.
Ich bin nach wie vor auch an einer Lösung interessiert.
Weiß leider momentan auch noch nicht wie man ansetzen könnte, ob es über ein Addon möglich wäre oder ob man im Core eingreifen müsste.
Prinzipiell wäre ich auch bereit mich finanziell an der Umsetzung zu beteiligen.
Es würde so vieles vereinfachen.
Wunsch wäre eine Element zur Verfügung zu haben, ähnlich wie REX_LINK_BUTTON[..], z.B. REX_MODULE_BUTTON, so könnte man sehr flexibel mehrspaltige Seiten erzeugen.
Vielleicht hat ja jemand eine Idee, wie man das umsetzen könnte.

LG

Pascal

[MAZup!]

Ja, lass uns sammeln, bin mit 100€ dabei. Vielleicht erbarmt sich ja jemand, der sich besser im Core auskennt als ich Hobbyscripter.

Ich arbeite seit Jahren sehr gerne mit Redaxo, beim Einsatz von jQuery oder anderen Sachen stoße ich aber regelmäßig an die Grenzen, das ist total schade. Hier noch ein anderer Thread mit Lösungsgedanken: http://www.redaxo.org/de/forum/template ... 19660.html

Für alle Denksportler: Wie erstellt man am einfachsten z.B. eine Reihe Tabs, von der man nicht weiß, wieviele Tabs es geben soll und mit welchen Inhalten (Module) die Tabs gefüllt sein sollen. Bin gespannt.

Gruß Matthias

[Sysix]

Ich beteilige mich auch mal am Thema

Sowas ist natürlich immer wünschenwert, aber dank Bootstrap und ein bisschen PHP kann ich euch auch eine brauchbare Alternative geben.

https://gist.github.com/Sysix-Coding/77 ... 880a47d899

@MAZup!
nenn doch bitte ein genauerers beispiel hab schon öfters solche Probleme gelöst.

Gruß Sysix

[MAZup!]

Hi,

dachte das Beispiel ist eindeutig, aber gut. Wie bildest Du das in Redaxo ab, wenn Du nicht weißt, wieviele <li> es geben wird und welches Modul im .tab-content eingesetzt werden soll:

Code: Alles auswählen

<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab1" checked />
        <label for="tab1">Description</label>
        <div id="tab-content1" class="tab-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
  
    <li>
        <input type="radio" name="tabs" id="tab2" />
        <label for="tab2">Specification</label>
        <div id="tab-content2" class="tab-content">
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo?</p>
        </div>
    </li>
</ul>

Gruß Matthias

[Sysix]

Deine Anforderung ist ein bisschen komisch, aber machbar

Zuerst würde ich paar Module erstellen, die für die Tabs geeignet sind.
Hoffe das war sowieso für dich klar.
Dann musst du dir immer den kleinen Aufbau für die Module machen, der ungefähr so aussehen würde:

Code: Alles auswählen

<?php

$content = <<<EOD
REX_HTML_VALUE[2]
EOD;

if(!isset($REX['faq-count']) && !$REX['REDAXO']) {
	$REX['tab-count'] = 1;
	$REX['tab-module'] = array(41, 25, 25); //Module ID´s
	$sql = rex_sql::factory();
	$sql->setQuery('SELECT id FROM `rex_article_slice` WHERE article_id = REX_ARTICLE_ID AND ctype = REX_CTYPE_ID AND modultyp_id IN (' . implode(', ', $REX['tab-module']) .') AND clang = REX_CLANG_ID');
	$REX['tab-max'] = $sql->getRows();
	
	
	echo '<ul class="tabs">';
} else {
	$REX['tab-count']++;	
}

?>
	<li>
        <input type="radio" name="tabs" id="tab<?php echo $REX['tab-count']; ?>" checked />
        <label for="tab<?php echo $REX['tab-count']; ?>">REX_VALUE[1]</label>
        <div id="tab-content<?php echo $REX['tab-count']; ?>" class="tab-content">
         <?php echo $content; ?>
        </div>
    </li>
<?php

if($REX['tab-max'] == $REX['tab-count'] && !$REX['REDAXO']) {

	echo '</ul>';	
	
}
?>

Ich frag mich aber grade, ob das nicht sinvoller wäre hier mit einer Artikelkategorie zu arbeiten und sie dort einfach mit einer schleife auszugeben Dann kannst du in dein tab-content sogar mehrere Module einfügen.

Gruß Sysix

PS: Kann man irgendwie ein neues Thema daraus machen ?

[site-concept]

Hi,

ich versuche es nochmal grafisch darzustellen.
Hier im ersten Screen wäre das der klassiche Fall von cTypes.
Ein Layout mit zwei Spalten und in jeder Spalte kann man beliebige Module einfügen.

Screenshot 1

Screenshot-1.jpg (103.46 KiB) 18852 mal betrachtet

Es geht um die Abbildung einer solchen Seite:

Screenshot 2

Screenshot-2.jpg (107.34 KiB) 18852 mal betrachtet

Im Prinzip ist das alles in einem cType, der über die gesamte Breite geht.
Die schwarz schraffierten Bereiche sollen beliebigen Content abbilden können.
Z.B. gibt es das Modul "Text mit Bild" und das Modul "YouTube Video".
Auf einer Seite setzt der Redakteur zwei Module nebeneinander auf der anderen Seite 3, mal in der Konstelation 50%/50% mal 25%/25%.
Die Markup-Umsetzung ist nicht das Problem, sondern die Struktur im Backend.
Ich stelle mir ein weiteres REX-Element vor von z.B. 10 Stück wie bei den Media/Link-Elementen.

Dann würde der Redakteur vorher überlegen was er anlegen möchte und hätte z.B folgende Block-Auswahlmöglichkeit:
## Inhalt (50% | 50%) ##
## Inhalt (25% | 75%) ##
## Inhalt (25% | 25% | 25% | 25%) ##

Dann würde ein Block angelegt werden, wo der Redakteur halt z.B. 2 oder 4 weitere Blöcke anlegen kann.
So könnte man jedes Modul flexibel einsetzen und müsste nichts doppeln.

LG

Pascal

[Thomas.Skerbis]

@site-concept
Genau das wäre in Redaxo nur dann machbar, wenn das Seitenkonzept komplett geändert wird, damit es ein Redakteur noch versteht. Evtl. ist das aber auch durch ein Addon realisierbar, das die klassischen Artikel ersetzt.

Vor den Blöcken müsste man

1. Sektionen definieren können (Rows) - inkl. Gestaltungsoptionen (z.B. Hintergrund, CSS-Style usw.)
2. Dann müsste man diese in Spalten einteilen können, am besten über definierte Templates

Danach könnte man die Spalten mit Blöcke befüllen.

Dies würde allerdings auch einiges der GUI abverlangen. Es sollte ja den Redakteur auch visuell helfen.

Screenshot-2.jpg

Ctypes. Damit gehts. Ein Ctype ist ein Ausgabebereich in einem Template. Erstell dir einfach ein Template mit 2 divs drin (links und rechts) und lass in jedem einen Ctype ausgeben.

Was, wenn man man darunter mit 3 Spalten arbeiten will? Ctypes sind ganz nett z.B. um einen Sidebarbereich und einen Footer zu definieren. Für das Content-Layout jedoch unbrauchbar.

[MAZup!]

@Skerbis

Anforderungen an die GUI? Also könnte man ein Template in ein Modul legen, wäre der Umgang mit dem Resultat ja für jeden Benutzer leicht verständlich (hier nochmal meine schöne Fake-Grafik mit dem Modul "3er Wrap", welches die drei Blöcke aus Pascals Grafik wiedergibt (jeder Block/cTpye wiederum mit beliebigen Modulen bestückbar), leider nur in meiner Fantasie):

[ externes Bild ]

@Sysix

Sehr interessanter Ansatz. Module beliebig einfügen und vor erstem und nach letztem die Wrap-Tags reinhängen. Finde ich richtig gut! Danke!

Gruß Matthias

[RexDude]

Also interessanter Ansatz mit dem 3er Wrap. Aber so wie Skerbis habe ich auch bedenken das der Redaktuer da noch durchsteigt. Vielleicht wäre es cooler wenn man in dem Wrap eine Tableiste einbaut. Es würde dann nur einen vertikalen Block einnehmen und die Tabs zeigen an dass es noch in die "horizontale" geht bzw. gehen kann (was aber auch den Cols enstsprechen würde). Kleiner Nachteil: Sichbar wäre nur ein Block (von 3 oder mehr) im Backend. Voll tragisch ist es aber auch nicht, weil man ja an den Tabs erkennt das da noch mehr Inhalt liegt (und mit einem Klick die sichtbar machen kann).

Man könnte es dann auch noch weiterspinnen und ein Modul machen welche nur ein Tab hat daneben noch ein + um weitere hinzuzufügen (so wie bei Firefox z.B.). Das ganze wäre ein Element was aus dem REDAXO Core is.

Normal mal so rumgesponnen...

[Thomas.Skerbis]

@MAZup!
Deine Idee entspricht ja meinem Vorschlag in etwa.
Mein Ansatz geht jedoch etwas weiter und schafft eine übergeordnete Ebene über den Blöcken.
Die Sektionen, die aus 1 Spalte oder mehreren Spalten bestehen können. Damit kann ich auch ein statisches Design aufbrechen und erhalte mehr Gestaltungsmöglichkeiten. Wenn man dann noch die Module per Drag & Drop verschieben kann, kann man sehr schön layouten.

Nur wenn ich 3 Spalten habe, sollte ich in der GUI aber auch 3 Spalten sehen.

[RexDude]

@Skerbis: Meinen wir das gleiche? (siehe meine Post vor deinem)
Ich würde aber nicht von Sektionen sprechen. Columns (= Spalten) wäre passender finde ich.

[Thomas.Skerbis]

@rexdude
nun ja, um Spalten zu schaffen brauche ich eine Zeile (row) oder Sektionen.
Auch die Zeilen / Sektionen müssen gestaltbar sein.

[RexDude]

Die Row haben wir ja schon = Slice
Darunter (horizontal angeordnet) sind die SliceColumns

[Oliver.Kreischer]

Hi,

cooler Ansatz. Ich hab 'n Eierlegendes-Wollmilchsau-Text-Bild-Link-Modul für das Bootstrap Grid gebaut.
Contenttechnisch erschlägt das bestimmt 90% der Anforderungen. Sofern andere Sachen benötigt werden (Bildergalerie, Formular usw..) baut man ja eh meist individuelle Module...

LG
Oliver

[RexDude]

Ich hab mich auch schon gefragt wie nötig so eine Funktionalität wirklich ist. Bis jetzt bin ich immer mit den Slices ausgekommen und hab dann halt innen mehere Tabs gehabt für die Rows. Was allerdings blöd ist, das man evtl. 3 mal den gleichen Modulcode reinbauen muss und evtl. auch mal die REX Vars ausgehen könnten wenns du läuft.

Ein anderer Gedanke. Manchmal hat man ja wirklich fest definierte Layouts also 66% Text links und 33% ein Video rechts. Wenn der nutzer dann auch 3 x 33% Videos reinhauen könnte wäre das vermutlich nicht im Sinne des Grafikers. Natürlich könne man allerdings schauen ob die "SliceColumns" nicht irgendwie vorbelegt daher kommen könnten.

Aber Flexibel (ein Merkmal von REDAXO ) wäre man halt schon mehr mit so einem Ansatz.
Ich glaub ich lass mir SliceColumns® gleich mal patentieren

[Oliver.Kreischer]

Ich glaub ich lass mir SliceColumns® gleich mal patentieren

Ich hol schon einmal die Messlatte

LG
Oliver

[Peter.Bickel]

Interessante Diskussion, die in verschiedenen Gruppen seit Jahren immer wieder geführt wird. Mit Bootstrap und Co. wird natürlich das Bedürfnis nach sowas immer größer. Nur: Eine weitere Zwischenebene auf Modulebene einzuziehen, z.B eine eigene Tabelle für Subspalten wie etwa rex_article_slice_columns, die sowas auf Core-Ebene ermöglicht, wäre nach meiner Einschätzung eine so gewaltige Änderung, dass ich nicht an eine Realisierung durch das Core-Team glaube ...

Ich denke, wir müssen uns da eher mit Workarounds behelfen, wo es aber auch eine Menge Möglichkeiten gibt. Hier meine vier Wege, die ich bisher immer angewandt habe:

1.
Handhabung innerhalb eines Moduls. Ein Modul bildet also immer eine Row ab. Das kann man z.B. so machen wie Rudi mit Tabs. Mein Ansatz ist der, dass ich ein Selectfeld anbiete, wo man die Zahl der Spalten definiert. Je nach Wahl blende ich mit Jquery die Felder für einzelnen Spalten ein oder aus. Siehe Screenshot oberer Teil. Je nach benötigten Funktionen braucht man dafür natürlich viele Felder, wodurch es mit den max. 20 REX_VALUES manchmal etwas knapp werden kann. Auch dafür gibt es Lösungsansätze (Daten als eine Art "Array" in ein Feld schreiben, aber das ist natürlich nicht ideal und etwas mühsam).

2.
Ein Modul bildet nur eine Subspalte ab. In diesem Fall muss der Redakteur nicht nur im Modul wählen, wie breit seine Spalte sein soll, sondern auch ob es sich um die erste, letzte oder eine mittlere Spalte handelt, damit man die Row öffnen oder schließen kann. Siehe Screenshot unterer Teil. Das ist natürlich etwas fehleranfällig, falls er Redakteur nicht gut mitdenkt.

3.
Bei Akkordeons oder Toggles, wo es auch mal recht viele Sub-Inhalte geben kann, wähle ich meist einen anderen Weg. Ich arbeite hier mit zwei Modulen, eines für die Eingabe und eines für die Ausgabe. Jedes Eingabemodul ist ein Tab oder ein Akkordeon und sammelt die Inhalte in einer Variable. Das Ausgabemodul gibt diese Variable dann lediglich aus. So kann man aber beliebig viele dieser Subinhalte innerhalb eines Akkordeonblocks verwalten.

4.
Die Variante 3 kann man statt mit Eingabemodulen auch mit Artikeln lösen. Das Ausgabemodul sammelt somit als nur die Inhalte der einzelnen Artikel und gibt diese aus. Dieser Weg eignet sich, wenn man in einem Subinhalt wiederum mehrere Subinhalte braucht, also wenn man z.B in einem Tab wiederum mehrere Module wie Text und Bild, Galerie, Downloads, etc. platzieren will.

Durch diese vier Wege kann man eigentlich schon eine ganze Menge abbilden. Verbesserungspotenzial sehe ich insbesondere bei der Nummer 1, wenn man also geschmeidig innerhalb eines Moduls mit Jquery per Drag & Drop Inhalte platziert. Bin also somit gespannt auf Anregungen und andere Lösungsansätze von Euch.

Lg,
Peter.

[RexDude]

Hui prima Ansätze Peter. Ein amtlicher Weg wäre aber auch cool. Man müsste halt generell mal darüber diskutieren ob man sowas als Teil von REDAXO sehen würde oder nicht. Ich fände es ganz cool denke ich weil man noch eine weitere Ebene dazu bekommt um seine Inhalt zu plazieren und ich nicht doppelten Code in Module packen muss, oder mir die REX Vars ausgehen oder ich manuell Tabs/Selectfelder dazubauen muss.

Selbst wenn es keine Core-Änderungen von seitens des Core-Teams hier geben würde: per EP's (vielleicht braucht man sogar nur 2 die die Slice Ein- und Ausgabe lösen und dabei die Slice Columns berücksichtigen) einer extra DB Tabelle wäre das vielleicht schon zu realisieren mit einem Addon.