Append Subtitle/Caption Image Using PHP and Hide It with CSS

Last update: •Date posted:
COMMENTS•12 Comments/in /Posted by MIKE DALISAY

Note: People say it isn’t actually a watermark, the image appended can be called a “Caption” or “Hidden Subtitle”. So in this post, when I say “watermark”, it refers to the ”Caption” or “Hidden Subtitle”.
Nowadays I see many websites with image contents. Funny images, interesting images, cosplay, art and many more kinds of images. Many people don’t want to hotlink or copy the image link and share it to any social networking site such as Facebook, instead they copy or download the image (using browser’s “Save image as” option) and upload it to their own account without linking it to the source or website where they found it.

One solution websites do is to append a watermark on their images. The don’t want this watermark to be shown on their website but they want it to appear when the user went to the actual image link or when this image was copied or downloaded.
An example website the does this is 9gag.com. When you see the image on their site, it does not have any watermark. But when you try to save the image, the watermark will appear, appended at the bottom part of the image, it is in white background.
Today we’re going to do a code the does something like that.

DOWNLOAD CODE LIVE DEMO
  • Append a watermark at the bottom part of the image using PHP
  • Hide it using CSS

First, we need to prepare:

  • Sample image – the image you want to put a watermark
  • Watermark image – the image that will be put as watermark on the sample image

As for the sample image, we’re going to use this image of my pets (yes, my pets):

Append Subtitle/Caption Image Using PHP and Hide It with CSS

For the watermark image:

This will be appended on the main image
This will be appended on the main image

Some notes:

    • “sample.jpg” and “watermark.jpg” should be your variable
    • PHP GD library should be enabled on your server

Our index.php, we are going to have the following code:

<?php
 
    //set the header
    header( "Content-type: image/jpg" );
 
    //get image sizes first
    $image_size = getimagesize( "sample.jpg" );
    $watermark_size = getimagesize( "watermark.jpg" );
 
    $image_size_width = $image_size[0];
    $image_size_height = $image_size[1];
 
    $watermark_size_width = $watermark_size[0];
    $watermark_size_height = $watermark_size[1];
 
    //create images
    $main_img = imagecreatefromjpeg( "sample.jpg" );
    $watermark = imagecreatefromjpeg( "watermark.jpg" );
 
    //create canvas
    $canvas = imagecreatetruecolor(
 
        $image_size_width, //width of main image
        $image_size_height + $watermark_size_height //this is the new height, height of main image plus watermark image
    ) or die('Cannot Initialize new GD image stream.');
 
     
    //set white background of canvas
    $bg = imagecolorallocate( $canvas, 255, 255, 255 );
    imagefill ( $canvas, 0, 0, $bg );
 
 
    //paste main image to the canvas
    imagecopymerge(
        $canvas, 
        $main_img, 
        0, //main_img x coordinate ( distance from left side of main_img )
        0, //main_img y coordinate ( distance form top of main_img )
        0, //main_img x coordinate image ( distance from left side of main_img )
        0, //main_img y coordinate image ( distance from top side of main_img )
        $image_size_width, //main_img width
        $image_size_height, //main_img height
        100 //the opacity of main_img
 
    );
 
    //paste the watermark image to the canvas
    imagecopymerge(
        $canvas, 
        $watermark, 
        0, //watermark x coordinate ( distance from left side of main_img )
        $image_size_height, //watermark y coordinate ( distance form top of main_img )
        0, //watermark x coordinate image ( distance from left side of watermark )
        0, //watermark y coordinate image ( distance from top side of watermark ) 
        $watermark_size_width, //watermark width
        $watermark_size_height, //watermark height
        100 //the opacity of watermark
 
    );
 
    //show the new image
    imagejpeg( $canvas );
 
    //if you want to save it to your server directory, just add the second param
    //something like:
    //imagejpeg($canvas, 'your_directory/new_img.jpg');
 
    imagedestroy( $canvas );
    imagedestroy( $main_img );
    imagedestroy( $watermark );
 
?>
new_img

Now, we are going to the second part of this post. We are going to show the output image on a webpage, but the watermark is hidden using CSS.

Our page.php should have the following code:

<html>
 
    <head>
 
        <title></title>
 
    </head>
 
<body>
 
    <div style='font-weight:bold; font-size:18px;'>The image below has a watermark, but it was hidden.</div>
    <div style='margin:5px 0;'>Try to go to the actual image by doing 'open image in new tab' or downloading it.</div>
 
 
    <div style='overflow:hidden;'>
 
        <!-- -30px here is the height of our watermark -->
        <img src='new_img.jpg' style='margin:0 0 -30px 0;' />
 
    </div>
 
</body>
</html>

See the live demo for the output! :)

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.