Site with sub-domain showing mobile device version using own templates

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
nhaack

Site with sub-domain showing mobile device version using own templates

Post by nhaack »

Hi there,

I wanted to have the following construction: one CMS for maintenance (domain + sub domain are pointing to the same install directory of CMSMS), two sites with identical page hierarchy but different templates showing different content (lesser blocks and tags optimized mobile and pda clients).

I want pretty URLs all the way ;) so I searched for a way on how to select a template and how to avoid any extra parameters for the user. Additionally I didn't want to do it with cookies or limit the alterations to CSS.

I read that there is a simple way to capture page variables with smarty and show stuff only if a specific variable contains a specific value.

E.g.

Code: Select all

{if $smarty.get.template == 'mobile'}
Stuff to do if extra parameter "template" value matches 'mobile'. The full mobile/pda version template.
{else}
Contains the normal web browser template if no extra parameter is given.
{/if}
To conveniently access the single content blocks from both templates areas, I assigned the content blocks to variables at the beginning of the template.

E.g.

Code: Select all

{content assign="content_var"}
{content block="mobile_content" assign="mobile_content_var"}
{content block="reg_content" assign="reg_content_var"}
So that at the end, I can just place the corresponding variables into my template. The full template would look like this:

Code: Select all


{content assign="content_var"}
{content block="mobile_content" assign="mobile_content_var"}
{content block="reg_content" assign="reg_content_var"}

{if $smarty.get.template == 'mobile'}

<!DOCTYPE ...
    <__html ... >
    ...
       {$content_var}
       {$mobile_content_var}
       {custom_tag_1 output="mobile"}
    ...
    </__html>

{else}

<!DOCTYPE ...
    <__html .. >
    ...
       {$content_var}
       {$reg_content_var}
       {custom_tag_1 output="regular"}
       {custom_tag_2}
    ...
    </__html>

{/if}
That solved my problem of different templates (I mean really different templates, not just CSS) for the same conten. The next problem was to get both sites to use more elegant "pretty URLs" and select template area for output depending on host.

So next: modify my .htaccess to extend the URL with an extra parameter - if it is called from a sub domain called "mobile"

-> e.g. http://mobile.domain.tld/home.htm will be rewritten to http://www.domain.tld/index.php?page=ho ... ate=mobile.

Code: Select all

Options +FollowSymLinks
RewriteEngine on

RewriteBase /

# REWRITE TO "home.htm" IF REQUEST DOESN'T CONTAIN PAGE
# ==================================================
#   Checks if requested URI is "empty" and rewrites
#   it from http://www.domain.tld to 
#   http://www.domain.tdl/home.htm
# ==================================================
RewriteCond %{REQUEST_URI} ^/$ [NC]
RewriteRule .* /home.htm 


# ADD EXTRA PARAMETER IF PAGE IS LOCATED UNDER SPECIFIC SUB DOMAIN
# ==================================================
#   Checks if domain is "mobile.domain.tld"
#   Rewrites urls in the form of /parent/child/
#   but only rewrites if the requested URL is not a file or directory
#   additionally appends the parameter "template" with the value="mobile"
#   to the query string. Stops rewriting afterwards
# ==================================================
RewriteCond %{HTTP_HOST} ^mobile\.domain\.tld$ [NC]
RewriteCond %{REQUEST_FILENAME} !-f [NC]
RewriteCond %{REQUEST_FILENAME} !-d [NC]
RewriteRule ^(.+).htm$ index.php?page=$1&template=mobile [QSA,L]


# FOR REGULAR SITE
# ==================================================
#   Rewrites urls in the form of /parent/child/
#   but only rewrites if the requested URL is not a file or directory
# ==================================================
RewriteCond %{REQUEST_FILENAME} !-f [NC]
RewriteCond %{REQUEST_FILENAME} !-d [NC]
RewriteRule ^(.+).htm$ index.php?page=$1 [QSA]
The first rule ensures, that when the mobile site is called only with the domain name, it will request a file named "home.htm" so that the next rule allows me to rewrite to the CMSMS query with mobile template variable.

The second rule checks if the http host is mobile.domain.tld prior to execution of rule, and if that is true, rewrites pretty URLs to the CMS query and appends the extra variable I need for identifying the part of the template I want to show.

The third rule applies if the page is not located under mobile.domain.tld, so always when we look at domain.tld. The third rule is taken from the CMSMS documentation

So http://mobile.domain.tld/article.htm gives me the mobile version of http://www.domain.tld/article.htm.

I had to set the navigation menu templates to display relative page links instead of absolute ones, so I can navigate freely within a sub domain by using:

Code: Select all

...href="{$node->alias}.htm"...
instead of

Code: Select all

...href="{$node->url}"...
I've just set this up and it seems to be working. So far I have only played around with the initial set up a little, but it doesn't seem to slow down the whole thing a lot. Actually the mobile pages come a little quicker since less tags are executed.

Since I am not that much of a programmer or administrator I guess that this solution could still be tweaked and optimized. Now I need to see if I encounter any major problems. But from first sight it looks good.

