Zikula Community

• Zex_Suik
  
  

  • Rank: Registered User
  • Registered: Jul 29, 2002
  • Last visit: Oct 21, 2009
  • Posts: 24

  Posted: Jun 10, 2005 - 03:20 AM

  I looked and looked and there is no ready made answer for this so i've done some homework and i'm hoping someone more knowledgable than myself can help.
  
  I want to have the theme change automatically based on whether the user is on a pda or a desktop/laptop
  
  I thought the answer was in detecting browsers but after looking at available scripts for detecting browsers i realized that wasn't the answer. A lot of pda browsers SAY they are mozilla and so do some desktop browsers so theme selection based on browser isn't viable unless you are only redirecting WAP browsers (they are easier to spot)
  
  So I looked into detecting screen resolution. There are some scripts within some PHP webstats but i haven't had the time to dig through that.
  
  I did find this though
  
  

  Code

  <script language="Javascript"><!--
  
  // ***********************************************
  // AUTHOR: WWW.CGISCRIPT.NET, LLC
  // URL: http://www.cgiscript.net
  // Use the script, just leave this message intact.
  // Download your FREE CGI/Perl Scripts today!
  // ( http://www.cgiscript.net/scripts.htm )
  // ***********************************************
  
  if (screen.width <= 1023) {
  document.location = "small_window.htm";
  }
  
  if (screen.width > 1024) {
  document.location = "actual_site.htm";
  }
  
  //--></script>

  
  
  SO we could make it really easy by only using half that script in header.php
  
  

  Code

  <script language="Javascript"><!--
  if (screen.width <= 1023) {
  document.location = "index.php?theme=mobile";
  }
  //--></script>

  
  
  so that would reload the index with the theme variable in the URL
  
  then after that in header.php (maybe after the pnapi include) we could put this
  
  

  Code

  <?php
  echo $_REQUEST['themechange'];
  if (isset($themechange)) {
      unset($theme);
      $theme = "mobile";
  }
  endif;
  ?>

  
  
  which would see if the browser was redirected by seeing the variable in the URL and UNSET the theme variable and reassign it the value of 'mobile' so when it came to load the theme it called the mobile theme.
  
  Notice that both scripts don't do anything if the browser is a desktop size?
  
  Can anyone help further this? Someone more knowledgeable? maybe a PN developer?
  
  I believe this to be useful. It would help a lot of webmasters display their content to their mobile users more effectively. If we could iron this out it would be possible to put a 'enable PDA user redirect' check box in the settings to turn this on.
  
  I appreciate any constructive feedback

  • 
  •  
• Lobos
  
  

  • Rank: Expert
  • Registered: Dec 02, 2002
  • Last visit: Apr 30, 2010
  • Posts: 1474

  Posted: Jun 10, 2005 - 10:00 AM

  HI there,
  
  I think you are better of using PHP to detect the browser type before rendering the HTML as this will make the site more search engine friendly.
  
  Here's a script (there are few floating around):
  
  http://www.devarticles.com/c/a/PHP/PHP-Browser-Detection-and-Appropriate-CSS-Generation/2/
  
  -Lobos
  
  --
  -Lobos
  Professional PHP Framework Services: Concept, Development and Deployment

  • 
  •  
• **unknown user**
  
  

  • Rank: Senior
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 2204

  Posted: Jun 10, 2005 - 12:50 PM

  Pierre at imagicweb.com would have your answer.. he's into all the WAP and SMS type stuff.. a real nice guy too.

  • 
  •  
• Zex_Suik
  
  

  • Rank: Registered User
  • Registered: Jul 29, 2002
  • Last visit: Oct 21, 2009
  • Posts: 24

  Posted: Jun 10, 2005 - 11:27 PM

  Lobos,
  
  GOOD POINT
  
  Okay how about this type of code (this is not actual code just a concept)
  
  

  Code

  <?php
  
  if browser = (search engine browsers
  then do nothing
  else{ <script language="Javascript"><!--
  if (screen.width <= 640) {
  document.location = "index.php?theme=mobile";
  }
  //--></script>}
  ?>

  
  
  then we put that other PHP in the right place
  
  

  Code

  <?php
  echo $_REQUEST['themechange'];
  if (isset($themechange)) {
      unset($theme);
      $theme = "mobile";
  }
  endif;
  ?>

  
  
  So it would detect the search engine browser and do nothing
  if it isn't a search engine then it detects screen width
  if the resolution is less than 600 then it redirects with the variable in the URL
  the other PHP code upon redirection pulls the variable and checks if it's set and if so applies the mobile theme.
  
  This could work right? Can someone help fine tune this code and the code placement?
  
  I'm going to dig around and see if I can't come up with fairly complete browser detector to use here.
  
  --
  www.DesRat.com

  • 
  •  
• Zex_Suik
  
  

  • Rank: Registered User
  • Registered: Jul 29, 2002
  • Last visit: Oct 21, 2009
  • Posts: 24

  Posted: Jun 11, 2005 - 12:27 AM

  Lobos
  
  Changing the CSS based on browser is an idea if you want blocks showing up still in the pda screen.
  
  I've been making a center only theme that displays the most important functions in the header so there aren't any blocks needed.
  
  Invalid Response
  
  I tried finding a Pierre on imagicweb but couldn't find a user by that name so I just created a post on their forums "Pierre Read Here" and pointed him to this discussion.
  
  --
  www.DesRat.com

  • 
  •  
• Zex_Suik
  
  

  • Rank: Registered User
  • Registered: Jul 29, 2002
  • Last visit: Oct 21, 2009
  • Posts: 24

  Posted: Jun 11, 2005 - 01:07 AM

  okay I did some homework (dontcha love that?)
  found and tore apart a PHP browser detect script
  subtracted stuff, added stuff rearranged stuff and so far this is what i have
  
  DEVELOPERS please check this out
  
  notes: obviously we can add more values for the search engines, the included browser values are just a few examples
  
  !!!THIS SCRIPT IS NOWHERE NEAR COMPLETE DO NOT USE IT!!!!
  
  Expert type people please look at this and give some input so we can make this work.
  
  that being said
  
  

  Code

  <?php
  /* THIS SCRIPT IS NOWHERE NEAR COMPLETE DO NOT USE IT
  function to detect browser by Zex_Suik www.desrat.com
  with help from: (your name here if you help :) )
  some code borrowed from
  RedKernel Visitor Info Function - v1.0.4
  (c) 2005 by Nicolas Cour (RedKernel)
  http://www.redkernel-softwares.com/
  and
  http://www.cgiscript.net
  THIS SCRIPT IS NOWHERE NEAR COMPLETE DO NOT USE IT
  Don't sue me, I'm not selling this */
  
  echo $_REQUEST['themechange'];
  if (isset($themechange)) {
      unset($theme);
      $theme = "mobile";
      }
  else
      {
          function browserdetect()
          {
              $Browser=array('unknown','Unknown');
  
  # HTTP_USER_AGENT not empty?
              if(''!=HTTP_USER_AGENT)
              {
                  # Prepare (lower) HTTP_USER_AGENT for strpos() processing.
                  $LowerUA=strtolower(HTTP_USER_AGENT);
  
  # Try to detect the browser.
  
                  foreach($GLOBALS['BROWSER_ARRAY'] as $K=>$V)
                  {
                      if(strpos($LowerUA,$K)!==false)
                      {
                          $b=explode('~',$V);
                          $Browser=array($b[0],$b[1]);
                          break;
                      }
                  }
  
              }
  # Returns results.
              return array(
                  'Browser'   => $Browser[1],
                  );
          }
  
      $BROWSER_ARRAY=array(
      'downloadagent'     => 'notavailable~DownloadAgent',
      'linemodebrowser'   => 'notavailable~W3C Line Mode Browser',
      'tzgeturl'          => 'notavailable~TzGetURL',
      'webcapture'        => 'adobe~Acrobat',
      'apt'               => 'apt~Debian APT',
      'curl'              => 'notavailable~Curl',
      'csscheck'          => 'notavailable~WDG CSS Validator',
      'wget'              => 'notavailable~Wget',
      'w3m'               => 'notavailable~w3m',
      'w3c_css_validator' => 'notavailable~W3C CSS Validator',
      'w3c_validator'     => 'notavailable~W3C HTML Validator',
      'wdg_validator'     => 'notavailable~WDG HTML Validator',
      'libwww'            => 'notavailable~LibWWW',
      );
  
  /*I did my best to remove what I felt was unneeded code in the browser detect script
  most of it detected language, os and country. Can anyone tell if what's above will work? */
  
  
  /*what's below won't work until more changes are made */
  
      $b=browserdetect();
  
  /* this should tell php to do someone only if $b has no value */
      if (isset($b['Browser']))
        /*DO NOTHING*/;
        else
          {
  /* this should redirect if screen resolution is less than specified value */
                      ?>
                  <script language="Javascript"><!--
                      if (screen.width <= 640) {
                      document.location = "index.php?themechange=mobile";}
                  //--></script>
              <?
          }
      }      /* this bracket is from way the hell up top */
  ?>

  
  
  --
  www.DesRat.com

  • 
  •  
• Zex_Suik
  
  

  • Rank: Registered User
  • Registered: Jul 29, 2002
  • Last visit: Oct 21, 2009
  • Posts: 24

  Posted: Jun 13, 2005 - 02:05 AM

  Okay after RE REviewing what i had I did a little experimenting.
  
  And I've come to this conclusion:
  I don't know enough by myself to finish this code to work the way I want.
  
  However I have come to another solution. It might work based on what I know. I've tested the snippet and it works. Hence we have a solution (not the easiest for the user to setup but it works)
  
  So now this is my next course of events.
  Finish PDA friendly theme
  Set up multisites
  Install MAIN theme on main site (www.mainsite.com)
  Install PDA friendly theme on PDA site (mobile.mainsite.com)
  add this snippet to the MAIN SITE THEME near the top of theme.php (before it actually starts doing anything)
  
  

  Code

  /*this is our experimental resolution redirecter */
  
  /*this redirects based on resolution */
  ?>
      <script language="Javascript"><!--
          if (screen.width <= 640) {
          document.location = "mobile.mainsite.com";}
      //--></script>
  <?
  /* end experimental theme changer */

  
  
  AND add this snippet to the PDA friendly theme near the top of theme.php (before it actually starts doing anything)
  
  

  Code

  /*this is our experimental resolution redirecter */
  
  /*this redirects based on resolution */
  ?>
      <script language="Javascript"><!--
          if (screen.width > 641) {
          document.location = "www.mainsite.com";}
      //--></script>
  <?
  /* end experimental resolution redirecter */

  
  
  If you put the wrong snippet in the wrong theme then you will just get an endless loop where you get redirected over and over again.
  
  NOTE: I'd really like to figure out the first method and would appreciate any help. It could be very useful in future PN releases as a check box in the admin menu 'enable mobile redirection' with a drop down to select your mobile theme. That way people don't have to setup multi sites.
  
  I welcome any and all comments (redundancy noted)
  
  --
  www.DesRat.com

  • 
  •  
• **unknown user**
  
  

  • Rank: Expert
  • Registered: Mar 16, 2002
  • Last visit: Apr 02, 2010
  • Posts: 1208

  Posted: Jan 16, 2010 - 11:13 AM

  Revisiting this thread, as I am in need of a way to allow mobile devices to access a site in a mobile-friendly format.
  
  I've resigned myself from the idea of detecting browsers. It's a lot of work to keep up with all the new crap coming out all the time. A better way, in my mind, is to have a simple, liquid mobile theme that would fit itself to smaller screens without having to make various themes specific to certain browsers and resolutions.
  
  So far, I have created a subdomain "m" with a redirection to the homepage with "index.php?theme=mobile" appended to the URL. This works great UNTIL the user clicks on an internal link, which takes them to that page with the default theme instead of the mobile theme. How do I make the mobile theme stick for that session?
  
  My first thought is to simply add the "&theme=mobile" to all the links. Seems like there ought to be an easier/better way....

  • 
  •  
• AllKnightAccess
  
  

  • Rank: Team Member
  • Registered: Mar 15, 2004
  • Last visit: May 26, 2010
  • Posts: 112

  Posted: Jan 16, 2010 - 06:34 PM

  @Wendell - How about creating a custom Smarty output filter plugin that only gets executed on the mobile domain?
  
  Using the filter, you won't need to add the parameter &theme=mobile, Instead, you can just do dynamic switching of base URLs.
  
  Take a look at the code in the file /system/Theme/plugins/outputfilter.pagevars.php for possible ideas for creating the custom plugin.
  
  Another option may be to make sure you are not hardcoding URLs. Instead, use the function pnGetBaseURL() to output the URLs. The domain switching will be dynamic by referencing $_SERVER['HTTP_HOST'].

  • 
  •  
• rallek
  
  

  • Rank: Softmore
  • Registered: Apr 23, 2005
  • Last visit: May 15, 2010
  • Posts: 130

  Posted: Jan 16, 2010 - 10:28 PM

  Quote

  My first thought is to simply add the "&theme=mobile" to all the links. Seems like there ought to be an easier/better way....

  
  Have you also tried "&newtheme=mobile" ?
  
  --
  webmaster of gvoh.de and pggo.de
  
  project manager of new module media repository

  • 
  •  
• **unknown user**
  
  

  • Rank: Expert
  • Registered: Mar 16, 2002
  • Last visit: Apr 02, 2010
  • Posts: 1208

  Posted: Jan 17, 2010 - 05:37 AM

  Quote

  Have you also tried "&newtheme=mobile" ?

  
  Yes. It behaves the same as "&theme=mobile"

  • 
  •  
• **unknown user**
  
  

  • Rank: Expert
  • Registered: Mar 16, 2002
  • Last visit: Apr 02, 2010
  • Posts: 1208

  Posted: Jan 29, 2010 - 08:18 AM

  Quote

  Have you also tried "&newtheme=mobile" ?

  
  
  Ok, with some more fiddling around, I got it working. Yes, the above method works, but ONLY if you allow your users to change theme (a setting in the Themes admin settings). Thank you!
  
  So, all that is required for the plugin is a simple redirect based on screen size.

  • 
  •  
•  
•  

Users on-line

• designerdogs

This list is based on users active over the last 60 minutes.