WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 20.05.2017 12:27:08

stefanek
Developer

[Tutorial] Even/Odd Hintergründe je Abschnitt

Ein kleines Tutorial.

Es geht um dieses Template:
http://www.zerotheme.com/demo/?cat=full&temp=zGoodFood

Eine Kundin von uns hat sich eine Verwendung dieses Templates gewünscht und es lag ihr besonders daran, die Hintergrundfarbe jeder Section, wie auch im Beispiel, abwechselnd darzustellen (weiß/grau/weiß/grau usw.). Oder wie wir sagen "even-odd".

Mit den Board-Mitteln geht es nicht, da die page_content() Funktion den ganzen String aller Abschnitte eines Layout-Blocks ausgibt.
Eine eigene Funktion musste her.

Diese Funktion gibt ein Array zurück und man kann die Inhalte und einige weitere Informationen dann nach Belieben weiterverarbeiten.
               
Je nach Template muss man es etwas anders machen, aber in dem oben verlinkten Template, wenn man dieses even/odd Verhalten hervorbringen will, ersetzt man einfach den Aufruf page_content() mit dem folgenden Code.

Schritt eins:
bennene die Datei block_contents.php.txt um und schiebe sie in den Template Ordner. (Mann die Funktion auch anders einbinden, aber ich will das Tutorial knapp halten.)

Schritt zwei:
Platziere den Code anstelle von page_content();

<?php 
include 'block_contents.php'; //die Datei muss im Template Ordner drin sein.
foreach(block_contents() as $section):
	$color = ($section['evenodd'] == 'even') ? 'gray' : 'white';
	?>
	<section class="content-box background-<?=$color?> box-<?=$section['position']?> zerogrid">
		<div class="row wrap-box">
			<?=$section['content']?>
		</div>
	</section>
<?php endforeach; ?>

Vielleicht kann es der ein oder andere mal verwerten.
In diesem Falle: viel Spaß.

Christian

P.S. Bei Fragen einfach schreiben.
[Eine neuere Version dieser Funktion ist weiter unten im Thread zu finden. Ich lasse diese trotzdem angehängt, um die Unterschiede aufzuzeigen.]

Beitrag geändert von stefanek (20.09.2017 09:06:51)


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#2 20.05.2017 12:49:22

florian
Administrator

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Vielen Dank für das Tutorial, allerdings ist die Aussage "mit Boardmitteln geht es nicht" m.E. nicht ganz zutreffend.
Auch mit Boardmitteln lässt sich sowas realisieren, man ist dann halt nur nicht so flexibel. Man überlegt in diesem Falle im Vorfeld, wie viele "Zebrastreifen" es maximal braucht, und legt dann entsprechend viele Blöcke an, also in etwa so:

<div class="grey">
<?php echo page_content(1); ?>
</div>

<div class="white">
<?php echo page_content(2); ?>
</div>

<div class="grey">
<?php echo page_content(3); ?>
</div>

<div class="white">
<?php echo page_content(4); ?>
</div>

usw.
(Das ist ganz einfacher Beispielcode, der lässt sich natürlich ebenfalls noch eleganter mit Arrays, Schleifen und Notwendigkeitsabfragen umsetzen, ich wollte hier nur das Prinzip verdeutlichen. Deshalb auch kein Syntaxhighlighting.)

Wobei es dann natürlich der Disziplin desjenigen, der für das Pflegen der Inhalte zuständig ist, obliegt, den richtigen Block auszuwählen und immer nur einen Abschnitt je Block zu hinterlegen.

Die im Tutorial präsentierte Methode ist natürlich eleganter. Wie gesagt, ich wollte nur die Aussage "Geht nicht" relativieren.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 20.05.2017 15:28:41

stefanek
Developer

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Ja, das stimmt.
Es würde theoretisch auch so gehen.
Doch praktisch würde es wirklich ein Overhead sein, selbst wenn man es selbst (also als Nicht-Laie) machen würde. Vor allem wenn es mehr als 5-10 Sections wären. Und dann verschiebt man eine Section und muss wieder von vorn anfangen mit der Zuordnung des Layout-Blocks lol

