How to add an image border around an image?

Question

Is there an easy way to add an image border around an image?

I want to create a shadow effect for an image.

Images are loaded as thumbnails and are 110x75 px ... I’m thinking about creating a shadow border, but don’t know how to add this around the image, does anyone know a way?

PHP is preferable ...

Answer 1

You can use the GD or ImageMagick library to change 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 this subject with PHP and GD:

• Adding Drop Shadows with PHP

Answer 2

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); } 

Answer 3

You will 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 easiest, but it does not look so wonderful.

To make even better shadows, you can use a jQuery plugin like the shadow plugin. It creates good shadow effects for any element on the page.

Answer 4

If these are just visual sprinkles, you can try the CSS3 box-shadow property. It will only work in Firefox, Safari and Chrome, so it will only be a "progressive improvement." This tutorial should help.

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

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

Answer 5

The best 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);

Answer 6

add border around 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 the image using CSS

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

Answer 7

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

Using CSS would be easier using the border property.