Symphony.

Greetings Symphonists, a newbie here :-)

First, a big THANK YOU to the Team for putting together this awesome CMS.

I am in process of building my first Symphony based project and in need of featuring a slideshow on each section opening page. For that purpose, I am using the commercial edition of Slidedeck, which allows for both linear and vertical navigation between slides (I specifically need that feature).

Now, I am trying to create XSL template that will automate generation of HTML required to output both horizontal and vertical slides. To realise that, I started with creation of a new Symphony section 'slides' with the following fields: 1) slide-deck (specifies to which slideshow a given slide belongs); 2) slide-type (horizontal or vertical); 3) slide-order (position in slideshow); 4) slide-title (text); 5) slide-content (text); and slide-bg-image (name of background image).

Since each slide is represented by 'data/slides/entry', I employ 'xsl:for-each' to generate output for each record in the DB.

To include only the slides that belong to a given 'deck', I use

<xsl:if test="slidedeck/item = 'Slidedeck Name'>

Since the structure of Slidedeck code is beautifully straightforward

<dt><xsl:value-of select="slide-title"/></dt>

will output the title of every slide, horizontal or vertical, regardless. So far, so good.

Now, the HTML code unique for horizontal and vertical slides, respectively, sits between the 'dd' tags. First off, I thought of using this construct:

<xsl:choose>
<xsl:when test="slide-type/item = 'Horizontal'">
<p><xsl:value-of select="slide-content"/></p>
</xsl:when>
<xsl:otherwise>
<ul class="slidesVertical">
<li><p><xsl:value-of select="slide-content"/></p></li>
</ul>
</xsl:otherwise>
</xsl:choose>

This approach was obviously wrong, and as a possible solution most likely very little elegant but this is where I got to (and got stuck, with the little knowledge that I have :-( Things is, another loop is needed to output each vertical slide as a 'li' element, that will also follow the right slide order, as specified by 'slide-order'. To be honest, I tried variety of approaches and am out of ideas how this could be solved :-(

For visual reference, please visit the development site (please don't mind it's still a prototype). Any assistance would be most helpful and very much appreciated - thank you in advance.

Cheers, Piotr

Hi Piotr, welcome. This feels like a case for "apply-templates" you can iterate over the XML tree and match certain levels in the tree to create your loops. Please check out Allen's Article on combining template methods. Allen Chang - Combining Different Template Methods. This article helped me to get to grips with how to iterate over elements of my datasource in order to manipulate the output as desired. Happy coding :)

Feel free to ask away for more info, the community here is Awesome... but also, it helps to read up a little on XSLT and a few methods to manipulate your data. It took me ages to get my head around the basics, but that was through lack of reading.. Once it clicks, you'll have a lightbulb above your head for the rest of the week, thinking of new things to do with Symphony :)

EDIT

These 2 vids were also helpful in understanding what goes on with Template matching http://vimeo.com/15234803

http://vimeo.com/15242945

Hi Piotr,

Also the slide order part of your datasource could be taken care of with "Sorting and Limiting" options in your datasource. If you sort by "Slide-order" - ascending or descending.

That part is taken care of.

Could you also specify what your field types are in your section? i.e 1) Slide-Deck : is this a Select Box link? etc....

Hello moonoo2,

Thank you very much for your reply - most helpful - I am going through the recommended training material just now. Meanwhile, allow me to share the additional info that you requested:

1) Following the right slide order is of great importance in my case, as I plan to set all slideshows to auto-play (particularly useful for services 'walk-through'). For that, I used exactly the sorting and limiting option that your recommended, with success. While set to 'ascending', slides are neatly output according to the slide number assigned.

2) The field types are as follows: a) slide-deck [select box] - loads dynamic values (name) from another section - 'slidedecks'; b) slide-type [select box] - horizontal | vertical; c) slide-order [select box] - numerals from 1-12 (max number of slides in a deck, both horizontal and vertical); d) slide-title [text input]; e) slide-content [textarea]; f) slide-bg-image [text input] - I'm not too sure about that one, I have a feeling that I should rather use an 'attribute-set' approach for that purpose, with image name being one of the attributes (perhaps also source, width, height, etc.), but as I am still passing the learning curve right now I really don't know how to implement it :-(

3) Also, I think that an ideal solution would be one that automatically generates a slideshow according to the URL handle (I am guessing that 'xsl:param' could possibly come in handy here). E.g. upon entering 'example.com/services' a slideshow comprising all slides (entries) where slide-deck field value equals 'services' would be automatically put together and displayed, also following the right slide order and featuring the section-corresponding background images.

4) Seems like there are a variety of techniques that would need to come together here to constitute an elegant solution - I am painfully aware that my current knowledge does not cater for it :-( On a positive note though, since Slidedeck is quickly gaining popularity, the ability to include it in a Symphony based project could become a relevant factor for those considering using Symphony as a base for commercial development...

Cheers, Piotr

Darn it, wrote a really nice reply with link to stuff an everything.. battery died.

Anyways http://getsymphony.com/learn/tutorials/view/say-hello-to-symphony/ Should help with {$category} URL parameter explanations..

And an Extension called Subsection Manager might be of use to group and select a series of images to include in your Slideshow... I'd also use a file upload field to load your images in the section... Call it Images and use SSM (Subsection Manager) to upload these images into your slideshow entries... There is also an image cropper extension for resizing to specific required aspect ratios if you like...

Others might have better ideas, but I find SSM really useful for these kinds of things. Happy coding :)

Hello moonoo2, thanks a lot for your replies - will follow up and test today.

Meanwhile, I came across this answer at Stack Overflow and - since the structure I need to output seems comparable to what Kirk aimed for (I think I prefer using a 'dl' structure for my vertical slides instead of a list) - it looks like a possible solution to my case.

I want to test this solution but am not able to output the 'parents' element with an empty string value in Symphony's XML source - if the value of string is empty, the element 'parents' is simply not included. I am quite sure that I am overlooking something but can't figure out what :( The field type I used for 'parents' is Select Box Link.

Any word of advice would be most helpful and greatly appreciated - thank you very much in advance.

Cheers, Piotr

Could you show me your XSLT template? use pastie.org to paste and link to it in a comment.

Also your XML output would be useful i.e what you see on the ?debug screen pasztie that as well.