Tutorial: Template erzeugen (Fractionsslider)

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
User avatar
Oliver Georgi
Site Admin
Posts: 9559
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by Oliver Georgi » Fri 3. Jan 2014, 13:02

Mit Unicode hat das nichts zu tun.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by kukki » Fri 3. Jan 2014, 17:14

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
	});
});
-->
Image

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!
Last edited by kukki on Sun 12. Jan 2014, 11:23, edited 6 times in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9559
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by Oliver Georgi » Fri 3. Jan 2014, 17:17

…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…
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by kukki » Fri 3. Jan 2014, 17:26

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 .... :roll:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9559
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by Oliver Georgi » Fri 3. Jan 2014, 17:47

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.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by kukki » Thu 9. Jan 2014, 11:57

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.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by kukki » Sat 11. Jan 2014, 19:45

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 :wink:
Last edited by kukki on Sat 11. Jan 2014, 23:29, edited 2 times in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
juergen
Moderator
Posts: 4553
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by juergen » Sat 11. Jan 2014, 19:52

wiki wrote: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)

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by kukki » Sat 11. Jan 2014, 20:35

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 :?:
juergen wrote: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 :oops:

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.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by kukki » Sun 12. Jan 2014, 11:46

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. :idea:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by update » Sun 12. Jan 2014, 12:58

na, das geht ja ab! ;)
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by kukki » Sun 12. Jan 2014, 18:28

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.:D 8)

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 :mrgreen:

Danke für die Geduld und die Verfolgung der Entstehung!
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by kukki » Thu 16. Jan 2014, 10:24

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} ... 8)
Last edited by kukki on Mon 17. Feb 2014, 15:17, edited 1 time in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by kukki » Mon 3. Feb 2014, 11:17

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.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Tutorial: Template erzeugen (Fractionsslider)

Post by kukki » Sun 28. Sep 2014, 16:29

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:
Image

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>
Last edited by kukki on Mon 29. Sep 2014, 09:56, edited 1 time in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Post Reply