Ich denke, meine Methode ist auch eher für anspruchsvollere Anwender gedacht, die sich an etwas PHP im Template rantrauen.
Die Funktion selbst gibt ja erstmal nur das Array zurück.
Damit kann man dann viele andere Sachen machen.
Z.B. für einen seitlichen Layout-Block könnte man sich Inhalte mit einer Collapse Funktionalität bauen.

Also ich habe es hier geteilt als Anregung.
Relativ ist eh alles und wird vom Gesichtspunkt (und Wissensstand) des Betrachters moduliert.

Ich denke auch nicht, dass das oft gebracht wird. Aber für den Fall "dass", ist es hier schon mal für die Anderen aufgehoben. (Aber auch für mich; es kommt oft vor, dass ich Google nach alten Sachen melke, die ich irgendwo im Netz hinterlassen habe.) monkey

Gruß,
Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#4 20.05.2017 15:31:24

stefanek
Developer

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Übrigens, man müßte in Deinem Beispiel nocht einige if Abfragen einbauen, also auch erst den Content der Ausgabe von page_content(N) mit OutputBuffern sammeln, ob da was ist....  Aber ja, es würde gehen.


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#5 20.05.2017 17:30:23

florian
Administrator

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Ja, Stef(an)ek. Weiß ich selbst. Wie schon geschrieben:

(Das ist ganz einfacher Beispielcode, der lässt sich natürlich ebenfalls noch eleganter mit Arrays, Schleifen und Notwendigkeitsabfragen umsetzen, ich wollte hier nur das Prinzip verdeutlichen. Deshalb auch kein Syntaxhighlighting.)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#6 20.05.2017 23:15:02

stefanek
Developer

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Ich weiß, dass Du das weißt. Wollte nur Deine Relativierung relativieren.  tongue

Noch was zur Funktion:
dadurch, dass der Inhalt nicht sofort über Echo ausgegeben wird, kann man diesen mit eigenen Funktionen (string replace, regex etc. weiter filtern/formatieren). Das geht auch mit Boardmitteln (OpF Dashboard, Droplets), doch manchmal ist es gewünscht, es direkt im Template zu machen.

Noch mehr zur angehängten Datei:
Es gibt da auch eine alternative Funktion der sich an Board befindenden Funktion page_contents().
Mit dieser alternativen Funktion kann man die Inhalte mit einem zusätzlichen Parameter über return ausgeben, statt über ein echo.

Gruß,
Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#7 21.05.2017 06:47:08

florian
Administrator

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Eine noch einfachere Möglichkeit, Inhalte abwechselnd formatiert auszugeben ist, den betr. Inhalt über das Modul Itemz zu generieren. Das hat nämlich den Platzhalter [MROW], der für die Itemz in einer Gruppe immer abwechselnd 1 und 2 ausgibt, sodass man in diesem Falle dann eben die CSS-Klassen div1 und div2 statt grey und white hätte. Im Template muss dann gar nichts weiter geändert werden.
Mit Itemz hätte man für das GoodFood-Template dann auch gleich die Bilderauswahl.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

screamindan

#8 21.05.2017 09:41:56

stefanek
Developer

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Gut. Natürlich ginge das für kleinere Textinhalte mit Itemz und einer Auswahl anderer Module auch.
Doch wenn Du z.B. eine Section WYSYWIG hast, gefolgt von einem Kontaktformular, dann würde es nicht funktionieren.
Es ändert dank meiner Herangehensweise jede nöchste Section die Farbe, nicht jedes Item.

... ihr [lag] besonders daran, die Hintergrundfarbe jeder Section, wie auch im Beispiel, abwechselnd darzustellen (weiß/grau/weiß/grau usw.). Oder wie wir sagen "even-odd".
Mit den Board-Mitteln geht es nicht, da die page_content() Funktion den ganzen String aller Abschnitte eines Layout-Blocks ausgibt. ...

Und darüber hinaus würde das ganze, grade im Template zGoodFood mit Itemz nicht wirklich gut funktionieren (und gehört Itemz zu den Board-Mitteln), oder es wäre viel umständlicher das Layout für Itemz zu erstellen als das Template anzupassen.

