dynamic img tags from database

[merylvingien]

Hi Folks, having a bit of an issue here that i cannot get my head around for some reason.
 
I am working on a site that is a rebuild of an ancient site (its been around since the late 90's)
Anyway, all old pages have been put into a database along with the old img tags. These images are randomly place throughout the text in the pages.

Each page is called from one php file. EG: www.mysite.com/post.php?pagename=example
 
The new site is mobile compatible so images need to be displayed as such. I always offer up larger images for desktop devices and smaller ones for mobile.

EG:

<?php
if($ismobile) {
$imgpre= "mobimages";
} else {
$imgpre= "images";
}
?>
<img src="<?php echo $imgpre; ?>/someimage.png" alt="" <?php if($ismobile) {echo 'width="250" height="167"';} else {echo 'width="500" height="333"';} ?>>

At the moment, all the images are stored in the database as normal image tags and i have tried altering them with str_replace or preg_replace but that int going anywhere.

 

So i have tried this

<img src="getimage.php?imageid=1" width="500" height="677" alt="">

getimage.php is this:

<?php
$imageid = $_GET['imageid'];
$sql = mysqli_query($con, "SELECT image FROM images WHERE id=$imageid");
$row = mysqli_fetch_row($sql);
mysqli_close($con);
header("Content-Type: image/jpeg");
echo $row['image'];
?>

However, this is not working either.

Anyone have any ideas, or suggestions?

 

Its not a problem to alter the img tags in the database or have them stored seperate along with each page text.

 

At the moment I am at a loss.

Edited February 10, 2016 by merylvingien

[requinix]

You're asking for information about why stuff is working, but you're only talking about half of the work you've done. "Altering [the images] with str_replace or preg_replace" can work fine if done correctly. That getimage.php could work fine if everything else is in line with it.

 

So I'm not sure what to say. If you're simply migrating data and not looking too much into the future (where the images may change yet again) then I'd recommend just running a one-time script that updates all the tags in all the pages with whatever you want. Like that getimage.php stuff, which also necessitates storing the replaced image data somewhere else at the same time.

[fastsol]

Why even bother serving 2 different images based on device.  Unless the original image is just way to high a file size.  The better way is to simply allow the image to scale down automatically via css.  Then the image will just shrink when it's container is smaller than the image.  Unless I am unclear as to why you are wanting to change the images in the first place.

 

Something like this

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

[merylvingien]

Thanks for the replies, but i have fixed the getimage.php file and it works ok now.

 

For anyone else that might run into this, the fix was

 

change

header("Content-Type: image/jpeg");
echo $row['image'];

to

$info = getimagesize($image);
header('Content-Type: '.$info['mime']);
echo file_get_contents($image);

fastsol:

Most of the original images are fairly big.

Why resize a massive image that might be being downloaded on a phone via a mobile connection?

Much better and quicker to serve a smaller, correct size image in the first place. Just my opinion.

 

Anyway, thanks for the replies.

[fastsol]

Yeah if the image file size was large from way back then, it probably makes sense to do it the way you are.  Otherwise in todays time it would be best to just photoshop the image and save it for web to keep the file size down and then there are also compression things that can be done, all without making 2 of the same images.

[Jacques1]

Instead of tunnelling every single image request through the PHP interpreter (which is inefficient), you can simply tell the webserver to send a particular file. nginx has the X-Accel header for this purpose, Apache has mod_xsendfile.