Now I can add an article and I instantly get a mobile version of it in my sub domain. All automatic. For the editor it looks like one site that is maintained without extra branches or extra work for mobile content. Well, doesn't necessarily have to be a mobile template... you can use this for whatever reason you want to use different templates for.

What do you think about the approach? What would you do different? Do you see any downsides I might have overlooked?

best
nhaack
Last edited by nhaack on Sat Sep 06, 2008 3:40 pm, edited 1 time in total.
kendo451

Re: Site with sub-domain showing mobile device version using own templates

Post by kendo451 »

That is a brilliant and elegant solution!

One question.  How did you get mobile.thedomain.com to point to thedomain.com in the first place?
nhaack

Re: Site with sub-domain showing mobile device version using own templates

Post by nhaack »

Subdomain was configured to point to the same path/folder as the regular domain. Depending on the options you have with your hosting, you can do it yourself or you hav to as your provider to do so.

Best
Nils
Pierre M.

Re: Site with sub-domain showing mobile device version using own templates

Post by Pierre M. »

Hello,

If I understand well, this is a one install, muti domain, one hierarchy, multi content, one userlist, multi template multi host combinatinon for a little number of domains&templates.

Do you really require the content be different according to the media ? Isn't it a bit heavyweighted ?

I'm not a designer nor a xHTML/CSS expert. Can you please explain what needs your hack than CSS media="handheld" and display none can't do ?

Have fun making CMSms the #1 platform for mobile broadcasting !-)

Pierre M.
kendo451

Re: Site with sub-domain showing mobile device version using own templates

Post by kendo451 »

Well, Pierre, his scheme does have a significant advantage for mobile: smaller page size to download.  If you just use CSS display:none the mobile browser still has down download the entire page to only show certain parts of it.

Other than that, CSS seems much simpler of a solution.
nhaack

Re: Site with sub-domain showing mobile device version using own templates

Post by nhaack »

Hi there,

yes, I originally used it to provide similar content with different templates. Nowadays, with 3G mobile networks, there is a lot of bandwidth for regular surfing, but still you might be in a remote area where there only is a GPRS connection. And even 3G often sucks when not in a mayor city. So for more browsing pleasure... ;)

Doing it as CSS was not an option this time, just as Kendo pointed out, you wouldn't change much in the data volume (ok, you could do all static image stuff via CSS) - still, for a real mobile experience you need dedicated templates for best results (imho).

If you want, it is a multiple domain - one system/one content setup. Same User, contents, hierarchy etc pp. The difference lies in the stuff you place additionally into the templates (e.g. less html code by using less features). As such, you can provide a more accessible menu structure for mobile users or you leave out the album, drop the one or other "broadband features". Also Flash isn't widely enough supported on mobile phones.

Using blocks "mobile_content" and "reg_content" was just to simplify the example. In my setup, both template versions create different views on an own database application running within CMSMS.

Let's say you use CMSMS as a sales force support plattform. The sales agents can log in and do the advanced stuff on a laptop or desktop PC/Mac/whatever but can access eg. client data via their mobile using the same log-in data and data-pool when on their way taking care of customers (or reporting sales from "on the road").

It worked nice so far, however, I think there could be a sweeter way for the template switching. Really switching the template instead of maintaining two templates in one would be nicer, but it is very managable the way it's described above.

And yes, CMSMS is just rock'n'roll cms-ing ;) One just has to love this system for it's flexbility.

Any ideas for improvement are highly welcomed :)

Best
Nils
Pierre M.

Re: Site with sub-domain showing mobile device version using own templates

Post by Pierre M. »

Thank you nhaack and kendo451 for the explainations. Yes I hadn't seen the "page weight" point. And I agree "Really switching the template instead of maintaining two templates in one would be nicer" but your tip works with the regular CMSms.

Pierre M.
21becker
New Member
New Member
Posts: 8
Joined: Thu Apr 15, 2010 11:31 pm

Re: Site with sub-domain showing mobile device version using

Post by 21becker »

UPDATE::
I have found another way to do this, only you can switch between. Go to ww.i-do-this.com and search UDT's

------------------------------------

hey sounds great!, except im not a huge understander of smarty and php lol O0 i copied this and then i get id i get

Code: Select all

string(115) "Smarty error: [in tpl_body:24 line 133]: syntax error: mismatched tag {/if}. (Smarty_Compiler.class.php, line 2303)" 
So i figured there must be a problem with the {/if} tag.
when i have none it says

Code: Select all

string(129) "Smarty error: [in tpl_top:24 line 22]: syntax error: unclosed tag \{else} (opened line 18). (Smarty_Compiler.class.php, line 317)" 
therefore, i tried an {/else} tag and it tells me

Code: Select all

string(129) "Smarty error: [in tpl_top:24 line 22]: syntax error: unclosed tag \{else} (opened line 18). (Smarty_Compiler.class.php, line 317)" string(117) "Smarty error: [in tpl_body:24 line 133]: syntax error: unrecognized tag '/else' (Smarty_Compiler.class.php, line 590)" 
Help?
Post Reply

Return to “Tips and Tricks”