Fork me on GitHub

Mobile theme  Bottom

  • milleja46

    Freshman
    • Rank: Freshman
    • Registered: Jun 10, 2011
    • Last visit:
    • Posts: 61
    Link to this post Posted: Aug 17, 2011 - 09:55 AM
    Ok so i don't clutter up someone else's topic anymore i'm going to restart with the following details i've discovered and others can make suggestions and contributions to this:
    First i'm going to start with a snippet of code for detecting a mobile browser(this will have to have a change at the end to change to a mobile theme)

    Code

    $useragent=$_SERVER['HTTP_USER_AGENT'];
    if(preg_match('/android.+mobile|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
    header('Location: http://m.m46sg.frih.org');

    ^This above code to work(from personal experience in testing it) will have to be added to the index.php of the zikula install NOT a theme inparticular because I do not think a theme can detect and change to a different one based on this condition and will be a better fix

    Second my biggest concern to get this working is a framework such as a cross-device one that can integrate in nicely/play nicely with zikula's theming system which is where i'm hopeing you guys will come in.

    Third i have made a simple generic layout picture that I will try to work into applying to working/following into a real theme though may be a little more detailed knowing what i'm dealing with in the future.
    http://i53.tinypic.com/ivaa06.jpg

    Fourth(thanks to kylegio): if at all possible add a mobile.css to themes forcing it to use that more mobile compatible theme/css from the theme repository on your site when a user access it

    Feel free to make any suggestions or contributions(those who make ones that go into it i will try to add you into a list that i will add into the demo site i will make for this purpose as a contributer if i can ;) )



    Edited by milleja46 on Aug 17, 2011 - 11:04 PM.
  • kylegio
    kylegio
    Softmore
    • Rank: Softmore
    • Registered: Sep 30, 2008
    • Last visit: May 29, 2010
    • Posts: 201
    Link to this post Posted: Aug 17, 2011 - 08:21 PM
    maybe a feature request to add support for 'mobile' themes to zikula.

    the way i would go about it is:
    the core runs some detection to check if someones on a mobile or small screen'd device
    themes which have a mobile template and or mobile.css or similar are known to have a mobile version by zikula
    in the theme extension (where a stie administrator selects the site theme) they may choose a theme to use as mobile
    if a mobile theme is set then a visitor is given that theme by default if the detection determines they are on mobile.


    just a thought
  • milleja46

    Freshman
    • Rank: Freshman
    • Registered: Jun 10, 2011
    • Last visit:
    • Posts: 61
    Link to this post Posted: Aug 17, 2011 - 11:02 PM
    Well the feature request would include something similar to what i just did to run that check which came from http://detectmobilebrowsers.com/ which works i've personally tested it myself on my site because it redirects to the m URL. Probably more of what needs to be done is add a mobile variable and have a option added to the admin panel for mobile theme. As well probably add in a mobile.css that makes alot of sense and would do nicely(i'll add that to the first post with a thanks to you so i can remember to add it i'm testing all these changes on my site then see if there's a way i can become a dev and add it in and allow for the names of those that helped me on this matter).

    Edit: Seems there was already a ticket for this that was closed http://code.zikula.org/core/ticket/2157 and the one true solution that seems best was what i did but if a ticket for it was closed what's the chance of mine getting through? i'll try it anyway to see what happens



    Edited by milleja46 on Aug 17, 2011 - 11:32 PM.
  • bronto
    bronto
    Helper
    • Rank: Helper
    • Registered: Dec 31, 1969
    • Last visit: May 07, 2010
    • Posts: 507
    Link to this post Posted: Aug 17, 2011 - 11:48 PM
    Nice layout. But I really think the way to do this would be to use jQuery's Mobile UI libraries to create a real smartphone theme using proven technology. Just my opinion. You could have the main page just be a list of modules with the "home" module expanded by default.
    http://jquerymobile.com/test/
  • milleja46

    Freshman
    • Rank: Freshman
    • Registered: Jun 10, 2011
    • Last visit:
    • Posts: 61
    Link to this post Posted: Aug 17, 2011 - 11:55 PM
    Bronto that is what i was planning on using i just need to learn some jquery. But jquery seems like the best bet for this approach.
  • kylegio
    kylegio
    Softmore
    • Rank: Softmore
    • Registered: Sep 30, 2008
    • Last visit: May 29, 2010
    • Posts: 201
    Link to this post Posted: Aug 17, 2011 - 11:57 PM
    no matter how its done i think gearing towards small devices is something zikula should deal with without hacking etc.
    @milleja46
    no need to "become a dev" or anything like that, zikula is a lot more open and pro-community then it used to be...anyone can contribute! to contribute to zikula just sign up on github.com
    fork the core repository (https://github.com/zikula/core) then make any changes you want.

    when you think its good you can issue a pull request and your work will be looked at and edited or incorporated.

    check out http://blog.zikula.org/blog/how-to-contribute-your-code-at-github.73.html if you are interested in getting involved with zikula

    some of the stuff on that how-to is specific to working on tickets, but theres nothing that says you cant fork the core and work on concept ideas that don't have a ticket. when you have a working concept other people can check out your fork and test it etc...



    Edited by kylegio on Aug 18, 2011 - 07:59 AM.
  • milleja46

    Freshman
    • Rank: Freshman
    • Registered: Jun 10, 2011
    • Last visit:
    • Posts: 61
    Link to this post Posted: Aug 18, 2011 - 12:10 AM
    Yeah but my biggest question is what exactly to change the location part of the code to would be changed to so it would actually just change to a mobile theme(which i'm going to try and write in jquery if at all possible)
  • milleja46

    Freshman
    • Rank: Freshman
    • Registered: Jun 10, 2011
    • Last visit:
    • Posts: 61
    Link to this post Posted: Aug 18, 2011 - 01:14 AM
    Update: Ok one thing i'm going to do to help it along is to make a stripped down version of my theme and add jquery mobile into it. For one thing i will load the refrences it gives on the download page instead of actually adding it in. Simply for the point and fact i think it will load faster and i can use the functions as needed. Just have to make the theme very simple yet very elegant and modern ;)
  • nestormateo
    nestormateo
    Team Member
    • Rank: Team Member
    • Registered: Sep 06, 2006
    • Last visit: May 09, 2010
    • Posts: 2446
    Link to this post Posted: Aug 18, 2011 - 03:15 AM
    I guess I have an idea about this:

    An EventHandler is needed to detect the user device on the core initialization and setup the theme there. We will need a /config/EventHandlers/MobileDetection.php file like:

    Code

    class MobileDetection extends Zikula_AbstractEventHandler
    {
        /**
         * Setup handler definitions.
         *
         * @return void
         */
        protected function setupHandlerDefinitions()
        {
            $this->addHandlerDefinition('core.init', 'detect');
        }

        /**
         * Event handler here.
         *
         * @param Zikula_Event $event Event object.
         *
         * @return void
         */
        public function detect(Zikula_Event $event)
        {
            // detect a movile device on the config stage
            if ($event['stage'] & Zikula_Core::STAGE_CONFIG) {
                $pattern = '/android.+mobile|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i';

                if (preg_match($pattern, substr($_SERVER['HTTP_USER_AGENT'], 0, 4))) {
                    system::queryStringSetVar('theme', 'Mobile');
                }
            }
        }
    }


    This Event Handler will force the user's theme to "Mobile", where all the custom layout will be. It's cleaner and it's the way you wanted at the beggining right? You can include the jQuery stuff inside that theme, and if you open a github project for that theme I would contribute my theming experience.

    Greetings

    --
    - Mateo T. -
    Mis principios... son mis fines
  • milleja46

    Freshman
    • Rank: Freshman
    • Registered: Jun 10, 2011
    • Last visit:
    • Posts: 61
    Link to this post Posted: Aug 18, 2011 - 03:26 AM
    Oh, YAY! Thanks alot nestormateo i will include that in my fork on github!(i've already forked it to my own branch i just need to add my changes(and what i've gotten help from you ;) which i very much apperciate)) and i'll try to see if i can add the theme i've semi-started on my computer to the branch to see if it works as i planned ;)
  • milleja46

    Freshman
    • Rank: Freshman
    • Registered: Jun 10, 2011
    • Last visit:
    • Posts: 61
    Link to this post Posted: Aug 18, 2011 - 04:48 AM
    Ok changes are listed on my branch, i will get to work on a mobile theme and see if this works after i install my changes to my mobile demo at mdemo.m46sg.frih.org
  • milleja46

    Freshman
    • Rank: Freshman
    • Registered: Jun 10, 2011
    • Last visit:
    • Posts: 61
    Link to this post Posted: Aug 18, 2011 - 09:12 PM
    Ok seems that didn't work. Because at line 25 it reports a parse/syntax error at the comma before the $useragent variable...guess it's back to the drawing boards for this matter...
  • eledril
    eledril
    Softmore
    • Rank: Softmore
    • Registered: Jul 10, 2006
    • Last visit: May 21, 2010
    • Posts: 315
    Link to this post Posted: Aug 19, 2011 - 02:35 AM
    I look forward to seeing the results. If it works, I might use it on my site.

    --
    Christopher Pelletier
    NorthumberlandView.ca
    A View Like No Other
  • milleja46

    Freshman
    • Rank: Freshman
    • Registered: Jun 10, 2011
    • Last visit:
    • Posts: 61
    Link to this post Posted: Aug 19, 2011 - 03:48 AM
    Well it's kind of nesscessary to give a good experience to users in my pov ;) I'll even add a theme with this to make it more usable and easier to preview...but first to fix my main site, when i installed the 1.3 with my change it didn't work quite as planned and it messed up my main install and makes it think a file isn't there that is there which is very odd...i'll try to get it done as soon as i can..
  • randomblink
    randomblink
    Developer
    • Rank: Developer
    • Registered: Feb 24, 2003
    • Last visit: Nov 12, 2009
    • Posts: 254
    Link to this post Posted: Dec 01, 2011 - 09:23 AM
    Maybe there should be a Mobile Theme Variable option. Allow the site manager to select different themes based off of the type of mobile environment. This way an iOS developer could have an iOS theme for each device (iPhone/iPad/iFuture, etc.) and Android developers could build a device specific them as well...

    It would have to allow the Site Admin to add new devices (browser variables) to present different themes based off of specific hardware or just give ALL mobile devices a specific mobile theme.

    --

    With the advent of modern technology, sites like Twitter, and the Facebook Virus...
    I think we should all breathe a collective sigh of relief that I got here in time...
    - randomblink

Users on-line

  • 0 users

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