Hi I hope someone can help. I don't know if this is possible or not but I've made a mobile template for my site. The problem is modx specifies which template to use on each individual resource. Is there a way to get modx to specify which template to use depending on device. So that if an ipad or smartphone etc is used it will overide the default template with the mobile one I've made?
Many thanks for your help with this.
-
☆ A M B ☆
- 24,524 Posts
That's the wrong way to go about it. Like browser sniffing, you'll be constantly playing catch-up to try to keep up with the latest devices. Responsive web design uses "media queries" in the CSS to re-style the page according to the device screen size.
http://www.alistapart.com/articles/responsive-web-design/
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/
In response to your actual question, though, yes, there is a plugin for switching templates. The resources cannot be cached, however, so there will be a severe performance penalty. And you would need to replace the optional switching with code to detect the device.
http://modx.com/extras/package/templateswitcher
Hi thanks for the reply.
I take on your point about responsive css, however with this site being quite old and already having all it's template files in place, trying to hack the css to recognise mobiles could be a big job... Unless I'm missing an easier approach? Also I'm wanting to use jquery mobile, so I would have to include extra links to css and .js files in all my current templates across the site, rather than just making one new template for mobiles...
Let me know if you think there is a better way but I will try the switcher for now and see how I get on.
I really appreciated your help and feedback. Thanks again.
Indeed, is a lot of work to make a website look well with responsive css, but the alternative is disabling the cache for the whole website.
Hi thanks again for your help. Eventually I'll get round to a new theme and new css and will go down a more responsive approach, but will use this template switcher for now as a temporary measure.
I am having a weird problem with it though. For some reason jquery mobile renders the site great, but a few clicks in and I start getting the error "Error loading page". Yet if I right click the link and open in a new window it works. For example:
http://www.insideyork.co.uk?template=mobile
If you then click Guest Houses say it works, but then click on a guest house name and it's not working. Is this a problem with jquery or ditto? Not sure how to debug this problem. Thanks again for any help.
-
☆ A M B ☆
- 24,524 Posts
Looks like a jquery problem.
Hi again. I've posted on the jquerymobile forum here:
http://forum.jquery.com/topic/error-loading-page-once-you-ve-clicked-in-a-couple-of-pages
Still not sure why this problem is occurring...
Hi it seems my problem lies with ditto producing relative links and not full ones??
I think I got it. It looks like your problematic links are linking relative to the current page. So for example you have one pointed to "accommodation/guesthouses/southlands.html" which translates internally to "http://www.insideyork.co.uk/accommodation/accommodation/guesthouses/southlands.html".
To fix this, just prepend all of your links with a slash to reference the root. That example links should instead be "/accommodation/guesthouses/southlands.html"
Does anybody know how to change how the +link+ parameter creates links in ditto?
Thanks for any help with this.
