smooster für Webdesigner: So machst du eine Slideshow fertig fürs Inline Editing

22.08.2014 von

Vor Kurzem haben wir die neue Bearbeitungsfunktion von Slideshows in smooster CMS vorgestellt. Damit ist es jetzt möglich die einzelnen Slides und deren Reihenfolge direkt in der jeweiligen Unterseite via Inline Editing zu bearbeiten. In alle neuen Webprojekte, bei denen smooster die Umsetzung übernimmt, bauen wir ab sofort diese Slideshow-Bearbeitung ein.

Wenn du smooster CMS verwendest, um selbst Websites mit HTML & CSS umzusetzen, erfährst du hier, wie du die neue Slideshow in deine Website einbauen kannst. 

Diese Erklärung und viele weitere Tipps und Anleitungen findest du außerdem in unserer Template Documentation (engl.).

So machst du die Slideshow bearbeitbar:


Für die Bearbeitung der Slideshow sind 6 Schritte notwendig.


1. An der Stelle, an der die Slideshow im HTML sitzen soll, fügst du diesen <div> hier ein. Den von uns verwendeten Name “slideshow_container” kannst du auch anders benennen. Wichtig ist nur, dass es sich hierbei um den gleichen Namen handelt, wie die ID in dem data-mercury=”extra”-Bereich unter Punkt 2:

7d66397d0feb7844f043


2. Vor dem schließenden Body-Tag </body> wird dann dieser Part eingefügt:

eabbf16c54df9ec3b218

Erläuterung zum Code Beispiel:

  • Das data-smo-only=”admin” sorgt dafür, dass der hier geschriebene Text nur im Editor ist sichtbar ist. Dieser Teil wird weder vom Website-Besucher gesehen, noch von jemand, der sich den HTML-Code anschaut.

  • Die ID muss zwingend identisch mit der ID unter Punkt 1 sein.

  • Mit data-mercury=”extra” sprichst du wieder das Extra Panel an

  • Mit data-extra=”execute_script” teilst du mit, dass ein JavaScript verwendet wird. 

  • Mit data-extra-action=”change_slideshow” verknüpfst du die Funktion im JavaScript unter Punkt 4 zum ändern des Slides.

  • Bei der Slideshow verwendest du eine <ol> statt einer <ul>. Grund ist der, dass du dadurch Nummern neben deinen Slides hast und dich daher besser orientieren kannst. Ist dir das egal, kannst du auch eine <ul>verwenden.

  • Durch das data-extra-editable=”true” auf dem <li> werden die einzelnen Slides bearbeitbar gemacht.


3. JavaScript


fcfc0969d5fe84d9d4c9


4. Für den Adminbereich fügst du in das CSS noch das hier ein:

b848dc6a302fde9c2984


5. Damit die Slideshow (in unserem Fall hier die slippry Slideshow) überhaupt auf der Website funktioniert - also das smooster unabhägige JS - brauchst du noch folgendes:

CSS:

ab12ff8a3dd33e7fca4f


JavaScript: 

8a14743f44d8e4628518


Solltest du eine andere Slideshow verwenden wollen, dann wende dich einfach an unseren Support und wir helfen dir gerne dabei.


6. Zum Schluss musst du nur noch in der Layoutvorlage im CMS einen Haken bei “Templatesprache Liquid” setzen.

Für die Slideshow im smooster CMS die Templatesprache Liquid auswählen.

zurück
comments powered by Disqus