...

View Full Version : Autofitting Content for Mobile Version of Website



lifemisled
09-14-2009, 06:06 PM
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/download/carrington-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

/*
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', 10, 2);

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:


#cfmobi_mobile_browsers, #cfmobi_touch_browsers {
height: 200px;
width: 300px;

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

Fumigator
09-14-2009, 06:39 PM
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:

http://codingforums.com/showthread.php?t=176165

lifemisled
09-14-2009, 07:52 PM
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 (http://chungyc.org/story/2009/09/images-fit-wordpress-mobile-edition) 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?

richg
09-15-2009, 04:16 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum