• Follow us on Twitter @smoostercom
  • Folge uns auf Facebook /smoosterde
  • Abonniere den smooster RSS Feed

smooster for web designers: this is how you get a slideshow ready for inline editing

2014.08.22 by 

Get a Slideshow ready for Inline Editing with smooster CMS.

Recently, we introduced the new slideshow editing feature to the smooster CMS. So it is now possible to edit the individual slides and their sequence directly in their respective subpages  using Inline  Editing. From now on, we are incorporating the slideshow-­editing feature into all new web projects which smooster is called upon to carry out. If you use the smooster  CMS to implement websites using HTML  &  CSS yourself,  you will here find out how you can incorporate the new slideshow into your website. You can also find this explanation and many further tips and instructions in our Template  Documentation section

This is how you make the slideshow editable: 


For slideshow editing, six steps are required.


1.  At the point where the slideshow is to be inserted into the HTML code, you would here insert this <div>. You can also change the “slideshow_container” names that we use to something else. What is important is that it here refers to the same name as the ID in the data-­mercury=”extra”-field in section 2:

7d66397d0feb7844f043


2.  Before the closing Body-­Tag </body>, this segment is then inserted:  

9ae272c6a299b8da5b01

Here is the explanation for the coding example:  

● The data-­smo-­only=”admin” ensures that the text which is written here is only visible in the editor. This portion can be seen by neither the website visitor, nor by anyone who is viewing the HTML code.

● The ID must be absolutely identical to the ID listed in section 1.  

● By means of data-­mercury=”extra”, the extra panel can once again be called up.  

● By including data-­extra=”execute_script”, you are communicating that a JavaScript is being used.    

● By using data-­extra-­action=”change_slideshow”, you link the JavaScript function listed in section 4, which is used to modify the slides.  

● For the slideshow, you should use an <ol> instead of an <ul>. The reason is that, this way, you have numbers beside your slides and you can therefore better orient yourself.  If it is all the same to you, you can use the <ul>.  

● By using data-­extra-­editable=”true” on the <li>, the individual slides become editable.


3. JavaScript

fcfc0969d5fe84d9d4c9


4.  For the admin section, you insert what follows here into the CSS:

b848dc6a302fde9c2984


5.  To ensure the overall functionality of the slideshow (in our case here, the slippry  Slideshow) on the website  -­  and thus,  the independent smooster JS  -­  you will still need the following:      

CSS: 

ab12ff8a3dd33e7fca4f


JavaScript: 

8a14743f44d8e4628518


Should you wish to use a different slideshow, then simply contact our support team, and  we will be glad to assist you with that.


6.  Finally, make sure you check the “Templatelanguage  Liquid” box in the layout template in the CMS.


smooster CMS: Activate Liquid for integrating a slideshow in your template.

BACK
comments powered by Disqus