[pk_noobslide] Alle Artikel als Inhaltselement oder Modul

Ich benutze den Noobslider im Header, der immer angezeigt werden soll. soll sozusagen ein Produktslider darstellen.
Diesen slider hab ich dann auch auf jeder Seite neu stehn.

Falls nun eine Änderung kommt, muss ich dann jeden kompletten Artikel wieder ändern bzw in die einzelnen Seiten reinkopieren.

Gibts da noch ne Möglichkeit, dass ich das wie bei einem Inhaltselement oder es wie als Modul zu behandeln oder umzumodeln ist. Oder ich es in das ins Seitenlayout einbinden kann?
Dann wäre es auf jeden Fall für den Endbenutzer benutzerfreundlicher. Gibt es da schon ne Lösung? Oder hab ich dafür die falsche Erweiterung benutzt?

Hallo Mark,

erstelle eine neue Seite (nicht im Menü anzeigen, veröffentlicht).
Dort bindest Du den Artikel mit dem noobSlider ein.
Dann erstellst Du ein Modul (HTML), in dem Du den Insert-Tag einfügst, der den Inhalt des Artikel ausgibt. Dieses Modul dann in das Seitenlayout einbinden (Kopfzeile).

Alle Änderungen, die dann innerhalb des Artikel gemacht werden, wirken sich auf allen Seiten aus, denen das Seitenlayout zugewiesen ist.

Voilà :)

Sehr geil planepix,
genau diese Antwort habe ich gesucht. Und dann auch noch so einfach :cool:
Probier das morgen sofort aus.

Vielen Dank :D

Hallo planepix,
ich konnte es jetzt ohne Probleme einbinden, doch nun geht der noobslider nicht mehr.
wird jetzt was nicht geladen? (hab bemerkt dass ich das mit {{insert_article::3}} gemacht hatte)

Wenn ich jetzt aber {{env::3}} eintrage kommt wieder garnichts?

Hallo Mark,

das war das einzige was ich befürchtet hatte: das es mit dem Modul nicht klappt :-(

Schon mal den Autor (Philipp Kaiblinger) angeschrieben?

Das wäre eine Idee :cool:

Werd ich mal machen, vielleicht gibts ja ne Möglichkeit

Ich hatte den Fall via Insert-Tags bisher nicht nachgebaut, da je Seite unterschiedliche noobSlider verwendet wurden. Philipp gab mir damals Feedback, auch die Klassen für die vorwärts / rückwärts-Link so abzuändern, dass man nicht je noobSlider-Element neue CSS-Definitionen erstellen muss.

Vielleicht Dein Anliegen noch mal im noobSlider Thread posten?

Die Lösung ist jetzt denkbar einfach.

Einmal einen Artikel anlegen und bei den anderen Artikel den Elementtyp Artikel anlegen.

Danke Phillip :cool: und danke planepix für deine Hilfe

Hallo,

habe im Moment genau dasselbe Problem.
Möchte den Slider innerhalb der Kopfzeile haben auf jeder Seite.
Dieser soll auch überall dasselbe darstellen.

Wie habt ihr das nun realisiert, dass ihr nicht für jede Seite eine eigene CSS braucht?
Als Modul einstellen wäre das einfachste, geht ja aber leider nicht.

Wäre super wenn Ihr mir helfen könntet.

Hallo Kayzu,

schon versucht, ein Modul HTML-Code anzulegen und darin dann das Insert-Tag für die Darstellung des Artikels zu verwenden?
Dann liese sich das Modul im Seitenlayout einbinden.

Also sollte ich folgendermaßen vorgehen.
Ich erstelle den Artikel mit dem Slide, welcher aber nicht im Menü angezeigt wird.

Dann binde ich die Artikel ID per Insert Tag in ein HTML-Code Modul ein und setzte das Modul auf jede Seite im Seitenlayout.

Wenn ja, dann hab ichs verstanden und werde das heute Abend mal testen.

Vielen Dank.

Fast :)

Wenn die noobSlide-Artikel auf jeder Seite angezeigt werden soll, dann kannst Du das Modul im Seitenlayout einbauen - somit sparst du dir den Einbau auf jeder Seite.

So meinte ich das auch. Habe mich oben bissl komisch ausgedrückt.

Servus Kayzu,

leider geht das so nicht. Mit dem Insert-Tag funktioniert der slider nicht mehr...

Du musst einmal einen Artikel anlegen und dort alles einstellen.
Dann auf jeder Seite einen Artikel mit dem Elementtyp den Artikel mit dem nooblsider auswahlen.
Sieht im Backend bisschen unschön, mit den ganzen Artikeln aus, geht wohl aber noch nicht anders

Hallo kischd,

und kann man den Referenzartikel als Includeelement Artikel einbauen?

Dann würden Änderungen am Original "wenigstens" auf allen referenzierten Seiten aktualisiert.

