[GELÖST] Dynamische Inhaltsblöcke

mydom · 22. Juni 2011 09:25

Hallo zusammen.

Ich hab schon seit einiger Zeit etwas im Kopf was die Inhaltsblöcke und das Design von CMSms betrifft.

Nehmen wir mal an ich möchte folgende Designs erstellen (die roten Flächen sind die Inhaltsblöcke):
1 Inhaltsblock 2 Inhaltsblöcke 3 Inhaltsblöcke
Wenn ich diese 3 unterschiedlichen Layouts zur Auswahl haben möchte muss ich 3 Templates anlegen mit 1, 2 oder 3 Inhaltsblöcken ({content} bzw. {content block='Blockname'}). Das wäre an sich kein Problem.

Wie sieht es allerdings mit solch einem Layout aus:
Dynamische Blöcke
Bei diesem Layout müsste ich ein Template mit insgesamt 6 Inhaltsblöcken anlegen. Das ist zum einen sehr unübersichtlich und zum anderen muss bei jedem neuen Layout ein weiteres Template angelegt werden.

Mein Ansatz wäre nun ein einziges Layout anzulegen, welches nur einen Inhaltsblock beinhaltet, und alle weiteren Inhaltsblöcke im WYSIWYG-Editor nachzuladen. Das ganze könnte dann z.B. wie folgt aussehen:
Vorlage
Dadurch wäre man viel flexibler, müsste nur 1 Template anlegen und es wäre deutlich übersichtlicher.

Gibt es so etwas schon in irgendeiner Form? Falls nicht würde ich mich da ggf. mal dran machen bei Gelegenheit ein Modul zu entwickeln.

Folgendes wäre da von Nöten:
1. Anlegen von Inhaltsblöcken (HTML-Code welcher dann in den WYSIWYG-Editor kopiert wird)
2. Einfügen des CSS der Inhaltsblöcke in Frontend (durch Template) und im WYSIWYG-Editor (durch zusätzliches CSS)
3. addcontent.php, editcontent.php, addhtmlblob.php, edithtmlblob.php und ggf. Module erweitern sodass Inhaltsblöcke eingefügt werden können
4. Bei WYSIWYG-Editor verhindern dass leere DIVs gelöscht werden

Habe ich was vergessen und wäre so ein Modul überhaupt sinnvoll ? smile

Gruß

Andynium · 22. Juni 2011 10:47

So etwas ähnliches gibt es schon und kann dir dafür als Vorlage dienen

http://www.look-for-it.de/uploads/galapurity.zip

Zumindest kann man dort Inhaltsblöcke aktivieren/deaktivieren, wie von dir beschrieben ...

NaN · 22. Juni 2011 13:47

Meiner Meinung nach sollte das recht einfach umzusetzen sein.
Man muss doch für diese Blöcke nur unterschiedliche CSS Klassen definieren.
Diese werden dann im Dropdown "Format" angezeigt.
Dann markiert man einen Text und wählt dann über dieses "Format" Feld z.B. "Inhaltsblock links, soundso breit". TinyMCE packt das ganze dann in ein Span/Div-Element mit der klasse "left-soundso".
Fertig.
Muss man nur in den Einstellungen des TinyMCE dafür sorgen, dass jede Klasse eine Aussagekräftige Beschreibung bekommt, damit man damit etwas anfangen kann.
Sieht dann zwar nicht so toll aus wie der Screenshot, aber sollte alles mit Bordmitteln des TinyMCE zu regeln sein.

mydom · 22. Juni 2011 14:57

NaN schrieb:

TinyMCE packt das ganze dann in ein Span/Div-Element

Wie kann ich denn beeinflusse ob es in ein SPAN- oder DIV-Element gepackt wird? Wenn ich was markiere und ein Format anwende legt TinyMCE immer ein SPAN-Element an.

Klar wäre das eine Möglichkeit. Der Vorteil von einem WYSIWYG-Editor sollte jedoch sein dass ohne HTML-Kenntnisse Inhalt erzeugt werden kann und eben nicht händisch Elemente angelegt werden müssen. Wenn ich folgenden Code z.B. anlegen möchte:

Hier klicken, um den Code zum Kopieren zu markieren

<div class="floatLeft width30percent">
  Lorem ipsum dolor sit amet
</div>
<div class="floatRight width30percent">
  Lorem ipsum dolor sit amet
</div>
<div class="clear"></div>

müsste ich die DIVs manuell anlegen, wieder zur WYSIWYG-Ansicht wechseln, die Klassen vergeben und die Text eintragen.
Das ist schon sehr umständlich. Dann kann ich auch gleich die Klassen usw. im HTML-Modus dazu schreiben und brauch den Umweg über das Format nicht gehen. Außerdem ist das manuelle Anlegen von DIVs usw. sehr viel Fehleranfälliger, besonders bei komplexeren Layouts was für den Endkunden ohne HTML-Kenntnisse eher suboptimal ist.

