‘SRCSET’ ATTRIBUTE SOLVING RESPONSIVE IMAGE STANDARD

Not only do you need to accommodate design layouts for mobile devices, but you also need to take into account high pixel density displays, like Apple’s Retina devices. These displays have a pixel density up to 326 pixels per inch compared to standard desktop monitors which are around 100 ppi.

Responsive Web Design is a simple technique until you consider images. There are a number of issues:

1. Bandwidth can be saved if smaller images are sent to smaller-screen devices.
2. On lower resolutions, it may be preferable to show a cropped image with the main detail rather than a resized view of the whole image.
3. Devices with higher-density displays (Retina) could be sent higher resolution images.

I have a suspicion the problem has been overstated. Few of us will ever bother to create numerous device-targeted images; there are too many options and life is too short. That said…

Are Displays So Different?

If we look at the lower end of the display spectrum, we find mobile phones. Even the cheapest smartphone has a 800×480 display. That’s approximately half the dimensions (quarter the area) of a mid-range laptop but it’s still a reasonable resolution. And remember the browser runs full-screen which few people would do on a PC.

To the other extreme we have double-density displays, commonly known by Apple’s trademarked term — Retina. Recent iPads have a native resolution of 2,048×1,536 or 264 pixels per inch where individual pixels can be too small for the naked eye. To ensure websites and apps remain usable, the device reverts to a standard 1,024×768 resolution but uses the extra pixels for smoother fonts and icons.

My point is: display specifications are converging. High-end mobile resolutions already match or exceed typical PC screens and display densities can only go so far; why create triple-density displays when double-density pixels are already invisible? The need for responsive images will reduce as hardware improves.

My Images are Blocky!

I’m yet to be convinced Retina image quality is a major problem…

• Images are usable.
• Relatively few people (currently) own double-density devices.
• The majority of Retina devices are smartphones and tablets. Should we be sending higher-resolution images to gadgets with more limited processing power and network availability?
• Finally, why are we adding high-resolution photographs to our websites when bandwidth and responsiveness remain so important?

Of course, none of this matters when your boss demands “less-blocky” images on his iPad. However, I would recommend a more pragmatic cross-browser approach in preference to larger images, i.e. replace bitmaps with SVG images, CSS3 effects or webfont icons when possible (refer to 5 Ways to Support High-Density Retina Displays).

The Industry Decides

I may be slightly dismissive, but many people care about the responsive image problem. A recent meeting of W3C members finally reached a consensus and vendors are likely to support the imagesrcset attribute proposal. When implemented, you will be able to use code such as:

 
<img src="normal.jpg" srcset="midres.jpg 1.5x, highres.jpg 2x" />

Devices with standard resolutions or browsers which don’t support srcset will load normal.jpg. Devices with 1.5x density screens will show midres.jpg and 2x density screens will show highres.jpg.

Unfortunately, pixel density is not the only factor and the viewport width (and possibly height) should also be considered. Therefore, srcset could eventually support the following cryptic syntax:

 <img src="x.jpg" srcset="y.jpg 800w 1x, y.jpg 400w 2x, z.jpg 1200w 1x, z.jpg 600w 2x" />

In this example, y.jpg is loaded on standard-resolution devices with a maximum 800 pixel width and double-density devices with a maximum 400 pixel width.

srcset is hard to read, prone to errors and I suspect it will be too easy to incorrectly target or miss a range of devices. However, it was considered more backward-compatible and easier to implement than other proposals.

Of course, the proposition could still change. I have a horrible feeling we’ll all be using double-density displays and extra-large images before this becomes a usable standard!

check out the http://www.webkit.org/demos/srcset/

helper tab in wordpress

 
 /*
  * helper class for all admin pages 
  */
class my_wp_helper_class { 
    public function __construct() {
        if (defined('WP_ADMIN') && WP_ADMIN) {
            global $page_hook;
            $this->current_screen = get_current_screen(); 
            if (method_exists($this, $page_hook)) {
                add_action("load-".$page_hook,array($this,$page_hook)); 
            }  
        }
    }

    /*  To add helper tab 
     * Accept the array in $args default is shown below
     * $defaults = array('title'    => false,'id'=> false,'content'  => '','callback' => false);  
     */
    protected function add_help_tab($args) {
         $this->current_screen->add_help_tab($args);
    }
    /*
     * accept the string in $content args
     * $content =" sample content";
     */
    protected function set_help_sidebar($content) { 
         $this->current_screen->$args($content);
    }

    public function plugin_page_my_page() {   // function name must be $page_hook name echo the $page_hook in the __construct() 
        $options_help = 'helper message for tab1';
        $this->add_help_tab(array(
								'id' => 'tab1',
								'title' => __('tab1'),
								'content' => $options_help,
							));

        $options_help2 = 'helper message for tab2';

        $this->add_help_tab(array(
								'id' => 'tab2',
								'title' => __('tab2'),
								'content' => $options_help2,
							)); 
	     $this->set_help_sidebar("side bar content");
	}

}

add_action('current_screen', create_function('', 'new my_wp_helper_class;'));

ajax file upload

 
<html>
  <head>
    <title> file upload script in ajax </title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  </head>
  <body>
    <form name="comp_logo" id="comp_logo" method="POST" action="" enctype="multipart/form-data">
      <input type="file" name="add_logo" id="upload_file" class="add_logo">
      <input type="button" class="upload_logo" value="upload"><br>
    </form>
    <div>
        you must add a file upload script in http://example.com/admin/admin-ajax.php php :<a href="http://www.w3schools.com/php/php_file_upload.asp"> upload script </a>
    </div>
    <script type="text/javascript">
      jQuery(document).ready(function(){
        jQuery('.upload_logo').click(function(){
          var fd = new FormData(); // form data object
          fd.append( 'file', jQuery( '#upload_file' )[0].files[0] ); // add the file to the form data
          fd.append( 'action', 'obs_update_comp_logo'); // add the extra paramater to the form data object

          // Ajax call
          jQuery.ajax({
            data: fd, // data send with file
            processData: false,
            contentType: false,
            type: 'POST',
            async: false,
            url:'http://example.com/admin/admin-ajax.php',
            success: function(res){
                alert("file uploaded !!!")
                 /* sucess function */
            }
          });
          return false; // to stop the process
        });
     });
    </script>
  </body>
</html>

get the object to array format in php

<?php
class Point2D {
var $x, $y;

function Point2D($x, $y)
{
$this->x = $x;
$this->y = $y;
}

}

$p1 = new Point2D(1.233, 3.445);
echo “<pre>”;
print_r($p1);   //print in object formate
echo “</pre>”;

echo “<pre>”;
print_r(get_object_vars($p1));   //print in array format
echo “</pre>”;

?>

_______________________________________________________________________________________

// ******************Output**********************************************

_______________________________________________________________________________________

Point2D Object
(
[x] => 1.233
[y] => 3.445
[label] =>
)
Array
(
[x] => 1.233
[y] => 3.445
[label] =>
)