Habs jetzt auch nochmals probiert.
Mit dem Insert Tag {{env::39}} wird nichtmal was angezeigt.

Mit {{insert_article::39}} wird es zwar angezeigt, aber man muss für jede Seite ein eigenes CSS erstellen, da sich die Klassen ständig ändern.

Selbst mit dem insert article tag funktionieren die vor- und zurückbuttons nichtmehr.
Die Buttons funktionieren ausschliesslich auf den Seiten unter denen die Slider auch angelegt sind.

Du vergibst manuell quasi dieselbe Klasse für alle Slider in den Artikeln.
Oder wie kann ich mir das vorstellen.

Vom Prinzip her ist mir das klar, aber ich hab schon das Problem, dass ich Includeelement Artikel ID39 nichtmal auswählen kann.

Kann ich bestätigen, über Insert-Tags funktionierts nicht.

.. dann wäre eine E-Mail an den Autor der Erweiterung sinnvoll mit der Bitte um eine Anpasssung für eine neue Version?

Also habe jetzt per Includeelement auf jeder Seite den ursprünglichen Artikel eingebaut.
Der vor- und zurückbutton also das scrollen zwischen den slideelementen funktioniert nur auf der Seite auf der auch der Originalartikel angelegt ist.

Bei allen Seiten wo der Slider per Includeelement eingebaut wird nur der erste Artikel angezeigt und dann is Sense.

Werde noch ein bisschen rumbasteln wie ich am besten ans Ziel komme.
Handelt sich um meine Neue Firmenwebseite und das tut dann schon richtig weh, wenn man eigentlich die ganze Seite schon im Kopf geplant und fertig hat und da macht einem die Technik wieder einen Strich durch die Rechnung. :(

zwar im ersten Anlauf umständlich, aber es funzt und du musst die Slider bei späteren Änderungen nur einmal editieren:

1. Seite einrichten und im Menue verstecken
2. Artikel mit Inhaltselemente anlegen die im Slider erscheinen sollen (für jedes Sliderelement einen Artikel). Artikel ID notieren.
3. weitere Seite einrichten und ebenfalls im Menue verstecken
4. Hier dann wiederum einen Artikel anlegen und zwischen die Inhaltselemente NoobSlider Anfang und Ende jeweils ein Inhaltselement Text mit den jeweiligen Insert-Tags {{insert_article::*}} der unter Punkt 2 notierten Artikel-IDs einfügen.
5. Im Seitenlayout für den Header das Modul "Artikel" aufschalten
6. Auf der Startseite einen Artikel anlegen (Layoutbereich Header) als Inhaltselement das Includeelement des unter 4 generierten Artikels auswählen.
7. Diesen Artikel duplizieren und in die Folgeseiten einfügen.

Also bis auf deinen Punkt 4

Zitat:

---

4. Hier dann wiederum einen Artikel anlegen und zwischen die Inhaltselemente NoobSlider Anfang und Ende jeweils ein Inhaltselement Text mit den jeweiligen Insert-Tags {{insert_article::*}} der unter Punkt 2 notierten Artikel-IDs einfügen.

---

hab ich das auch so gemacht.

Muss erstmal checken was bei mir der Fehler ist. Werd mich gegen Mittag melden.

Habe Philipp kurz eine Mail diesbezüglich geschrieben. Was ist wenn man jetzt jedoch mehrere Slider auf z.B. 100 Unterseiten darstellen will. Ich habe gerade diese Situation für eine Portfolioseite. Pro Seite etwa 4-7 Slider auf 100 Unterseiten, jedoch müssen die Slider auf den 100 Unterseiten identisch sein, nur die Überschrift ändert sich. Perfekt für das Handling mit insert-tags... :rolleyes:

Zitat:

---

Zitat von planepix

Hallo kischd,

und kann man den Referenzartikel als Includeelement Artikel einbauen?

Dann würden Änderungen am Original "wenigstens" auf allen referenzierten Seiten aktualisiert.

---

Sorry planepix, bin wohl spät dran.
Ja genauso hab ich das gelöst.
Einmal das als ich sag mal Master angelegt.
Und auf den anderen seiten im Artikel jeweils den Elementtyp "artikel" auswählen.
Ist leider umständlich, dass man bei jeder neuen Seite nicht vergessen darf den Artikel wieder anzulegen.
Aber so funktioniert das ganze:cool:

wie läuft das eigentlich unter der haube? dachte article per insert tag wäre das gleich wie das article CE...

sollte es auch sein, aber trotzdem musst du den Artikel unter jeder Seite anlegen.
Finde ich irgendwie unlogisch aber so funktioniert es.

wenn wir schon am Thema Noobslider sind.
Habe jetzt die Schrift "zurück" und "vorwärts" durch Grafikbuttons ersetzen wollen. Das mit den Buttons funktioniert ohne probleme aber wie bekomme ich die schrift und den Trenner weg?

Habe mal aus Verzweiflung color: transparent; gesetzt aber das kann ja nicht des Rätsels Lösung sein.
Desweiteren sieht man ja die Schrift wenn man sie markiert.

Habe schon im Template und im code von noobslide gesucht aber ich werde irgendwie nicht fündig.

Hat jemand schon die Erfahrungen gemacht und die Schrift wegbekommen?
Irgendwoher muss das ja kommen.

einfach aus dem template werfen. sind glaub ich zwei spans ohne a href drin mit dem divider dazwischen. habe dort einfach zwei dreiecke als grafik rein und per css dann wieder den cursor drauf mit cursor: hand und cursor: pointer.

Ich gehe mal davon aus, dass wir von diesem Code sprechen:

PHP-Code:

---

       <span id="prev<?php echo $this->noobHandlesId; ?>"><?php echo $this->previous; ?></span><span id="next<?php echo $this->noobHandlesId; ?>"><?php echo $this->next; ?></span>

---

Habe diese jetzt auch umgeschrieben und den Trenner entfernt und auch die Textbuttons.
Die grafischen Pfeile die ich gesetzt habe sind noch da, aber jetzt slidet er nimmer. hmm :(

jepp

einfach <?php echo $this->previous; ?> austauschen. ich lös es auch am liebsten über css, aber so geht halt schneller *g*

ne idee wäre evtl. auch über css pseudoelemente zu arbeiten, hab ich jetzt noch nicht ausprobiert aber denkbar wäre es jedoch...
http://www.w3schools.com/css/pr_pseudo_after.asp

Ok, dann verwerf ich einfach die CSS Variante nochmals und schreib das direkt in den Code.
Hast mir sehr geholfen.
Danke

Hmm die Grafik funktioniert und ich kann die auch positionieren nur habe ich jetzt n anderes Problem.
In dem Feld macht er mir jetzt nen link, obwohl ich garkein display: block; gesetzt habe.
Irgendwie komisch.

Hier Auszug aus m Template:

PHP-Code:

---

 <span id="prev<?php echo $this->noobHandlesId; ?>"><img alt="«" src="tl_files/Firebloom/images/pfeil links.png"></span><span id="next<?php echo $this->noobHandlesId; ?>"><img alt="«" src="tl_files/Firebloom/images/pfeil rechts.png"></span>

---

So und nu die CSS :

HTML-Code:

---

#noobslide{left:300px;top:130px;position:absolute;}
#noobslide .buttons{width:625px;top:50px;position:absolute;cursor: pointer;}
#prev115{height:50px;float:left;}
#next115{height:50px;float:right;}

---

was steht denn im quelltext im frontend? ist da ein a href drin? ansonsten liegts an der css eigenschaft cursor: WERT

HTML-Code:

---

/* noobslide-css-start */
#noobContainer115 div.block{
width:630px;
float:left;
vertical-align: text-top;
}

#noobContainer115{
position:absolute;
}

