CP´s gruppieren in r530.. Tolle Neuerung

[Uwe367]

Für alle die gerne mit der Gruppierung von CP´s arbeiten hat OG eine schöne Neuerung in r530 eingebaut. Will man z.B. die gruppierten CP´s in einem Accordion oder in Tabs ausgeben, so braucht man die Klassen im Script nun nicht mehr den Klassen, die von phpwcms vorgegeben sind anzupassen, sondern man kann diese nun direkt in der conf.template_default.inc.php eintragen.

Original:

Code: Select all

// some more default classes
$template_default['classes'] = array(
	'tab-container'			=> 'tab-container',
	'tab-navigation'		=> 'tab-navigation',
	'tab-first'				=> 'tab-first',
	'tab-last'				=> 'tab-last',
	'tab-content'			=> 'tab-content',
	'tab-container-clear'	=> 'tab-container-clear',
	'tab-item'				=> 'tab-item',
	

Mit eingtragenen Klassen, z.B.:

Code: Select all

// some more default classes
$template_default['classes'] = array(
	'tab-container'			=> 'tab-container',
	'tab-navigation'		=> 'accordionButton',
	'tab-first'				=> 'tab-first',
	'tab-last'				=> 'tab-last',
	'tab-content'			=> 'accordionContent',
	'tab-container-clear'	=> 'tab-container-clear',
	'tab-item'				=> 'tab-item',
	

Nun werden die eingetragenen Klassen übernommen und gerendert.
Man muß in der Vorlage lediglich noch die entsprechende CSS Datei einbinden und den Pfad zur JS Datei angeben und schon läuft die Sache. Meiner Meinung nach ist das eine erhebliche Erleichterung da man nun fast jedes beliebige Script OHNE Anpassung an die, bisher fest vorgegebenen Klassen, verwenden kann.
Tolle Sache... Danke Oliver

[Jensensen]

...Man muß in der Vorlage lediglich noch die entsprechende CSS Datei einbinden und den Pfad zur JS Datei angeben und schon läuft die Sache...

Das hört sich sehr gut an - aber ich stehe auf dem Schlauch. Kannst Du das noch einmal näher erläutern?

[Uwe367]

Also.. es geht um diese Funktion:



Bis vor kurzem waren die Klassen, die beim aktivieren dieser Funktion erzeugt und gerendert wurden, fest vorgegeben und ein Script (Accordion, Tabs etc.) welches man im www fand mußte diesen Klassen

Code: Select all

tab-container
tab-item
tab-first
tab-last
tab-content
tab-container-clear

angepasst werden da sie vom System fest vorgegeben und nicht veränderbar waren.

Beispielsweise bei diesem einfachen Accordion Script.
JS:

Code: Select all

$(document).ready(function() {
	 
	//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
	$('.accordionButton').click(function() {

		//REMOVE THE ON CLASS FROM ALL BUTTONS
		$('.accordionButton').removeClass('on');
		  
		//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
	 	$('.accordionContent').slideUp('normal');
   
		//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
		if($(this).next().is(':hidden') == true) {
			
			//ADD THE ON CLASS TO THE BUTTON
			$(this).addClass('on');
			  
			//OPEN THE SLIDE
			$(this).next().slideDown('normal');
		 } 
		  
	 });
	  
	
	/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
	$('.accordionButton').mouseover(function() {
		$(this).addClass('over');
		
	//ON MOUSEOUT REMOVE THE OVER CLASS
	}).mouseout(function() {
		$(this).removeClass('over');										
	});
	
	/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	
	/********************************************************************************************************************
	CLOSES ALL S ON PAGE LOAD
	********************************************************************************************************************/	
	$('.accordionContent').hide();

});

CSS:

Code: Select all

.wrapper {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}

.accordionButton {	
	width: 800px;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	background: #003366;
	border-bottom: 1px solid #FFFFFF;
	cursor: pointer;
	}
	
.accordionContent {	
	width: 800px;
	float: left;
	_float: none; /* Float works in all browsers but IE6 */
	background: #95B1CE;
	}
	
/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/

.on {
	background: #990000;
	}
	
.over {
	background: #CCCCCC;
	}

Zugegeben ist das nun ein recht einfaches Script und hier ist die Anpassung recht einfach gewesen, aber es soll ja nur um ein Beispiel gehen.


Seit r530 können die Klassen aus dem Script selbst verwendet werden.

Hier nochmal der Original Auszug aus der conf.template_default.inc.php

Code: Select all

	'tab-container'			=> 'tab-container',
	'tab-navigation'		=> 'tab-navigation',
	'tab-first'				=> 'tab-first',
	'tab-last'				=> 'tab-last',
	'tab-content'			=> 'tab-content',
	'tab-container-clear'	=> 'tab-container-clear',
	'tab-item'				=> 'tab-item',

Der gerenderte Quellcode dazu:

Code: Select all

<div id="TABBOX-ec32c07eb24dc923747f1af4c062e1d3" class="tab-container">
	<ul class="tab-navigation">
		<li class="tab-item-1 tab-first tab-last"><a href="index.php#tab-beispieltab0" title="Beispieltab">Beispieltab</a></li>
	</ul>
	<div id="tab-beispieltab0" class="tab-content">
<div style="margin:20px 0 0 0;padding:0;" class="spaceBeforeCP"></div>

<p>Test</p>
	</div>
	<div class="tab-container-clear"></div>
</div>

Hier mit den Klassen aus dem Script, an entsprechender Stelle in der conf.template_default.inc.php:

Code: Select all

	'tab-container'			=> 'wrapper',
	'tab-navigation'		=> 'accordionButton',
	'tab-first'				=> 'tab-first',
	'tab-last'				=> 'tab-last',
	'tab-content'			=> 'accordionContent',
	'tab-container-clear'	=> 'tab-container-clear',
	'tab-item'				=> 'tab-item',

Und der gerenderte Quellcode auch hier dazu:

Code: Select all

<div id="TABBOX-ec32c07eb24dc923747f1af4c062e1d3" class="wrapper">
	<ul class="accordionButton">
		<li class="tab-item-1 tab-first tab-last"><a href="index.php#tab-beispieltab0" title="Beispieltab">Beispieltab</a></li>
	</ul>
	<div id="tab-beispieltab0" class="accordionContent">
<div style="margin:20px 0 0 0;padding:0;" class="spaceBeforeCP"></div>

<p>Test</p>
	</div>
	<div class="tab-container-clear"></div>
</div>

Anbei noch 2 Screenshots wie ich das mit dem "Einbinden der JS und CSS Datei in der Vorlage" meine....





Hoffe diese Erläuterung hilft ein wenig weiter zu verstehen was ich meine.

[Jensensen]

Vielen Dank für Deine Erläuterungen.
Das ist wirklich eine tolle Erweiterung. Aber ehrlich gesagt verstehe ich noch immer nicht, welche CP=contentparts dadurch wie gruppiert werden.

Jedenfalls können moderne CSS-Frameworks nun leichter eingebunden werden.
Bei image listings bspw. gab es keine Möglichkeit, eigene Klassen einem A HREF oder dem IMG tag zuzuweisen. Man musste bis dato eigene DIV herum bauen.

div
{image}
/div


Nun gibt es deutlich mehr Flexibilität. So erhält man z.B.

div
a href class="MY_ABC"
img src class="MY_XYZ"
/a
/div

Hinweis: Diese Styles sollten NICHT in der
/config/phpwcms/conf.template_default.inc.php
eingetragen werden, da diese Datei bei einem Update überschrieben wird!

Besser ist es, eigene Vorlagen zu verwenden! Diese befinden sich unter:
/template/inc_settings/template_default/blah.php

vgl.
https://github.com/slackero/phpwcms/blo ... lt.inc.php
https://github.com/slackero/phpwcms/com ... nt-2645361
https://github.com/slackero/phpwcms/issues/19
http://forum.phpwcms.org/viewtopic.php?f=1&t=23906

[Uwe367]

Aber ehrlich gesagt verstehe ich noch immer nicht, welche CP=contentparts dadurch wie gruppiert werden.

Dann schau mal hier... http://www.phpwcms-howto.de/wiki/doku.p ... ple-tabs?s

Das ist damit gemeint und bei dieser Funktion kann kein Template ausgewählt werden, wie z.B. beim CP Register/Tabs
Hier geht es darum CP´s in einer Tab- oder Accordiongruppe zu gruppieren.

Du hast in jedem CP die Möglichkeit die Funktion Register(Tabs) zu aktivieren. Das bewirkt, daß mehrere CP´s in einem Artikel durch gleiche Benennung von Register und Abschnitt in eine Gruppe zusammengefasst werden können.

[kukki]

Bis vor einem Jahr mag der hiesige Teil aktuell gewesen sein, aber auch an dieser Stelle gab es nun kleinere Änderungen, zumindest, was man im Backend sehen kann:

1. Stellt sich für mich erst einmal die Frage, hat sich an dem oben geschilderten Vorgehen von UWE etwas geändert? Was/ Wie?
2. kann man diese Gruppen ud deren Zuordnung selber einstellen/ konfigurieren?
   Das wäre für den Fall interessant, wenn man CPs zu einer Gruppe zusammenstellt, die dann für einen Slider/ Accordion/ Register verwendet werden sollen. Bestenfalls, wo kann man da einstellen

[nameless1]

das liefert dir grundsätzlich den aufbau für die jeweilige js action:

tab
accordion

[kukki]

Wie die Dinger (Tab/ Register) funktionieren wollte ich nicht wissen, vielmehr interessiert mich die Gruppierung und wie die (vielleicht erweiterbare) Konfiguration/ Einstellung für andere Anwendungen als "nur" Tabs und Register funktionieren könnte. Mir gehen dabei Anwendungen durch den Kopf, wie "Fraktionslider", denn da möchte ich gerne noch mehr Flexibilität rein bekommen und mehr an CPs, als nur Bilder-Spezial. Da wäre eine solche Gruppierung ideal, oder?

[Uwe367]

Schau dir mal das hier an:
https://github.com/slackero/phpwcms-ext ... dAccordion

Wenn du dieses Script enstsprechend deinen Wünschen umbaust sollte das theoretisch klappen. Allerdings hat das ganze auch den Nachteil daß du mit dieser Funktion nicht auf verschiedene Scripte, z.B. Slider und Accordion und Tabs, zurückgreifen kannst da diese Funktion systemweit agiert und kein Template ausgewählt werden kann. Willst du verschiedene Scripte ansteuern, so müssen wieder Templates für die entsprechenden CP´s her.
So sehe ich das jedenfalls.

[kukki]

Hallo Uwe,
Danke für diese Stütze - wieso suche ich nicht auch in GitHub ....
weiß ich selber nicht Für mich als "alten Knacker" ist das Forum und das HOWTO:WIKI der Ort zum Suchen ...

Tja, dass man für die entsprechenden CPs angepasste neue Template erzeugen muss, war mir schon klar, eventuell auch noch eine DOM-Maniplulation ...
Was mich aber bisher abgehalten hat, sind die teilweise nur einsilbigen Makros in den Templates, die leider sehr stark von einander abweichen. Hier würde ich es gerne sehen, wenn OG endlich allgemeingültige Makros einführt, Standardtemplates mit den "einsilbigen Makros wie bisher - o.k., soll für den Standardanwender so bleiben- und in den Custumer-Templates ALLE Makros zuläßt, so dass man unter Umständen auf alternative HTML-Code-Konstrukte ausweichen kann, die von den entsprechenden {MAKRO}{/MAKRO} erzeugt werden.

Will damit sagen:
Wer weiß wirklich aus dem Kopf was { IMAGE } für ein HTML-Konstrukt erzeugt und ob ich all das genauso gebrauchen kann oder ob ich mir den Kram nicht einfach selber zusammenstelle mit Hilfe von

Code: Select all

 [URL]<a href="{URL}"[URL_TARGET] target="{URL_TARGET}"[/URL_TARGET]>[/URL]
       <img src="{IMAGE_REL}"[TITLE] title="{TITLE}"[/TITLE] width="{IMAGE_WIDTH}" alt="[ALT]{ALT}[/ALT]" />[URL]</a>[/URL]

und das halt in JEDEM Costumer Template

Wenn das (sinnvoll) ginge - nur für Costumer-Templates, könnte man wunderbar Templates für teilweise recht aufwendige (Content-)Slider erzeugen, diese CPs mit den Costumer-Templates gruppieren und mit einem JScript auf den Bildschirm zaubern. Das würde auch dazu führen, dass man über all diese {Makros} Bescheid wüsste, ich kenne garantiert nur <=70% von diesen ... So denke ich mir das

[Uwe367]

Tja, dass man für die entsprechenden CPs angepasste neue Template erzeugen muss, war mir schon klar, eventuell auch noch eine DOM-Maniplulation ...

Nicht daß hier jetzt ein Mißverständnis aufkommt....
Wenn CP´s mit dier hier angesprochenen Funktion gruppiert werden sollen braucht es KEIN separates Template. Dafür ist dann das Script im Verzeichnis frontend/render zuständig.
Nimm dir mal das Script von OG von Github und probiers einfach mal aus und arbeite mal den Quellcode an der Stelle durch den das Script generiert. Dann wird ganz schnell einiges klar

[kukki]

Ich denke, dass ich nicht richtig verstanden werde. Und deswegen versuche ich es noch einmal:

das FraktionSlider-Plugin funktioniert derzeit nur mit CP BilderSpezial - leider. Ich habe schon die Sache insowiet aufgebohrt, dass es mir gelungen ist, mit diesem CP auch NUR Texte in den Slider einzubringen. (siehe hier) --> die Texte sind von Suchmaschinen lesbar
Nur die rote schräge Textzeile ist eine Grafik.

Jetzt wäre es interessant, wenn man in einem Artikel mehrere unterschiedliche CPs zur einer Gruppe zusammenfassen kann und diese nicht in einem Accordion oder Registertab wiederfindet, sondern in einem von mir bestimmten Cotumer Block/ Slider, eben in dieses Plugin. Damit würde man jegliche (sinnvolle) CPs (Text/ Text mit Bild/ Bilder aller Art/ { SHOW_CONTENTs }, gerenderte HTML/ PHP-Scripte] in einen Costumer-Bereich/ Block integrieren können. Das wäre dann mein Ziel. Eigentlich steckt irgendwie die Lösung schon in meiner Formulierung, die bisherigen CPs werden mit einem eigenen Template umgestaltet/ angepasst. Ohne Template gehts halt nicht.

Auch wenn ich mir das Script von OG anschaue, bringt es mich nicht weiter, weil ich davon nicht sehr viel verstehe, ich bin halt kein PHP-JScript-Programmierer. und habe nur Ideen in meinem Kopf, die ich versuche mit Boardmitteln und einfachen Scripterweiterungen umzusetzen. Anscheinend ist aber diese Gruppierung nur für RegTabs und Acc. gedacht

[Uwe367]

Ich habe dich schon richtig verstanden Kukki und das was ich schrieb müßte, rein tehoretisch gesehen, auch funktionieren. Um dieses Script https://github.com/slackero/phpwcms-ext ... ordion.php zu lesen muß man auch nicht unbedingt mit PHP vertraut sein. Man muß an den entsprechenden Stellen im Script die Klassen erstetzen damit dein Script (z.B Slider) getriggert wird. Natürlich solltest du auch alles was zu deinem Slider gehört in die entsprechenden Verzeichnisse kopieren. Leider habe ich momentan keine Zeit das selbst zu testen, aber rein theoretisch gesehen sollte das klappen.
Man möge mich korrigieren wenn ich nun den absoluten Nonsens verzapft habe sollte.