Tutorial: Template erzeugen (Fractionsslider)

[Oliver Georgi]

Mit Unicode hat das nichts zu tun.

[kukki]

Fractionslider läuft ! siehe hier.
wie gewollt (V1 nur erst einmal mit Bildern im CP Bilder Special)
Eine Sache habe ich überbewertet , das mit den '"'s hat sich erledigt, die Browser ergänzen selber diese Stellen mit ", wenn man KEINE doppelten Hochkommas in den data-text setzt. Bei der Kontrolle mit FireBug und anschließend auch in anderen Browser war das Problem vom Tisch

Mein Template für CP Bilder special sieht wie folgt aus:

Code: Select all

<!--IMAGE_SETTINGS_START//-->
<!--IMAGE_SETTINGS_END//-->

<!--IMAGES_HEADER_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

 <div class="slide" id="fslider{ID}">
<!--IMAGES_HEADER_END//-->

<!--IMAGES_ENTRY_START//-->
	<img src="{IMAGE_REL}" alt="" {CAPTION} />
<!--IMAGES_ENTRY_END//-->
<!--IMAGES_FOOTER_START//-->
</div>
<!--IMAGES_FOOTER_END//-->

Das dazugehörige Costumer-Block-Element im Adminbereich {FSLIDER]:

Code: Select all

<!-- CSS: /template/lib/jquery/plugin/fSlider/css/fractionslider.css -->
<!-- CSS: /template/lib/jquery/plugin/fSlider/css/style.css -->
<!-- JS:  /template/lib/jquery/plugin/fSlider/jquery.fractionslider.min.js -->
<div class="slider"  data-in="slideLeft">
  <div class="fs_loader"></div>
  {FSLIDER}
  </div>
<!-- JS:
$(window).load(function(){
	$('.slider').fractionSlider({
	'fullWidth': false,
	'controls': true, 
	'pager':    true,
	'responsive': true,
	'dimensions': '600,400',
        'easeIn' : 'easeInExpo', // default easing in
        'easeOut': 'easeInCubic' // default easing out
	});
});
-->

Bestimmt ließe sich die ganze Sache noch optimieren, wenn man nur mehr wüsste zum Thema Templatesteuerung, die bisher nie preisgegeben wurde!

Wird fortgesetzt!

[Oliver Georgi]

…nicht zu empfehlen, da Quotes für Attribute zwingend sind, auch wenn Browser damit umgehen können. Ein Sonderzeichen zuviel und der Code fliegt einem um die Ohren. Als Lösung sicher erst mal eine Lösung…

[kukki]

Ja fein, dann gibt doch einfach mal für diesen Teil eine sichere Lösung bekannt, denn mit Jquery-DOM-Manipulation ist das nicht aus dem Ärmel zu schütteln. Ich habe mir auch CP-Trigger {CPCOMMENT} oder auch "Ausfiltern von Text" als Alternative angeschaut ... da fehlt mir ein wenig der PHP-Durchblick, was passiert habe ich begriffen, aber dass für dopplete/ einfach Hochkommas umzusetzen ....

[Oliver Georgi]

eine sichere Lösung habe ich genannt, wenn dir der fixe Aufbau der Parameter nicht genügt, geht auch eine WIN.INI Style Lösung und dann entsprechendes Parsing und Umsetzung mittels PHP. Alles weitere nicht kostenneutral realisierbar.

[kukki]

Erst einmal sind Texte nur möglich zu verwenden, wenn diese zuvor als Grafik erstellt wurden. Damit lassen sich diese wie schon vorher beschrieben als Bild verwenden und in den Slider einbauen.
Im Momet probiere ich noch aus. Wenn ich wirklich dahintersteige wie die CP-Temlates mit

Code: Select all

[ERSETZER]Rendere und ersetzte den {ERSETZER}, wenn dieser nicht leer/gültig ist[/ERSETZER] und [ERSETZER_ELSE]rendere den Fallback, wenn der Wert leer oder ungültig ist[/ERSETZER_ELSE]

funktionieren, damit wäre dann eine Text nach einer kleinen DOM-Manupulation möglich.

[kukki]

