CODEWITHSUNDEEP
phphtmlimage
user188962
user188962

Reputation:

how to add image-border around an image?

Is there any simple way to add a image border around an image?

Reason is I want to create a drop-shadow effect around the image.

The images are loaded as thumbnails and are 110x75 px... Im thinking about creating a shadow border, but dont know how to add this to around the image, anybody know a way?

PHP preferrably...

Upvotes: 4

Views: 23284

Answers (7)

Anni
Anni

Reputation: 85

add Border around an Image by php GD

<?php

$img_src = '3.jpg';

$img = imagecreatefromjpeg($img_src);
$color = imagecolorallocate($img, 132, 15, 153);
$borderThickness = 10;

drawBorder($img, $color, $borderThickness);


    function drawBorder(&$img, &$color, $thickness)
    {
        $x1 = 0;
        $y1 = 0;
        $x2 = imagesx($img) - 1;
        $y2 = imagesy($img) - 1;

        for($i = 0; $i < $thickness; $i++)
        {

            imagerectangle($img, $x1++, $y1++, $x2--, $y2--, $color);
        }

    }

header('Content-type: image/jpeg');
imagejpeg($img);
?>

and Add Borer to an Image using CSS

.border
{
    width: 100px;
    height: 75px;
    border : 3px solid rgb(132, 15, 153);
}
<img src='3.jpg' class='border'>

Upvotes: 4

DEVOPS
DEVOPS

Reputation: 18790

function addBorderpng($add){
    $border=5; 
    $im=imagecreatefrompng($add);
    $width=imagesx($im);
    $height=imagesy($im);       
    $img_adj_width=$width+(2*$border);
    $img_adj_height=$height+(2*$border);
    $newimage=imagecreatetruecolor($img_adj_width,$img_adj_height);     

    $border_color = imagecolorallocate($newimage, 255, 255, 255);
    imagefilledrectangle($newimage,0,0,$img_adj_width, $img_adj_height,$border_color);

    imagecopyresized($newimage,$im,$border,$border,0,0,
    $width,$height,$width,$height); 
    imagepng($newimage,$add,9);  
    chmod("$add",0666);

}

Upvotes: 5

Shahid Karimi
Shahid Karimi

Reputation: 4357

Better solution:

function addBorderpng($add,$bdr=1,$color='#000000'){
    $arr = explode('.', $add);
    $extension = strtolower(end($arr));
    $border=$bdr;
    if($extension == 'jpg'){
        $im=imagecreatefromjpeg($add);
    }
    else if($extension =='png'){
        $im=imagecreatefrompng($add);
    }
    $width=imagesx($im);
    $height=imagesy($im);
    $img_adj_width=$width+(2*$border); 
    $img_adj_height=$height+(2*$border);
    $newimage=imagecreatetruecolor($img_adj_width,$img_adj_height);

    $color_gb_temp =HexToRGB($color);
    $border_color = imagecolorallocate($newimage, $color_gb_temp['r'], $color_gb_temp['g'], $color_gb_temp['b']);
    imagefilledrectangle($newimage,0,0,$img_adj_width,$img_adj_height,$border_color);

    imagecopyresized($newimage,$im,$border,$border,0,0,$width,$height,$width,$height); 
    header('Content-type: image/jpeg');
    if($extension == 'jpg')
        imagejpeg($newimage,$add,9);
    else if($extension == 'png')
        imagepng($newimage,$add,9);
     //imagepng($newimage);
    //chmod("$add",0666);

}
 function HexToRGB($hex){
        $hex = ereg_replace("#", "", $hex);
        $color = array();

        if(strlen($hex) == 3) {
        $color['r'] = hexdec(substr($hex, 0, 1) . $r);
        $color['g'] = hexdec(substr($hex, 1, 1) . $g);
        $color['b'] = hexdec(substr($hex, 2, 1) . $b);
        }
        else if(strlen($hex) == 6) {
        $color['r'] = hexdec(substr($hex, 0, 2));
        $color['g'] = hexdec(substr($hex, 2, 2));
        $color['b'] = hexdec(substr($hex, 4, 2));
        }
        return $color;
 }
addBorderpng('shahid.png',5);

Upvotes: 1

DisgruntledGoat
DisgruntledGoat

Reputation: 72560

If this is just visual sprinkles you could try the CSS3 box-shadow property. It will only work on Firefox, Safari and Chrome though, so it's a only a "progressive enhancement". This tutorial should help.

Alternatively you can use this CSS for a basic effect. gallery is whatever class name you give to the element surrounding the images (i.e. via <div class="gallery">...</div>). Width/height are optional, but if the images are all the same size then it's better to use CSS instead of the width/height attributes on the images themselves.

.gallery img {
    width: 100px;
    height: 75px;
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #ccc;
}

Upvotes: 1

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103145

You would need to use CSS to create this effect. There are several options.

 .img{
      border-top:none;
      border-left:none;
      border-right:solid 2px #dddddd;
      border-bottom:solid 2px #dddddd;
 }

is the simplest but it does not look so great.

To make even better shadows you can use a plugin for jQuery such as the shadows plugin. It creates nice drop shadow effects on any element on the page.

Upvotes: 1

Trevor
Trevor

Reputation: 6689

If you want to do it using PHP, try the PHP GD library: http://php.net/manual/en/book.image.php

Using CSS would be an easier option, using the border property.

Upvotes: 0

Colin Pickard
Colin Pickard

Reputation: 46663

You can use the GD library or ImageMagick to alter the actual image in PHP, but you can also achieve a similar effect in CSS, if it is only required on a web page.

There is a complete tutorial on doing it with PHP and GD here:

Upvotes: 4

Related Questions