smooster for web designers: this is how you get a slideshow ready for inline editing
2014.08.22 by Sebastian Maier
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:
2. Before the closing Body-Tag </body>, this segment is then inserted:
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.
● 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.
4. For the admin section, you insert what follows here into the CSS:
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:
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.