iPhone Versioning / CSS swap - an idea!

You need to put the snippet call in your template where the name of the css file would normally go, or, as an allternative, you could use $modx->regClientCSS($output) at the end of the snippet and not return anything from the snippet. In the second case, you’d just need to put the snippet somewhere on the page or in the template.

What happens when you try it?

Can you look in the above code for my comments? Sorry that I wasn’t clear with that as my comments in the code have the questions in them.

Sorry, I didn’t notice the questions. I’ve made some changes and edited the comments. I haven’t tested any of this:

Quote from: MDi at Jun 25, 2009, 04:10 PM

select a chunk name from the array rather than a file name and use $modx->getChunk(chunk_name)

I’m afraid you’re going to have to hold my hand on this. It’s an easy switch for you, but not so for me.

<?php
/* Snippet Title: CustomChunk  */

/* No longer needed
     $output = ''; 
     $cssBase = $modx->config['site_url'] . 'assets/templates/catalytic2/css/';   
*/

/* array of browser agent names and their respective chunk templates */
[color=red]/* select a chunk name from the array rather than a file name and use $modx->getChunk(chunk_name) WHERE TO USE getChunk?? */
/* 
getChunk comes later (See below).
And how does one name a chunk in this code without the chunk's curlybrackets invoking the chunk?

All you want is the name of the chunk (no curlys) to use in the getChunk call. Be sure to match the case of the chunk names in the code with their actual names.


*/[/color]
$browserArray = array(
     'iPhone' => iPhoneChunk',
     'SymbianOS/9.1' => 'SymbianChunk',
     'anotherbrowser' => 'OtherBrowserChunk',
     'yetanother browser' => 'StillOtherBrowserChunk'
);

/* see if we recognize one */
foreach ($browserArray as $key => $value) {
    if (strstr($_SERVER['HTTP_USER_AGENT'],$key)) {
        $chunkName = $value;  // note change
        break;
    }
}

/* if we didn't find one, use the default css file */
[color=red]/* better: get a default chunk (non-mobile template) */[/color]
if ($chunkName == '') {
    $chunkName = 'defaultChunk';
[color=red]/* we don't need to output a file location. How do we output a chunk instead?*/[/color]
}

/* This will inject the contents of the chunk into the head of the document.
See [url]http://wiki.modxcms.com/index.php/API:regClientCSS [/url] for what should go in the chunk.
Note that it needs a <style . . .> tag.
*/

$modx->regClientCSS($modx->getChunk($chunkName));

/*

If the line above looks confusing, it's (I hope) the equivalent of this:
$css = $modx->getChunk($chunkName);
$modx->regClientCSS($css);

*/


?>

I modified the code shown below. It doesn’t work. No surprise there as this is simply not my forte.

My idea has evolved from your original snippet, which works great.
Here’s your original snippet so others don’t have to swim back:


Here my modified snippet. I don’t need to get a CSS file. I just need to getChunk:


Sorry I butchered your snippet. I should call it mine since I chopped it up. I placed this snippet in the default template file. Just plain old
[!Mobi!] that’s all there is in the template.

{{mobi}} holds the mobile phone template. {{land}} holds the land-based templates.

The reason I’m doing it this way is because I want to literally change the templates for the mobile pohne. I have 3 templates for most sites and ignoring divs via CSS file (div attributes are commented out in the mobile.css file), that approach will not work for more than on template. I’d have to dupe the snippet for that and it would just get confusing because those others templates have their on TVs, etc, etc, etc.

Let’s step back a minute (and I don’t mean to be critical, just trying to help). Your snippet in the previous message won’t actually do anything. It calls getChunk() which returns the contents of the chunk but your snippet doesn’t set a variable there or return anything so it won’t have any effect other than to waste a little of the processor’s time.

A more serious problem, though, is the way the template and the chunk would interact even if you solved the above problem.

What you actually want, I think, is to use a single template for all devices, mobile or not, but with different CSS. As long as each device has a separate CSS file (or chunk), you can control how everything looks and what is visible (and what isn’t) in every user agent.

So your single template will have separate divs and spans and all the HTML code. Your CSS chunks (or files) will style all those divs and spans etc. for the appropriate user agent.

In that scenario, your version of the snippet in the previous message should work fine as long as you change the last line to



That will inject the CSS into the head section of the template.

Note that doing it this way, the snippet call should be alone, not in a tag, because it doesn’t create any output at it’s own location. Instead it injects the CSS from the chunk or file into the <head> section of the document. Note also that for this to work, your chunks or files need to have the CSS code wrapped in a <style> tag like this:
<style> CSS here </style>.

Just for clarification, in my original snippet, the single template contains an <href> tag referencing the file with the CSS. The snippet just provides the *name* of that file -- the file provides the CSS. Using chunks which contain the CSS won’t work with that tag because the href tag expects a filename -- not CSS content.

I hope this makes sense.

Thank you!

Thank you for taking the time to review it and type up your comments. Lesson learned. It forced me to simplify my style sheet, ultimately to remove all classes and stick with just straight up CSS. No more ul.this and p.that.

It forces me to have just one style sheet and one template. It reminded me about csszengarden: you really can have a huge amount of variety in one template and use CSS to achieve it, not the template itself.

Thanks again.

I’m glad it’s starting to work out for you. IMHO, it’s fine to have multiple CSS files (or chunks) in fact, that’s kind of the point of this thread . but minimizing the number of templates is definitely the way to go.

When I started with MODx, I used way too many templates. Now, it’s rare for my sites to have more than one or two.

Sorry to dig up an old thread – but I used this technique to deliver an iphone specific CSS file and it worked great. The client wanted to add a few other devices but I am unable to get it to detect BlackBerry devices. I tried "BlackBerry" and "blackberry" and a few device specific ones but can’t seem to get it to work. Any ideas?

make a test page and use




more here

Thanks for the quick response – maybe its because the User Agent is reported differently by a BlackBerry... it seems that this snippet is pulling in the info from inside the () because I can not get it to properly detect it even though I am copying and pasting the name directly.