Symphony.

AIM

I have to display different articles from different cities.

CURRENT SETUP

• I have url parameters: city/article
• url/city shows all articles from that city
• url/city/article shows just that particular article

These pages work exactly as planned, all from one datasource and one page.

DESIRED FUNCTIONALITY

I want to integrate a popup layer using for example colorbox/greybox etc.

So from a url/city page a user can click on any of several articles displayed and the article pops up in a layer. With Javascript disabled, the user would be directed to url/city/article.

THE PROBLEM

The whole page (url/city/article with menu, header, footer etc) is fed into the layer. I only want to show the article (without the header, menu, footer, etc).

Does anybody know of a how to get around this or perhaps there is a better approach? I toyed with the idea of using copy-of to select the body tags from the destination document url/city/article. I could resort to adding more fields and xslt to display hidden inline html in the pop-up layer with AJAX to load a larger image. Thanks

If you are working with jQuery can use the load()-function to return data from the server and add place the returned HTML into the current page. You can add a jQuery selector in the url parameter of the function to get only a part of the requested resource, like $('#result').load('ajax/test.html #container'); to load only the content of the #container element.

(This answer is not specific to Symphony.)

That could be what I’ve been looking for, much appreciated. Just out of interest, would there be any way of achieving this using xsl:copy-of?

I wouldn’t try to create a different output (different pages and markup) for javascript enabled and javascript disabled user agents. It’s too much overhead and you can achieve the same with the method mentioned above. (Didn’t really answer your question.)

I use the same technique in a portfolio site I’m building, although I haven’t physically implemented the xslt yet…

I have a datasource that shows a list of imgages, and then a second that relies on a page parameter for single images, much like your pages.

So for your solution, your first datasource should rely on the $city page parameter and filter it’s limited set of fields, to build the article list. Your second datasource should rely on the $article page parameter to filter itself to display limited result to 1 article. The magic of datasource filtering is that you can have the data rely on this parameter, or display nothing.

Your probably wondering how this can work with xslt. You can write an xsl:choose statement to switch dependant on the $article parameter, and display different html for the list or the article! Then use JQuery or MooTools (my preference) to display your lightwindow script (I use Mootools Multibox personally).

I think the only downside to this is figuring how to render the page differently for no javascript or displaying in the lightwindow. If Javascript is off, html will be rendered, but within the lightwindow, you’re probably going to want cut down the html to not display the whole page.

I’m thinking about this for my project too, and it’s stumped me for now so I’m working on another section. I say this is a problem as I use a master template for the main page layout.

Hope this is food for thought though!

Sorry, just to clarify on the xslt… When you build your links for the article list that the lightwindow script will act on, they should be for the same page, but with the article handle

http://url/city/article

So the browser takes you to that url without Javascript enabled. However, that is the url that will also be loaded into the lightwindow, where the problem lies with the full html being rendered.

You could also have your JS call append a url parameter ( eg ‘?js’) which would show up in the Symphony param pool as ‘$url-js’. Then your article page could test for that param and only deliver what you want rather than the whole page.

An even better route (though I’m not sure how simple) would be to send that param in a request HTTP header rather than in the url string.

Either way you’re adding a bit more serverside view logic, and getting a decreased payload & js processing in return.

I guess you’d have to have a php function somewhere to achieve this. How would it check for JS though? It would have to be automatic for the graceful degradation.

Some good ideas there, to cover JS enabled/disabled browsers I will start off with the JQuery method for now.

@klaftertief I’ve found a working example of the load() function and it works fine.

@designermonkey I have url/city/article working ok but I do find the separate image DS to be interesting.

@ashooner I did consider the HTTP header but wasn’t sure if that was the route to take.

Working example is here

http://api.jquery.com/load/

@designermonkey I take it from your setup, a user can click any image from url/page and they are taken to url/page/image. Is the image that is presented in url/page/image within a

<a href>

link tag? If so would there be any way of removing that link?

Ignore the last comment as I was thinking out aloud…

No problem…

@ashooner and @kalvind, just thought about your idea @ashooner, I realise js could be used to append the parameter to the url clicked to distinguish the xslt… I’m off to play a bit now ;)