Vielleicht hat jemand eine andere Idee, wie es mit Board-Mitteln doch geht (die Möglichkeit mit den unterschiedlichen Layout-Blöcken ist leider nicht automatisch genug).
Mir geht es nicht darum recht zu haben, sondern eine einfache Möglichkeit verfügbar zu machen.

Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#9 21.05.2017 19:25:54

jean
Mitglied

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

... ich habe das wohl nicht ganz verstanden, aber die Abschnitte sind doch fortlaufend als child im Markup angeordnet und können über tag:nth-child(odd) und tag:nth-child(even) formatiert werden, auch ohne daß man extra Klassen ins Markup einfügt ...
http://caniuse.com/css-sel3

Offline

Liked by:

florian

#10 21.05.2017 21:10:32

stefanek
Developer

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Hallo Jean.

jean schrieb:

die Abschnitte sind doch fortlaufend als child im Markup angeordnet

Sind sie?
Meines Wissens nach wird nur der "Section Anker" vor jede ausgegebene Section angefügt, wenn er in den Settings festgelegt ist.
(Nachzulesen hier: https://github.com/WBCE/WBCE_CMS/blob/m … .php#L327)

Selbst aber wenn sie es wären, damit wäre es nicht getan, denn das Beispiel von Florian war wirklich sehr vereinfacht dargestellt im Vergleich zu dem Template welches ich im OP verlinkt habe.

Mit meiner Funktion kannst Du aber genau das machen. Jede Section separat in ein DIV oder Deinen Wunsch-Markup hüllen.



Am besten einfach das Template das ich oben verlinkt habe downloaden und das Markup dort anschauen. Es ist etwas mehr verschachtelt als nur <div class="white"></div><div class="grey"></div>

Allgemein: meine Funktion soll als Anregung dienen. Mein Hinweis, dass es mit Boardmitteln nicht geht soll bitte nicht so gedeutet werden, als wäre etwas daran auszusetzen.
Deswegen ist das System doch modular aufgebaut, dass man sich solche Sachen, auch fürs Template, nachrüstet.

Gruß,
Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#11 23.06.2017 21:29:45

kleo
Mitglied

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Ich bin selbst an solche Gedanken gekommen, mit abwechselnden Formatierungen zu arbeiten.

Als Beispiel man hat einen Block (1), der 100% Breite hat, dann 3 Blöcke in einer Reihe (2), die jeweils 33% Breite haben, dann SIdebar Links und Mainblock mit 25% und 75% (3), dann Mainblock und Sidebar Rechts mit 75% und 25% (4).

Und auf der Seite sollen diese Reihen beliebig kombiniert werden:
    (1)
    (3)
    (1)
    (2)
    (1)
    (3)
    (2)
    usw...

Natürlich geht so was mit einer entsprechender Anzahl von Sectionen und einer festgelegter Struktur der Reihen, elegant ist es auf jeden Fall nicht.

Geht es vielleicht mit dieser Lösung?
Oder irgendwie anderes?

P.S. Man sieht oft sowas änliches bei Demos von modernen Templates und natürlich bei großen Webseiten und Portalen. Für kleine und mittlere Projekte mit WBCE wäre sowas auch interessant...

Beitrag geändert von kleo (23.06.2017 21:33:50)

Offline

#12 23.06.2017 21:34:52

florian
Administrator

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Eventuell damit (ich habe keine Erfahrung mit dem Modul und habe es selbst noch nicht probiert)
https://dev4me.com/modules-snippets/ope … e-columns/


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#13 23.06.2017 21:46:28

kleo
Mitglied

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Vor ein paar Monaten habe ich das Modul installiert und wollte testen, bin aber damit nicht klar gekommen.

Und ich glaube, das Modul ist für etwas anderes vorgesehen, als das, was ich meine.

Offline

#14 23.06.2017 21:57:20

florian
Administrator

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Itemz.
Mehrere Itemz-Abschnitte (also nicht Gruppen) auf einer Seite, die dann jeweils mit dem Code für 33 / 50 / x %.
Das Template selbst braucht nur einen Hauptblock.
Setzt dann aber voraus, dass wirklich alle Seiten mit Itemz oder ähnlichem (Topics, OneForAll) realisiert sind.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#15 03.09.2017 13:05:25

stefanek
Developer

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

kleo schrieb:

Ich bin selbst an solche Gedanken gekommen, mit abwechselnden Formatierungen zu arbeiten.

Als Beispiel man hat einen Block (1), der 100% Breite hat, dann 3 Blöcke in einer Reihe (2), die jeweils 33% Breite haben, dann SIdebar Links und Mainblock mit 25% und 75% (3), dann Mainblock und Sidebar Rechts mit 75% und 25% (4).

Und auf der Seite sollen diese Reihen beliebig kombiniert werden:
    (1)
    (3)
    (1)
    (2)
    (1)
    (3)
    (2)
    usw...

Natürlich geht so was mit einer entsprechender Anzahl von Sectionen und einer festgelegter Struktur der Reihen, elegant ist es auf jeden Fall nicht.

Geht es vielleicht mit dieser Lösung?
Oder irgendwie anderes?

P.S. Man sieht oft sowas änliches bei Demos von modernen Templates und natürlich bei großen Webseiten und Portalen. Für kleine und mittlere Projekte mit WBCE wäre sowas auch interessant...


Hallo Kleo,
ich habe Deinen Beitrag erst jetzt gesehen. Bin in letzter Zeit wenig online gewesen, weil ich am umziehen war und nur wenig Zeit für's Backen erübrigen konnte.

Was Du da darstellst ist schon etwas länger her gewesen, ich kann nicht ganz nachvollziehen, was Dir vorschwebt. Vielleicht wenn Du ein Screenshot schickst oder einen Link parat hast, damit ich es mir bildlich besser vorstellen kann.... dann kann ich Dir auch besser antworten und vielleicht auch eine brauchbare Lösung bereitstellen.

Schönen Gruß,
Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#16 19.09.2017 22:07:41

stefanek
Developer

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Update der obigen Funktion.

Heute wollte ich auf die Schnelle ein Menü zu den Sections machen. Als Menüpunkte dienen die Namen der Section ("namesection").

Ich musste dazu die obige Funktion etwas erweitern und um section_name ergänzen.

Der Code um dann das Menü zu generieren und die Sections auszugeben ist wie folgt:

<?php

// packe die ganzen Sections des Block 1 in ein Array
$aSections = block_contents(1);

// mach ein Menü zu den Sections
?>
<ul class="style das Menü nach Belieben">
<?php
foreach($aSections as $section){
	// href wird der name der Section mit Unterstrichen statt Leerzeichen
	echo '<li><a href="#'.str_replace(' ', '_', $section['section_name']).'">'.$section['section_name'].'</a></li>';	
}
?>
</ul>


<?php
// anschließend gebe die sections aus 
foreach($aSections as $section){
        // die ID hier ist wieder der name der Section mit Unterstrichen statt Leerzeichen
	echo '<div id="'.str_replace(' ', '_', $section['section_name']).'">';
	echo $section['content'];
	echo '</div>';	
}
?>

Mit dieser Funktion kann man auf eine einfache Weise ein OnePage Template machen bei dem die Menü-Punkte aus "namesection" generiert werden.

Aber auch viel mehr läßt sich machen, z.B. könnte man einen Block anlegen dessen Sections alle in ein Accordion oder einen Slider gesetzt werden.
Der Kreativität sind an dieser Stelle dann keine Grenzen mehr gesetzt. Das obige ist das einfachste denkbare Muster.

Viel Spaß,
Christian

Beitrag geändert von stefanek (19.09.2017 22:25:19)


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

#17 28.05.2018 16:26:31

stefanek
Developer

Re: [Tutorial] Even/Odd Hintergründe je Abschnitt

Ein "greifbares" Verwendungsbeispiel der obigen Funktion ist hier in Form eines Templates zu finden.
Anhand des Codes kann jeder mit einigen PHP Kenntnissen nachvollziehen, wie die Funktion sonst noch verwendet werden könnte.

Christian

Beitrag geändert von stefanek (28.05.2018 17:44:03)


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

Fußzeile des Forums

up