Different Width for Image if Mobile - PHP

Question

Below you will see that I am trying to add a 40% width to my image if not a mobile device. However, the image is still showing with 100% width even on Desktop Devices. You can view this page here: https://www.tattiniboots.com/product/terranova/

This is the code that I am using

require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

// Any mobile device (phones or tablets).
if (!$detect->isMobile()) {
    add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);

    function bbloomer_add_below_prod_gallery()
    {
        global $product;
        $id = $product->id;
        if ($id == 5735) {
            echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
            echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
            echo '</div>';
        }
    }
} else {
    add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);

    function bbloomer_add_below_prod_gallery()
    {
        global $product;
        $id = $product->id;
        if ($id == 5735) {
            echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
            echo '<center><h2>NOT MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" width="40%">';
            echo '</div>';
        }
    }
}

There is really no reason to do this in your PHP. You can do this in CSS with the same result. — disinfor, Dec 03 '19 at 22:31

score 1 · Accepted Answer · answered Nov 29 '19 at 21:59

Echoing html inside a php file is a bad idea, both for readability, and debugging. Having inline css is also not a good thing. I would honestly recommend using media queries instead of using mobile detect, because it's not 100% accurate (it doesn't recognize some phones, and you have to keep it up to date). With all that said, are you trying to "increase" 40% width to a 100% width image? It's not possible to have more than 100% width. You can try to increase the width of the surrounding div with the "woocommerce-product-gallery" class. I also notice an inconsistency here:

if ( !$detect->isMobile() ) {
  ... 
   echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
}

It looks like it's checking if it's not mobile, and adding the mobile img, and the reverse for the else.

score 0 · Answer 2 · answered Nov 30 '19 at 08:20

0

I think you've choosen a bad way to solve this problem.the best way is using css (media query). you can't use "%" in html tag width.

answered Nov 30 '19 at 08:20

eli

162
7

Johannes · Answer 3 · 2019-11-30T14:43:17.370

width as an attribute inside the img tag always has a value in pixels (it's written without the pixels, just as the number), so the way you wrote it won't work.

If you want a percentage value for width as an inline attribute for the img tag, you should use the style attribute. So your img tag should look like this:

<img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" style="width:40%;">

score 0 · Answer 4 · answered Dec 03 '19 at 22:27

0

Yes this solution was resolved by simple declaring the sizing options within CSS. Remember that it is also possible to add a class within php to the image you have added to further facilitate this CSS declaration

answered Dec 03 '19 at 22:27

ttattini

196
1
17

Different Width for Image if Mobile - PHP

4 Answers4