Hi Amir

Yeah I guess you need to create a macro to handle this. Maybe you could use ImageGen on the image so you just use the same image but specify the dimensions for the smartphone instead?

I guess you will need to use some JavaScript or some custom XSLT extension to determine the dimensions of the device accessing the site.

I'm excited to hear more about how you get this one solved :-)

/Jan

Jan, I will check out ImageGen, I've actually never used it although I've read plenty about it.

So as far as detecting the browser, I can do something like this with javascript inside the document ready function:

//$("body").attr("style", "background: url(images/home_mobile.jpg");<br />
             var mobileBody = "background: url('images/home.jpg') top center no-repeat;";
          var standardBody = "background: url('images/home_mobile.jpg') top center no-repeat;";

           if ((screen.width>=1024) && (screen.height>=768)) {
         $("body").attr("style", bodySwitch);
          }
         else  {
           $("body").attr("style", bodySwitch);
          }

Now my main question, how can that javascript be useful within a macro?

This is what I'm thinking

1. macro1 in header containing that javascript
2. macro1 calls macro mobile or macro regular based on the result of the javascript resolution detection? (or can I execute the javascript and utilize the resulting variable from the same macro?)

Does this seem like a good way to approach it?

Thanks!

Amir

Hi Amir

Could it be done by small piece of xslt? You can detect browser in xslt. Here is a part of sample how I'm implementing...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
  version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns:msxml="urn:schemas-microsoft-com:xslt"
   xmlns:MediaHelper="urn:MediaHelper"
    xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" 
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets MediaHelper">

<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
<!-- start writing XSLT -->
<xsl:variable name="userAgent" select="Exslt.ExsltRegularExpressions:match(umbraco.library:RequestServerVariables('HTTP_USER_AGENT'), 'android|ip(hone|od|ad)|macintosh','i')"/>
<style>
<xsl:choose>
<xsl:when test="$userAgent = 'iPhone'">
 .body{
         backroung-image:url(mobile.jpg);
       }
</xsl:when>
<xsl:otherwise>
    .body{
         backroung-image:url(computer.jpg);
     }
</xsl:otherwise>
</xsl:choose>
</style>
</xsl:template>
</xsl:stylesheet

Pnima, this could work. My intention however was to test for resolution not User Agent so I could provide alternate content for droid, blackberry, windows mobile, etc in one process. Do you know if you can test for resolution with XSLT? I haven't been able to find any documentation on it...

Thanks!

Amir

Hi Amir

I guess you will need to make something like the above but where you actually test for the resolution using javascript and then call the <xsl:value-of select="relevant-image" /> inside it.

It's not pretty but I think it's a way forward.

Do you need an example to get what I'm thinking about? :-)

/Jan

is working on a reply...