4

Is it possible to fake a empty image in html that behaves like a real one but doesn't exist?

For example i have a responsive column in which should be a 200x150px image (which gets styled: width: 100%; height: auto; because its responsive) ... But if there is no image it should be placed a placeholder that fakes exactly the size that a real 200x150px sized image would have.

I tried a image tag like the following but it doesn't work because of that height: auto. About that weird src look at this.

<img src="//:0" alt="" width="200" height="150" />

Would it be possible to generate a empty png with php?

<img src="fake.php?s=200x150" alt="" />

EDIT: Some guys mentioned the service placehold.it. Basically that is exactly what i need (And in most cases absolutely adequate) but because this is for a WordPress Plugin it should also run locally whithout internet connection. Best would be a solution without external services.

Community
  • 1
  • 1
GDY
  • 2,872
  • 1
  • 24
  • 44
  • Have you considered using something like [placehold.it](http://www.placehold.it)? – James Wallen-Jones Nov 17 '15 at 10:13
  • `` – Dale Nov 17 '15 at 10:14
  • What is you just fill the "blank" image with a color? `` – Chris Nov 17 '15 at 10:19
  • Hey thanks guys ;) Never heared of placehold.it ... Looks great. The problem is that this is for a wordpress plugin. So it should run on a local machine without internet connection. But it looks like that service do exactly what i need – GDY Nov 17 '15 at 10:27
  • If it's any help, you can use [WP_Image_Editor](https://codex.wordpress.org/Class_Reference/WP_Image_Editor) to resize an image dynamically in WordPress. – Matt Gibson Nov 17 '15 at 10:43
  • @ Matt Gibson: Thanks it is not that easy. This is a placeholder for empty editable images for a plugin that allows to create and edit modular contents in your site's frontend. – GDY Nov 17 '15 at 10:45
  • @Grandy Yeah; I was thinking that your plugin could use a single placeholder image and resize it dynamically upon request, based on the parameters (i.e. I'm just suggesting the code to use in the backend of your "fake.php?s=200x150" handler..) – Matt Gibson Nov 17 '15 at 11:16
  • @Matt Gibson: This is probably not the best solution performance wise, cause the server has to resize that image multiple times per page load (based on the number of editable images on the current page) – GDY Nov 17 '15 at 11:20

2 Answers2

2

This is the solution i came up with (a fully transparent image in that size):

<?php

    // Image size
    $imageWidth = is_numeric( $_GET[ 'w' ] ) ? $_GET[ 'w' ] : 0;
    $imageHeight = is_numeric( $_GET[ 'h' ] ) ? $_GET[ 'h' ] : 0;

    // Header
    header ('Content-Type: image/png');

    // Create Image
    $image = imagecreatetruecolor( $imageWidth, $imageHeight );
    imagesavealpha( $image, true );
    $color = imagecolorallocatealpha($image, 0, 0, 0, 127);
    imagefill($image, 0, 0, $color);

    // Ouput
    imagepng( $image );
    imagedestroy( $image );

?>

It would also be possible to fill the image with an color:

<?php

    // Image size
    $imageWidth = is_numeric( $_GET[ 'w' ] ) ? $_GET[ 'w' ] : 0;
    $imageHeight = is_numeric( $_GET[ 'h' ] ) ? $_GET[ 'h' ] : 0;

    // Header
    header ('Content-Type: image/png');

    // Create Image
    $image = imagecreatetruecolor( $imageWidth, $imageHeight );
    imagesavealpha( $image, true );
    $color = imagecolorallocatealpha($image, 180, 180, 180, 0);
    imagefill($image, 0, 0, $color);

    $text_color = imagecolorallocatealpha( $image, 255, 255, 255, 50 );
    imagestring($image, 1, 5, 5,  $imageWidth . ' x ' . $imageHeight, $text_color);

    // Ouput
    imagepng( $image );
    imagedestroy( $image );

?>

The usage would be:

<img src="placeholder.php?w=350&h=250" alt="" />
GDY
  • 2,872
  • 1
  • 24
  • 44
  • Bear in mind that while this may work on your install of WordPress, that's because you have the GD library available. Other people may have ImageMagick, or no library at all, and you might want to consider those possibilities if you're going to distribute this code, rather than just use it for a known environment. (That's a reason I suggested using WP_Image_Editor if possible; that transparently uses whatever image library it can find.) – Matt Gibson Nov 17 '15 at 11:18
  • Yeah that's a good point x_x. But if this plugin would be published, there probably would be thousands of things that doesn't work perfectly ... although it works already amazing it is far from ready for the public. Maybe i should give your solution a try ;) – GDY Nov 17 '15 at 11:27
0

Instead of using php to serve a "fake" image, why don't you use a placeholder image that would be a transparent 1px x 1px png file ?

Anyway, to answer your question, you can server images with php: 

<?php
//redefine the header
header("Content-type: image/png");
//send the image content
readfile('/path/of/a/png/image.png');
?>
Bar-code
  • 277
  • 1
  • 6
  • Creating an image from scratch would require GB library: `$my_img = imagecreate( 200, 150 );` `imagepng($my_img);` `imagedestroy($my_img);` – Bar-code Nov 17 '15 at 10:23
  • The problem is that a 1x1px sized image behaves not like a 200x150px sized one in that responsive enviroment – GDY Nov 17 '15 at 10:25