Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Autofitting Content for Mobile Version of Website

    Good Afternoon/Morning All,

    Due to the incredible knowledge and effort of folks on this site, my questions regarding simple coding have been answered two-for-two. I am hoping my third question here goes just as well.

    Here's what I am trying to do: Take my existing website using Wordpress (but obviously hosted on my own server) and make it mobile-friendly. Thanks to Carrington Mobile (http://wordpress.org/extend/themes/d...mobile.1.1.zip - this zip file is virus-free and simply contains all of the original, untouched php files and readmes associated that I'm currently working with), I have been able to implement a simple plugin with a few minor tweaks to get things up and running. There seems to be only one annoying "glitch" off the bat: When a post is selected for reading, the "header picture" is cut off by width. I assume this is due to the limitations of the width of one of the phps.

    I assume at that point there are two solutions: One, locate the php width restriction and widen it to accept the default width value of all of my header pictures on the website (500 pixels) OR set the php to automatically resize content to fit within the boundaries of the predefined width.

    Here's what I've found thus far (and I will include the entire PHP just incase:

    PHP Code:
    <?php

    /*
    Plugin Name: WordPress Mobile Edition 
    Plugin URI: http://crowdfavorite.com/wordpress/ 
    Description: Show your mobile visitors a site presentation designed just for them. Rich experience for iPhone, Android, etc. and clean simple formatting for less capable mobile browsers. Cache-friendly with a Carrington-based theme, and progressive enhancement for advanced mobile browsers.  
    Version: 3.1
    Author: Crowd Favorite
    Author URI: http://crowdfavorite.com
    */

    // WordPress Mobile Edition
    //
    // Copyright (c) 2002-2009 Crowd Favorite, Ltd.
    // http://crowdfavorite.com
    //
    // Released under the GPL license
    // http://www.opensource.org/licenses/gpl-license.php
    //
    // **********************************************************************
    // This program is distributed in the hope that it will be useful, but
    // WITHOUT ANY WARRANTY; without even the implied warranty of
    // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
    // *****************************************************************

    // ini_set('display_errors', '1'); ini_set('error_reporting', E_ALL);

    define('CF_MOBILE_THEME''carrington-mobile-1.0.2');

    if (!
    defined('PLUGINDIR')) {
        
    define('PLUGINDIR','wp-content/plugins');
    }

    load_plugin_textdomain('cf-mobile');

    if (
    is_file(trailingsla****(ABSPATH.PLUGINDIR).'wp-mobile.php')) {
        
    define('CFMOBI_FILE'trailingsla****(ABSPATH.PLUGINDIR).'wp-mobile.php');
    }
    else if (
    is_file(trailingsla****(ABSPATH.PLUGINDIR).'wordpress-mobile-edition/wp-mobile.php')) {
        
    define('CFMOBI_FILE'trailingsla****(ABSPATH.PLUGINDIR).'wordpress-mobile-edition/wp-mobile.php');
    }

    register_activation_hook(CFMOBI_FILE'cfmobi_install');

    function 
    cfmobi_default_browsers($type 'mobile') {
        
    $mobile = array(
            
    '2.0 MMP',
            
    '240x320',
            
    '400X240',
            
    'AvantGo',
            
    'BlackBerry',
            
    'Blazer',
            
    'Cellphone',
            
    'Danger',
            
    'DoCoMo',
            
    'Elaine/3.0',
            
    'EudoraWeb',
            
    'Googlebot-Mobile',
            
    'hiptop',
            
    'IEMobile',
            
    'KYOCERA/WX310K',
            
    'LG/U990',
            
    'MIDP-2.',
            
    'MMEF20',
            
    'MOT-V',
            
    'NetFront',
            
    'Newt',
            
    'Nintendo Wii',
            
    'Nitro'// Nintendo DS
            
    'Nokia',
            
    'Opera Mini',
            
    'Palm',
            
    'PlayStation Portable',
            
    'portalmmm',
            
    'Proxinet',
            
    'ProxiNet',
            
    'SHARP-TQ-GX10',
            
    'SHG-i900',
            
    'Small',
            
    'SonyEricsson',
            
    'Symbian OS',
            
    'SymbianOS',
            
    'TS21i-10',
            
    'UP.Browser',
            
    'UP.Link',
            
    'webOS'// Palm Pre, etc.
            
    'Windows CE',
            
    'WinWAP',
            
    'YahooSeeker/M1A1-R2D2',
        );
        
    $touch = array(
            
    'iPhone',
            
    'iPod',
            
    'Android',
            
    'BlackBerry9530',
            
    'LG-TU915 Obigo'// LG touch browser
            
    'LGE VX',
            
    'webOS'// Palm Pre, etc.
            
    'Nokia5800',
        );
        switch (
    $type) {
            case 
    'mobile':
            case 
    'touch':
                return $
    $type;
        }
    }

    $mobile explode("\n"trim(get_option('cfmobi_mobile_browsers')));
    $cfmobi_mobile_browsers apply_filters('cfmobi_mobile_browsers'$mobile);
    $touch explode("\n"trim(get_option('cfmobi_touch_browsers')));
    $cfmobi_touch_browsers apply_filters('cfmobi_touch_browsers'$touch);

    function 
    cfmobi_install() {
        global 
    $cfmobi_default_mobile_browsers;
        
    add_option('cfmobi_mobile_browsers'implode("\n"cfmobi_default_browsers('mobile')));
        global 
    $cfmobi_default_touch_browsers;
        
    add_option('cfmobi_touch_browsers'implode("\n"cfmobi_default_browsers('touch')));
    }

    function 
    cfmobi_init() {
        global 
    $cfmobi_mobile_browsers$cfmobi_touch_browsers;
        if (
    is_admin() && !cfmobi_installed()) {
            global 
    $wp_version;
            if (isset(
    $wp_version) && version_compare($wp_version'2.5''>=')) {
                
    add_action('admin_notices'create_function''"echo '<div class=\"error\"><p>WP Mobile is incorrectly installed. Please check the <a href=\"http://alexking.org/projects/wordpress/readme?project=wordpress-mobile-edition\">README</a>.</p></div>';" ) );
            }
        }
        if (isset(
    $_COOKIE['cf_mobile']) && $_COOKIE['cf_mobile'] == 'false') {
            
    add_action('the_content''cfmobi_mobile_available');
        }
    }
    add_action('init''cfmobi_init');

    function 
    cfmobi_check_mobile() {
        global 
    $cfmobi_mobile_browsers$cfmobi_touch_browsers;
        
    $mobile null;
        if (!isset(
    $_SERVER["HTTP_USER_AGENT"]) || (isset($_COOKIE['cf_mobile']) && $_COOKIE['cf_mobile'] == 'false')) {
            
    $mobile false;
        }
        else if (isset(
    $_COOKIE['cf_mobile']) && $_COOKIE['cf_mobile'] == 'true') {
            
    $mobile true;
        }
        
    $browsers array_merge($cfmobi_mobile_browsers$cfmobi_touch_browsers);
        if (
    is_null($mobile) && count($browsers)) {
            foreach (
    $browsers as $browser) {
                if (!empty(
    $browser) && strpos($_SERVER["HTTP_USER_AGENT"], trim($browser)) !== false) {
                    
    $mobile true;
                }
            }
        }
        if (
    is_null($mobile)) {
            
    $mobile false;
        }
        return 
    apply_filters('cfmobi_check_mobile'$mobile);
    }

    if (
    cfmobi_check_mobile()) {
        
    add_filter('template''cfmobi_template');
        
    add_filter('option_template''cfmobi_template');
        
    add_filter('option_stylesheet''cfmobi_template');
    }

    function 
    cfmobi_template($theme) {
        if (
    cfmobi_installed()) {
            return 
    apply_filters('cfmobi_template'CF_MOBILE_THEME);
        }
        else {
            return 
    $theme;
        }
    }

    function 
    cfmobi_installed() {
        return 
    is_dir(ABSPATH.'/wp-content/themes/'.CF_MOBILE_THEME);
    }

    function 
    cfmobi_mobile_exit() {
        echo 
    '<p><a href="'.trailingsla****(get_bloginfo('home')).'?cf_action=reject_mobile">Exit the Mobile Edition</a> <span class="small">(view the standard browser version)</span>.</p>';
    }

    function 
    cfmobi_mobile_available($content) {
        if (!
    defined('WPCACHEHOME')) {
            
    $content $content.'<p><a href="'.trailingsla****(get_bloginfo('home')).'?cf_action=show_mobile">Return to the Mobile Edition</a>.</p>';
        }
        return 
    $content;
    }

    function 
    cfmobi_mobile_link() {
        if (!
    defined('WPCACHEHOME')) {
            echo 
    '<a href="'.trailingsla****(get_bloginfo('home')).'?cf_action=show_mobile">Mobile Edition</a>';
        }
    }

    // TODO - add sidebar widget for link, with some sort of graphic?

    function cfmobi_request_handler() {
        if (!empty(
    $_GET['cf_action'])) {
            
    $url parse_url(get_bloginfo('home'));
            
    $domain $url['host'];
            if (!empty(
    $url['path'])) {
                
    $path $url['path'];
            }
            else {
                
    $path '/';
            }
            
    $redirect false;
            switch (
    $_GET['cf_action']) {
                case 
    'cfmobi_admin_js':
                    
    cfmobi_admin_js();
                    break;
                case 
    'cfmobi_admin_css':
                    
    cfmobi_admin_css();
                    die();
                    break;
                case 
    'reject_mobile':
                    
    setcookie(
                        
    'cf_mobile'
                        
    'false'
                        
    time() + 300000
                        
    $path
                        
    $domain
                    
    );
                    
    $redirect true;
                    break;
                case 
    'show_mobile':
                    
    setcookie(
                        
    'cf_mobile'
                        
    'true'
                        
    time() + 300000
                        
    $path
                        
    $domain
                    
    );
                    
    $redirect true;
                    break;
                case 
    'cfmobi_who':
                    if (
    current_user_can('manage_options')) {
                        
    header("Content-type: text/plain");
                        echo 
    sprintf(__('Browser: %s''cf-mobile'), strip_tags($_SERVER['HTTP_USER_AGENT']));
                        die();
                    }
                    break;
            }
            if (
    $redirect) {
                if (!empty(
    $_SERVER['HTTP_REFERER'])) {
                    
    $go $_SERVER['HTTP_REFERER'];
                }
                else {
                    
    $go get_bloginfo('home');
                }
                
    header('Location: '.$go);
                die();
            }
        }
        if (!empty(
    $_POST['cf_action'])) {
            switch (
    $_POST['cf_action']) {
                case 
    'cfmobi_update_settings':
                    
    cfmobi_save_settings();
                    
    wp_redirect(trailingsla****(get_bloginfo('wpurl')).'wp-admin/options-general.php?page=wp-mobile.php&updated=true');
                    die();
                    break;
            }
        }
    }
    add_action('init''cfmobi_request_handler');

    function 
    cfmobi_admin_js() {
        global 
    $cfmobi_default_mobile_browsers$cfmobi_default_touch_browsers;
        
    header('Content-type: text/javascript');
        
    $mobile str_replace(array("'","\r""\n"), array("\'"''''), implode('\\n'cfmobi_default_browsers('mobile')));
        
    $touch str_replace(array("'","\r""\n"), array("\'"''''), implode('\\n'cfmobi_default_browsers('touch')));
    ?>
    jQuery(function($) {
        $('#cfmobi_mobile_reset').click(function() {
            $('#cfmobi_mobile_browsers').val('<?php echo $mobile?>');
            return false;
        });
        $('#cfmobi_touch_reset').click(function() {
            $('#cfmobi_touch_browsers').val('<?php echo $touch?>');
            return false;
        });
    });
    <?php
        
    die();
    }
    if (
    is_admin()) {
        
    wp_enqueue_script('cfmobi_admin_js'trailingsla****(get_bloginfo('url')).'?cf_action=cfmobi_admin_js', array('jquery'));
    }

    function 
    cfmobi_admin_css() {
        
    header('Content-type: text/css');
    ?>
    fieldset.options div.option {
        background: #EAF3FA;
        margin-bottom: 8px;
        padding: 10px;
    }
    fieldset.options div.option label {
        display: block;
        float: left;
        font-weight: bold;
        margin-right: 10px;
        width: 150px;
    }
    fieldset.options div.option span.help {
        color: #666;
        font-size: 11px;
        margin-left: 8px;
    }
    #cfmobi_mobile_browsers, #cfmobi_touch_browsers {
        height: 200px;
        width: 300px;
    }
    #cfmobi_mobile_reset, #cfmobi_touch_reset {
        display: block;
        font-size: 11px;
        font-weight: normal;
    }
    <?php
        
    die();
    }

    function 
    cfmobi_admin_head() {
        echo 
    '<link rel="stylesheet" type="text/css" href="'.trailingsla****(get_bloginfo('url')).'?cf_action=cfmobi_admin_css" />';
    }
    add_action('admin_head''cfmobi_admin_head');

    $cfmobi_settings = array(
        
    'cfmobi_mobile_browsers' => array(
            
    'type' => 'textarea',
            
    'label' => 'Mobile Browsers <a href="#" id="cfmobi_mobile_reset">Reset to Default</a>',
            
    'default' => cfmobi_default_browsers('mobile'),
            
    'help' => '',
        ),
        
    'cfmobi_touch_browsers' => array(
            
    'type' => 'textarea',
            
    'label' => 'Touch Browsers <a href="#" id="cfmobi_touch_reset">Reset to Default</a>',
            
    'default' => cfmobi_default_browsers('touch'),
            
    'help' => '(iPhone, Android G1, BlackBerry Storm, etc.)',
        ),
    );

    function 
    cfmobi_setting($option) {
        
    $value get_option($option);
        if (empty(
    $value)) {
            global 
    $cfmobi_settings;
            
    $value $cfmobi_settings[$option]['default'];
        }
        return 
    $value;
    }

    function 
    cfmobi_admin_menu() {
        if (
    current_user_can('manage_options')) {
            
    add_options_page(
                
    __('WordPress Mobile Edition''cf-mobile')
                , 
    __('Mobile''cf-mobile')
                , 
    10
                
    basename(__FILE__)
                , 
    'cfmobi_settings_form'
            
    );
        }
    }
    add_action('admin_menu''cfmobi_admin_menu');

    function 
    cfmobi_plugin_action_links($links$file) {
        
    $plugin_file basename(__FILE__);
        if (
    $file == $plugin_file) {
            
    $settings_link '<a href="options-general.php?page='.$plugin_file.'">'.__('Settings''cf-mobile').'</a>';
            
    array_unshift($links$settings_link);
        }
        return 
    $links;
    }
    add_filter('plugin_action_links''cfmobi_plugin_action_links'102);

    if (!
    function_exists('cf_settings_field')) {
        function 
    cf_settings_field($key$config) {
            
    $option get_option($key);
            
    $label '<label for="'.$key.'">'.$config['label'].'</label>';
            
    $help '<span class="help">'.$config['help'].'</span>';
            switch (
    $config['type']) {
                case 
    'select':
                    
    $output $label.'<select name="'.$key.'" id="'.$key.'">';
                    foreach (
    $config['options'] as $val => $display) {
                        
    $option == $val $sel ' selected="selected"' $sel '';
                        
    $output .= '<option value="'.$val.'"'.$sel.'>'.htmlspecialchars($display).'</option>';
                    }
                    
    $output .= '</select>'.$help;
                    break;
                case 
    'textarea':
                    if (
    is_array($option)) {
                        
    $option implode("\n"$option);
                    }
                    
    $output $label.'<textarea name="'.$key.'" id="'.$key.'">'.htmlspecialchars($option).'</textarea>'.$help;
                    break;
                case 
    'string':
                case 
    'int':
                default:
                    
    $output $label.'<input name="'.$key.'" id="'.$key.'" value="'.htmlspecialchars($option).'" />'.$help;
                    break;
            }
            return 
    '<div class="option">'.$output.'<div class="clear"></div></div>';
        }
    }

    function 
    cfmobi_settings_form() {
        global 
    $cfmobi_settings;
        print(
    '
    <div class="wrap">
        <h2>'
    .__('WordPress Mobile Edition''cf-mobile').'</h2>
        <form id="cfmobi_settings_form" name="cfmobi_settings_form" action="'
    .get_bloginfo('wpurl').'/wp-admin/options-general.php" method="post">
            <input type="hidden" name="cf_action" value="cfmobi_update_settings" />
            <p>'
    .__('Browsers that have a <a href="http://en.wikipedia.org/wiki/User_agent">User Agent</a> matching a key below will be shown the mobile version of your site instead of the normal theme.''cf-mobile').'</p>
            <fieldset class="options">
        '
    );
        foreach (
    $cfmobi_settings as $key => $config) {
            echo 
    cf_settings_field($key$config);
        }
        print(
    '
            </fieldset>
            <p>'
    .sprintf(__('To see the User Agent for your browser, <a href="%s">click here</a>.''cf-mobile'), trailingsla****(get_bloginfo('home')).'?cf_action=cfmobi_who').'</p>
            <p class="submit">
                <input type="submit" name="submit" class="button-primary" value="'
    .__('Save Settings''cf-mobile').'" />
            </p>
        </form>
    </div>
        '
    );
        
    do_action('cfmobi_settings_form');
    }

    function 
    cfmobi_save_settings() {
        if (!
    current_user_can('manage_options')) {
            return;
        }
        global 
    $cfmobi_settings;
        foreach (
    $cfmobi_settings as $key => $option) {
            
    $value '';
            switch (
    $option['type']) {
                case 
    'int':
                    
    $value intval($_POST[$key]);
                    break;
                case 
    'select':
                    
    $test stripslashes($_POST[$key]);
                    if (isset(
    $option['options'][$test])) {
                        
    $value $test;
                    }
                    break;
                case 
    'string':
                case 
    'textarea':
                default:
                    
    $value stripslashes($_POST[$key]);
                    break;
            }
            
    update_option($key$value);
        }
    }

    if (!
    function_exists('get_snoopy')) {
        function 
    get_snoopy() {
            include_once(
    ABSPATH.'/wp-includes/class-snoopy.php');
            return new 
    Snoopy;
        }
    }


    ?>
    Now, I only have a touch-phone browser, so I can really only configure and try to test on that premise. Being what it is, I messed with this value in the above-code:

    PHP Code:
    #cfmobi_mobile_browsers, #cfmobi_touch_browsers {
        
    height200px;
        
    width300px
    I changed the width to 500px and the height to slightly more. Of course, this made every page wider and touch-users then had to scroll side-to-side to read content and check full-size pictures. Ideally, I would like to keep the default formatting but find code to implement in order to autofit all content to those confines.

    Is this possible?

    If anyone needs additional PHP code or files from me, please ask. As I mentioned above, the link I provided to the .zip file containing the entire plug-in is available and clean. I may not even be looking at the correct php for this adjustment for all I know.

    I would appreciate any all assistance and suggestions.

    As usual, thank you to this board and its members. You have all been of tremendous help since I joined.

    Warm Regards,

    Bob Coughlin

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Find out if your mobile's browser can detect the media type in your css definition. If it can, you can simply override those settings that you want to change when the page is being viewed on a mobile browser with another CSS file.

    I wouldn't recommend handling this on the PHP side; let CSS do the job for you.

    This was recently discussed here:

    redirect site to mobile website on phones

  • #3
    New Coder
    Join Date
    Mar 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You will have to forgive what may seem like queries that are irrelevant to your response. My first thought to your response was even if my phone's web browser would response to one type of CSS edit, not every phone's browser would. This is why I was trying to find a php side edit that would help solve this problem. Perhaps my logic was incorrect? It seems more difficult to accommodate every browser and media type when there may be a way to tweak the php to autocrop a single posts header picture.

    Be it as it may, I had some difficulty even understanding the media types of CSS and how to properly implement them even after reading your provided link. I had somewhat relevant google posting about a gentlemen who tweaked his mobile CSS code to attempt to get pictures to autofit. I made the appropriate adjustments but have the same issue.

    Other than the problem of simply having a post's header picture cropped off, everything else responds appropriately... Text wraps as it should, thumbnailed pictures drop down to the next line. Why would these behaviors occur with the only exception being a header picture?

    Do you have any other suggestions?

  • #4
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wordpress on mobile

    Hi!

    It seems as though you're trying to fix a problem that has already been solved!

    I've created a brand new plugin for Wordpress called the Wapple Architect Mobile Plugin for WordPress, written in WAPL that creates a site in whatever language the handset requires and dynamically resizes all images on the fly to fit the handset perfectly.

    It means that you upload your header image at 1000px, and it fits by knowing everything about the handset.

    The URL for the homepage can be found here: http://wordpress.org/extend/plugins/wapple-architect/ and it'd be great to hear what you thought! Any feedback would be very much appreciated!

    Thanks!
    Rich


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •