2

I am working on a responsive design. In category pages i am showing the product small_image with resize(270,null). This is okay with desktop. But in mobile it takes little more seconds to load the product image.

This i tried to fix as following

  1. Loaded image with resize(110,null). but the images is too small and the it just sits in center of the grid with spaces around it.
  2. so i gave width to the img tag, then the image looks stretched, and i don't want this.

And there is another problem associated with this. My site is having varnish sitting in front of webserver and uses URL based caching. So once the page is cached it servers the same page irrespective of the device or resolution. So i tried to append a query string to all url that is being accessed with mobile devices so that desktop's and mobile's will have different cached pages.

eg:mysite.com/abc.html to mysite.com/abc.html?device=mobile

But magento simply refuses to redirect to my new url, with htaccess OR php code added in the top of index.php page. If it was working i thought of adding a forth image type called mobile and show that in mobile devices.

Is there a way by which i can show a non-stretched prod image in mobiles with image weight considerably decreased.

I think the question is clear,if it is not i will provide more info

EDIT http://adaptive-images.com/ is a popular way doing this and integration is also pretty easy. But its not working. This involves some htaccess coding to redirect the images to a php file. I think that part is not working

htaccess code

    RewriteCond %{REQUEST_URI} !ai-cache

    RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

just above the line

RewriteCond %{REQUEST_URI} !^/(media|skin|js)/

This is creating cache-images for skin folder but not for media/catalog Any sought of input on this from anybody.?

1

You can prevent image stretching by adding a css rule like this:

img {
  width: 100%;
  height: auto;
}

If you only use the width-attribute, your browser will use the static height-value and your images get a messy stretching...

It's important that no other css rule overwrite this one, so it's recommendable to combine this snippet with a class like "hScale".

I also recommended to edit the image-tag into something like this:

    <?php
      $img['original_size'] = '';
      $img['retina_size']   = '';
    ?>
    <img class="hScale" src="<?= $img['original_size'] ?>"
         srcset="<?= $img['original_size'] ?>,
                 <?= $img['retina_size'] ?> 2x" alt="">

This kind of image integration provides an optimal display on retina displays, because the corresponding devices load the image url from the sourceset-attribute. All other devices, without retina displays, shows the normal variant, without loading the retina images.

Hope that helps.

0

You can detect mobile browser at php file via $_SERVER['HTTP_USER_AGENT'].
And apply width based on mobile or desktop.
Also you can apply image width via css in percentage based.

This way also you can resolve your issue.

  • Its already responsive, But i am asking about smaller size images loaded instead of the bigger ones in desktop. Something like adaptive images – zamil Feb 5 '14 at 11:54
  • @zamil yes you can load smaller images if user browse your website in mobile and bigger images if user comes from desktop. Some thing like if(preg_match("/iphone/i",$_SERVER["HTTP_USER_AGENT"])) { resize(110,null). } else{ resize(220,null). } – Praful S Zaru Feb 5 '14 at 12:18
  • I think you have not understood my issue. I am loading the image, but it looks stretched in the container <li>. and second I am having problem with varnish also – zamil Feb 5 '14 at 13:48
  • I am trying to explain the same thing. can you create chat room and add me in chat room so i will explain better way to you directly? – Praful S Zaru Feb 6 '14 at 6:03
  • 1
    @zamil. I saw this question. Sorry I have no idea. Responsive design is not one of my strong points. I'm still learning how to do that. – Marius Feb 7 '14 at 9:38
-1

To make adaptive-images.php work with images in the /media/ folder :

delete: media/.htaccess

(Does anybody know what the .htaccess in /media/ is good for? i dont.)

To ignore the skin folder (adaptive-images.php):

RewriteCond %{REQUEST_URI} !images    
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php



Regading varnish and apaptive-images.php

You should tell varnish to not cache images so they can be handled by adaptive-images.php on the Magento Server:

Idea 1: Never cache images with varnish but always with adaptive-images.php cache

Edit your varnish VCL File (not yet tested):
if (req.url ~ "\.(jpg|jpeg|png|gif)$"){ return(pipe); }

As Vanish does not cache and delivers the images but the magento and adaptive-image.php the request might take a little longer but the returned files are smaller.

Idea 2: Only Cache images with adaptive-images.php on Mobile devices

Edit your varnish VCL File (not yet tested):

if(  
    req.url ~ "\.(jpg|jpeg|png|gif)$"
    && 
    req.http.user-agent ~ "(?i)iphone|htc|android|ipod|lg9700|blackberry9|nokiae|nokian|docomo|netfront|palmos|ipod|lg9700|htc|opera mini|palmsource|symbian OS|psp"
){
    return(pipe);
 }
  • have to check this. Since i was not getting any response here i went with cookie based technique, based on the screen with that is set in cookie i alter the image sizes in code.load a different sized image for mobile devices. rest is taken care by my responsive css – zamil Mar 27 '14 at 12:24
  • (Does anybody know what the .htaccess in /media/ is good for? i dont.) Congratulations, you've just opened up a WordPress sized vulnerability in your website by removing that particular .htaccess file. It prevents any uploader operations you've allowed to customers from uploading php and shell scripts to your website and then executing them by calling them from your media folders. Hackers is gonna love ya for making their job easier. – Fiasco Labs Apr 26 '15 at 19:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.