Habe mich seit Freitag mit diesem TRIGGER beschäftigt und habe versucht hinter das Geheimnis der {CPTRGGERVAR} zu kommen. Die Manipulation mit Jquery ist dermaßen kompliziert und unübersichtlich, dass ich es versuche mit diesem einfachen PHP-Code zu bewerkstelligen.

Mein Code dazu sieht jetzt wie folgt aus, der funktioniert auch einwandfrei, wenn ich den entsprechenden HTML-Code als $var durchlaufen lasse, es kommt (mit einem Echo kontrolliert) genau das raus, wie ich meinen Code manipulieren wollte:

Qellcode vor Manipulation:

Code: Select all

<img src="" alt="" data-in=right data-position=300,20 data-delay=2000 data-time=2750 /><p>infotext 3.1 leer</p>

Quellcode nach Manipulation:

Code: Select all

<p data-in=right data-position=300,20 data-delay=2000 data-time=2750 >infotext 3.1 leer</p>

Code: Select all

......
function CP_TEXTP($text, & $data) {
   if($data['acontent_type'] == 31) { // 31 is CP Image Special

   $var =strpos($text,'src=""');
   if ($var!=null){
        $text = str_replace('img src="" alt=""','p', $text);
        $text = str_replace('/><p>','>',$text);
		}
		$text = htmlentities($text);
   }
   return $text;
}
register_cp_trigger('CP_TEXTP');

Wo in dem entsprechenden *.tmpl für BILDER SPECIAL füge ich ein {CP_TEXTP} genau ein?
Gibt es mit dem Ablegen des Sriptes (ist der Name dann egal??) in frontend_init-Verzeichnis solche Konstrukte wie

[CP_TEXTP]{CP_TEXTP}[/CP_TEXTP]

Gibt mir bitte jemand darauf eine erschöpfende Antwort bzw. verbessert mich

[juergen]

Der Ersetzer Tag {CPDATE} wird im ContentPart platziert.

Und nur der !

Wichtig dabei ist eben einfach nur der zu ersetzende Ausdruck (evtl eingegrenzt auf die bezogene Contentpart - Art)

[kukki]

Ich habe es nicht verstanden, wie Du das meinst.

Mein CP...tmpl sieht an entscheidender Stelle so aus:

Code: Select all

<!--IMAGES_ENTRY_START//-->
<img src="{IMAGE_REL}" alt="" [CAPTION]{CAPTION}[/CAPTION] />[INFOTEXT]{INFOTEXT}[/INFOTEXT]
<!--IMAGES_ENTRY_END//-->

Was muss nun wirklich eingetragen werden, damit die von mir erstellte Funktion Ihre Arbeit ausführt, dass der Quellcode halt so wie oben gezeigt umgerubelt wird

Wichtig dabei ist eben einfach nur der zu ersetzende Ausdruck (evtl eingegrenzt auf die bezogene Contentpart - Art)

Die Einschränkung wurde ja bereits auf CP BILDER SPECIAL gemacht.

[EDIT 22:00 Uhr] Erst wurde immer nur HTML-TEXT angezeigt. Jetzt funktioniert es erst einmal mit diesem Trigger. Ich mußte htmlentries entfernen, weil vorher nur "text" und nicht HTML angezeigt wurde.

Code: Select all

      $text = htmlentities($text);

wurde aus den Script entfernt, es diente nur der BS-Anzeige

Und ... es gibt hier ein paar kleine Missverständnisse bei den Begriffen "Templates": es gibt da ein HTML-Template für die Website (ADMIN) und es gibt Templates für die CPs, und in denen dachte ich immer, müssen diese Funktionsaufrufe wIe {KUKKI} eingestellt werden. Noch unsicher, aber ich glaube, jetzt hats gefunkt.

[kukki]

