Question

I am developing a site using WordPress & phpBB and as you must be aware that the image paths are generated by these CMSs. What I want is………… to hold the output before sending to browser………….. Make changes to image path depending on the device type and finally output the correct images.

Why do I want to replace the paths?

Because my NORMAL image is 180KB, my MEDIUM image is 90KB an my SMALL image is 30KB and like this have about 20 images on each page and imagine the amount of page speed I will reduce by replacing it with a smaller image for small and slow devices. Also images are cropped to highlight only the important portion for smaller devices hence changing the dimensions will not resolve my issue.

I am also not looking for CSS3 Media Queries as I have a specific reason for not using them.

What will work for me?

As my priority is to keep the page load times to minimal, the best solution would be using some Regular-Expression as I am not using any JavaScript Libraries in my Template.

If this cannot be achieved without JavaScript, then I would prefer plain old JavaScript method without using any libraries as this will be the only JavaScript function in my template and it would not make any sense to load an entire library for it.

The following is what I was thing should be the approach. However I dont know how to get it. Kindly help.

Please Note:- I am very new to PHP and also ZERO at Regex and JavaScript. Hence please explain in a bit detail.

<?php ob_start (); ?> /* Start Buffering */


<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque vestibulum fringilla. Nullam eget fermentum neque. Quisque ullamcorper fringilla quam, eu elementum nisl ornare vitae.</p>
<img src="images/desktop/pic1.jpg"/>
<img src="images/desktop/pic2.jpg"/>
<img src="images/desktop/pic3.jpg"/>
</div>

<?php ob_get_contents();  /* Get the Buffer */

if ($layout = 'mobile') {

    /* replace <img src="images/desktop/pic1.jpg"/> with <img src="images/mobile/pic1.jpg"/>
    /* replace <img src="images/desktop/pic2.jpg"/> with <img src="images/mobile/pic2.jpg"/>
    /* replace <img src="images/desktop/pic3.jpg"/> with <img src="images/mobile/pic3.jpg"/>
    The Folder-Name 'desktop' should be replaced by 'mobile'
    */

} else if ($layout = 'tablet') {

    /* replace <img src="images/desktop/pic1.jpg"/> with <img src="images/tablet/pic1.jpg"/>
    /* replace <img src="images/desktop/pic2.jpg"/> with <img src="images/tablet/pic2.jpg"/>
    /* replace <img src="images/desktop/pic3.jpg"/> with <img src="images/tablet/pic3.jpg"/>
    The Folder-Name 'desktop' should be replaced by 'tablet'
    */

}

ob_end_flush (); /* Send Output to the browser */
?>

The values of $layout are being calculated by another PHP Function.

Please feel free to suggest a totally different solution also if you feel that would be a better approach.

Answer 1

You’re wanting to replace the word “desktop” in your paths to “mobile” or “tablet”. You don’t need a regular expression.

I was going to suggest using str_replace, but then I realized you don’t need even that.

Try this on for size:

<?php ob_start (); ?> /* Start Buffering */
<div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque vestibulum fringilla. Nullam eget fermentum neque. Quisque ullamcorper fringilla quam, eu elementum nisl ornare vitae.
    </p>
    <img src="images/<?=($layout !== 'desktop' ? $layout : 'desktop')?>/pic1.jpg"/>
    <img src="images/<?=($layout !== 'desktop' ? $layout : 'desktop')?>/pic2.jpg"/>
    <img src="images/<?=($layout !== 'desktop' ? $layout : 'desktop')?>/pic3.jpg"/>
</div>
?>

---

What’s weird is that if layout is always set (that is, ‘desktop’ normally, or either ‘mobile’ or ‘tablet’), why do you even need to do a replacement of the url? You could just dynamically construct the url like so:

<img src="images/<?=$layout?>/pic1.jpg"/>