Wenn es um einfache Sachen geht wie Floats, Rahmen, Farben usw. Ist das sicherlich ausreichend so. Aber für komplexere Layouts wie oben wäre das denke ich nicht sonderlich geeignet.
Das Beispiel von oben würde z.B. so aussehen:

Hier klicken, um den Code zum Kopieren zu markieren

<!-- BLOCK 1 -->
  <div class="one_third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="one_third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="one_third last">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="clear"></div>
  <div class="divider top"><a href="#">Top</a></div>
<!-- BLOCK 2 -->
  <div class="full">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="divider top"><a href="#">Top</a></div>
<!-- BLOCK 3 -->
  <div class="one_third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="two_third last">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="clear"></div>
  <div class="divider top"><a href="#">Top</a></div>

Hier müssten also 6 DIVs für den Content angelegt und den DIVs jeweils 1 oder 2 Format mitgegeben werden. Zudem müsste für die "Divider" mit Toplink jeweils 1 DIV angelegt werden mit 1 oder 2 Formaten (je nach dem ob ein Toplink oder nur Divider angezeigt werden soll). Dann wären da noch die 2 DIVs die die Floats clearen.
Das wären viele Handlungsschritte die recht fehleranfällig sind. Das ist sogar mir als Webdesigner zu viel. Wie soll man das dem Kunden vermitteln? smile

Mit einem Modul dass per Drag & Drop oder Klick die Blöcke anlegt wäre das deutlich einfacher.
3 Klicks und die Contentblöcke stehen mit Beispieltext, nochmal 3 Klicks und die Divider sind darunter. Nun kann der Inhalt noch angepasst werden und fertig wink

Ich werde, wenn ich mal ein wenig Zeit habe, das ganze versuchen umzusetzen.

Andynium · 22. Juni 2011 15:04

Gala-Purity (der TemplateBuilder von @Sonya) hat dir also nicht weitergeholfen?

nicmare · 22. Juni 2011 15:06

mydom, schau dir mal das "Benutzerdefiniertes Listenfeld:" an in den tinymce einstellungen.
da steht schon das drin:

Start expand/collapse-area|{startExpandCollapse id=\'expand1\' title=\'This is my expandable area\'}
End expand/collapse-area|{stopExpandCollapse}
---|---
Insert CMS version info|{cms_version} {cms_versionname}
---|---
Insert Smarty {literal} around selection|{literal}|{/literal}

Das kannst du einfach nach belieben erweitern. Benutzt wird es dann wie der cms linker als Werkzeug in der Leiste. Die Anpassung ist ja dann selbsterklärend oder?

nockenfell · 22. Juni 2011 16:31

nicmare schrieb:

mydom, schau dir mal das "Benutzerdefiniertes Listenfeld:" an in den tinymce einstellungen.

Den hätte ich in diesem Fall auch empfohlen. Wichtig zu wissen für dich: Im TinyMCE kann natürlich jedes Div irgendwie gelöscht oder verändert werden, wenn man nicht aufpasst.

Ein ganz anderer Ansatz wäre ein Modul zu programmieren in welchem du verschiedene Inhaltstypen definierst. (Vorbild z.B. das Cataloger Modul oder AdvancedContent mit dem Inhaltstyp "Erweiterter Inhalt")

dietzi · 09. September 2011 08:42

Ich experimentiere gerade mit GalaPurity, um verschiedene Inhaltselemente ein- und auszublenden ein geniales Template. Habe es auf AdvancedContent umgestellt und die Auswahl mit Checkboxen realisiert. Zusätzliche style-Blöcke im Kopfbereich blenden dann abhängig von der Auswahl nicht nur den Inhalt aus sondern das gesamte DIV und ändern gleichzeitig die Breite der anderen.

Was in diesem Zusammenhang noch interessant wäre, ich aber bis jetzt nicht auf die Reihe gekriegt habe, ist das template-Plugin von TinyMCE. Arbeitet jemand von euch damit?

Mit diesen beiden Techniken wären wohl die abenteuerlichsten Layouts möglich.

Nachtrag: Problem mit Template-Plugin gelöst.
http://forum.cmsmadesimple.org/viewtopi … ic=12138.0
http://forum.cmsmadesimple.org/viewtopic.php?t=49098

Beitrag geändert von dietzi (10. September 2011 17:56)

Forum für CMS/made simple

#1 22. Juni 2011 09:25

[GELÖST] Dynamische Inhaltsblöcke

#2 22. Juni 2011 10:47

Re: [GELÖST] Dynamische Inhaltsblöcke

#3 22. Juni 2011 13:47

Re: [GELÖST] Dynamische Inhaltsblöcke

#4 22. Juni 2011 14:57

Re: [GELÖST] Dynamische Inhaltsblöcke

#5 22. Juni 2011 15:04

Re: [GELÖST] Dynamische Inhaltsblöcke

#6 22. Juni 2011 15:06

Re: [GELÖST] Dynamische Inhaltsblöcke

#7 22. Juni 2011 16:31

Re: [GELÖST] Dynamische Inhaltsblöcke

#8 09. September 2011 08:42

Re: [GELÖST] Dynamische Inhaltsblöcke

Fußzeile des Forums