#noobContainer115 .buttons{
text-align:left;
}
#noobContainer115 .next{
float:right;
}

/* noobslide-css-end */
</style>
<script type="text/javascript">
window.addEvent('domready',function(){
/* noobslide-js-start */
  var nS115 = new noobSlide({
    box: $('noobContainer115'),
    items: [0,1],
    size: 630,
    addButtons: {previous: $('prev115'), next: $('next115')},
    interval: 3000,
    autoPlay: false});
//walk to item witouth fx
nS115.walk(0,false,true);
/* noobslide-js-end */
});
</script>

---

wenn ich den cursor: pointer rausnehme passiert eigentlich nix

ne ich mein an der position nach dem head. dort wo der slider kommt. die buttons dort sind keine "normalen" links. das wird ja alles über onclick gesteuert.

Nochmal zurück zum eigentlichen Thema: der Weg über den insert-tag funktioniert, wenn man die noobslide-Javascript-Datei und die noobslide-CSS-Datei manuell in die eigenen zusätzlichen Head-Tags einfügt, dabei aber nicht das zusätzliche inline-javascript und inline-css aus dem Head vergisst.

Zitat:

---

Zitat von JamesdK

Nochmal zurück zum eigentlichen Thema: der Weg über den insert-tag funktioniert, wenn man die noobslide-Javascript-Datei und die noobslide-CSS-Datei manuell in die eigenen zusätzlichen Head-Tags einfügt, dabei aber nicht das zusätzliche inline-javascript und inline-css aus dem Head vergisst.

---

Hallo JamesdK,

du sprichst von zusätzlichen inline-javascript und inline-css. Wo finde ich die, bzw. wie heißen die genau?

MfG

Manchmal muss man nur kurz schauen, überlegen und schon beantworten sich die Fragen von selbst. :D