Zwischenzeitlich hat der Programmierer die JS-files für den Fractionsslider V0.9.9 gefixt (vor drei Tagen). Einige Probleme mit dem IE wurden beseitigt. Leider ist das Download dafür etwas versteckt und nicht ohne Suchen auf der Website zu finden (GitHub)
Ergo muss ich diese Files nachtraglich aktualisieren, bevor ich auf meiner Spielweise ein Download für diese Slider-Plugin einrichten kann. Ich werde das ganze wieder als ZIP/RAR-File erstellen, die einzelnen Ordner/Files werden per FTP übertragen und nur das Websitetemplate muss ergänzt werden (Copy&Paste).
Seit heute früh laufen auch echte Text-Zeilen im Slider sauber mit, die CSS-Datei muss aber noch etwas verändert werden. Im CP Bilder-Special mit dem Template FSliderxxx.tmpl wird die Slider-Textzeile nur durch das Füllen des "infotext-Bereich" erreicht.

[update]

na, das geht ja ab!

[kukki]

So, jetzt haut wirklich alles hin, wie gewollt und wie gekonnt, ich werde dazu dann mal eine erste Websitebaster-Anleitung machen, ein paar data-Parameter bedürfen besonderer Beachtung. Der erzeugte Quellcode und CSS ist valide. Das Slider Plugin läuft nicht unter IE6 - ich denke, dass können wir vernachlässigen, es funktioniert unter FF, OP, CH, SF und InternetExplodierer zuverlässig und stabil.

Die Handhabung ist simple und schnell erledigt, einziger Beigeschmack, man muss die data-Parameter und deren Anwendung kennen. Es werden sich schnell bestimmte, mmer wiederkehrende Anwendungen herausstellen, die man oft benutzen wird. Ansonsten, ob mit Leerzeichen oder Enter, die Parameter werden sauber erkannt

Danke für die Geduld und die Verfolgung der Entstehung!

[kukki]

Der FractionsSlider steht als direkter Download bereit oder wer sich das noch einmal anschauen will, findet dazu hier alles nötige.
Viel Spaß beim Testen und Verbesserungen bzw. Erweiterungen sind gern gesehen- wie Bilder vorabladen, {TEMPLATE} ...

[kukki]

EDIT:

Seit 16.02.2014 habe ich in Zusammenarbeit mit meinem Hardwarespezi erfolgreich die Möglichkeit getestet, solche Layerslider/ NivoSlider auf externe Ausgabegeräte (moderne Monitore/ Fernseher/ HDMI/USB/WLAN u.U. auch auf Geräte mit eigener IP-Adresse) auszugeben. Durch einen Minihardwarezusatz können damit entsprechende Slider und sonstige Animationen aus phpWCMS heraus sowohl auf eigene als auch auf fremden Geräte angezeigt werden.

Der FraktionsSlider wurde mit neuster *.js versehen und ich habe die Struktur und das Template modifiziert/ optimiert. Beide Versionen laufen stabil.

[kukki]

In Vorbereitung auf einen Beta-Praxis-Test bin ich auf ein Problem gestoßen, dass ich bisher noch nicht bedacht hatte:

- die Zuordnung von mehreren class-Parametern in folgender Form:

Code: Select all

class= "par1 par2"

Sowie ich diese Form - eine Modifikation von class=par1 - benutz habe, kam es zu fehlerhaften generierten HTML-Code (F12)

Code: Select all

class= par1"" par2=""

oder bei Weglassen der " wurde die zweite Klassenzuordnung einfach überlesen

Die Idee auf früherer Basis von O.G:


Ergo mußte eine Lösung gefunden werden, die es ermöglicht, auch mehrere class-Parameter anzuwenden. Dafür wurde erst einmal die Begrenzer "%%" in der Form

Code: Select all

class= %%par1%% %%par2%%

eingesetzt und dann durch jQuery-DOM-Manipulation ausgefiltert und durch den korrekten Code ersetzt. Jetzt sieht das Ergebnis wie folgt aus, incl. durch den Slider selber noch dazugefügten class-Parameter:

Code: Select all

<p class="turky cl_tst fs_obj fs_obj_active" 
data-delay="1500" 
data-time="3750" 
data-in="left" 
data-position="11,3.75" 
data-step="2" 
style="font-size: 22.272px; 
line-height: 100%; 
opacity: 1; 
top: 11%; 
left: 3.75%; 
display: block;" rel="0" data-fontsize="24px">phpWCMS V 1.7x - ein modernes wCMS</p>