Also für alle die nach inline-javascript und inline-css suchen.

Bei funktionierendem noobSlider den Seitenquelltext aufrufen und in head-Bereich der Seite suchen nach:

HTML-Code:

---

<style type="text/css" media="screen">
/* noobslide-css-start */
 #noobContainer324 div.block{ width:990px; float:left; vertical-align: text-top; } #noobContainer324{ position:absolute; } #noobContainer324 .buttons{ text-align:left; } #noobContainer324 .next{ float:right; }
/* noobslide-css-end */
</style>

---

Diesen Bereich habe ich mir kopiert und in meine CSS-Datei eingefügt.

Dann wieder im head-Bereich nach dem Script-Block suchen (die "324" steht dabei für die ID des noobSliders):

Code:

---

<script type="text/javascript">
window.addEvent('domready',function(){
/* noobslide-js-start */
var nS324=new noobSlide({box:$('noobContainer324'),items:[0,1,2,3],size:990,addButtons:{play:$('play324'),stop:$('stop324'),playback:$('playback324')},interval:8000,autoPlay:true,fxOptions:{duration:3000,transition:Fx.Transitions.Quad.easeInOut,wait:false}});nS324.walk(0,false,true);
/* noobslide-js-end */
});
</script>

---

Diese Konstrukt, wie von JamesdK erwähnt, in im Seitenlayout (über das Backend) im Bereich "Eigener JavaScript-Code" einfügen.

Bei "Zusätzliche <head>-Tags" habe ich noch die beiden Dateien eingefügt:

Code:

---

<link media="all" type="text/css" href="system/modules/pk_noobSlide/html/pkNoobSlide.css" rel="stylesheet">
<script src="system/modules/pk_noobSlide/html/class.noobSlide.packed.js" type="text/javascript" ></script>

---

Jetzt ein neues Modul erstellen vom Typ HTML-Code und per Inserttag euren Artikel einfügen. Das Modul einfach im Seitenlayout auswählen und an die gewünschte Stelle schieben.

Die ID - hier 324 - mit eurer ID ersetzen jeweils im script-Block und CSS-Block ersetzen.

Super _photovierer !

Diese Lösung ist der Hit! Sehr gut durchdacht!

Ob der Entwickler sich diesem Problemchen annehmen wird?

Kurze Anmerkung noch - dieser Code:

PHP-Code:

---

<link media="all" type="text/css" href="system/modules/pk_noobSlide/html/pkNoobSlide.css" rel="stylesheet">
<script src="system/modules/pk_noobSlide/html/class.noobSlide.packed.js" type="text/javascript" ></script> 


---

... muss natürlich aus dem zusätzlichen <HEAD>-Bereich im Seitenlayout verschwinden, sobald der NoobSlide auf normalem Wege irgenwo in einem Artikel erscheint, da er sonst zwei mal drin ist und es nicht mehr funktioniert.

lg,
daniel

Zitat:

---

Zitat von djo

... muss natürlich aus dem zusätzlichen <HEAD>-Bereich im Seitenlayout verschwinden, sobald der NoobSlide auf normalem Wege irgenwo in einem Artikel erscheint, da er sonst zwei mal drin ist und es nicht mehr funktioniert.

---

Hallo Daniel,

das ist natürlich richtig. Hatte den NoobSlide als changing-header im Kopfbereich einer Website eingebunden. Es war auch der Einzigste auf der Seite, somit ist das Problem bei mir nicht aufgetreten. Aber vielen Dank für deinen Hinweis.

lg Thomas

Bei der aktuellen Version vom 2012-06-14 bekomme ich das leider nach der obigen Anleitung nicht hin :-(

Hat jemand eine Idee wie man den Noobslider in der aktuellen Version als Modul auf allen Seiten einbinden kann?

Auf Github gibt's eine neue Version in der der Slider als Modul eingebunden werden kann. https://github.com/kaipk/contao-pk_noobSlide

Diese Version kannst du bereits benutzen bis das Update im Contao-Repository ist

Lg


Sent from my iPhone using Tapatalk

Mit der Version funktioniert es 100%ig

Danke @philipp.kaiblinger !!!!

Ich habe den von philipp.kaiblinger bereitgestellten Download des Noobslider jetzt als Modul in eine 2.11.5 Instanz eingebaut und getestet.

Es funktioniert fantastisch!

Auch von mir vielen Dank dafür.

Hallo,

vielleicht könntest Du noch einen alt Tag für die Bilder mit einbauen, wie das in den anderen Modulen üblich ist wo Bilder genutzt werden.


Gruß

Hallo Supermann,

Featurewünsche bitte in Github eintragen, da sie ansonsten nicht bearbeitet werden. https://github.com/kaipk/contao-pk_n...e=1&state=open

lg
Philipp