To add watermark image with original image by using php GD functions

$main_img = "Porsche_911_996_Carrera_4S.jpg"; // main big photo / picture
$watermark_img = "watermark.gif"; // use GIF or PNG, JPEG has no tranparency support
$padding = 80; // distance to border in pixels for watermark image
$opacity = 20; // image opacity for transparent watermark
$watermark = imagecreatefromgif($watermark_img); // create watermark
$image = imagecreatefromjpeg($main_img); // create main graphic
if(!$image || !$watermark) die("Error: main image or watermark could not be loaded!");
$watermark_size = getimagesize($watermark_img);
$watermark_width = $watermark_size[0];
$watermark_height = $watermark_size[1];
$image_size = getimagesize($main_img);
$dest_x = $image_size[0] - $watermark_width - $padding+10;
$dest_y = $image_size[1] - $watermark_height - $padding-80;
// copy watermark on main image
imagecopymerge
($image, $watermark,$dest_x, $dest_y, 0, 0, 
$watermark_width, $watermark_height, $opacity);
// print image to screen
header("content-type: image/jpeg");
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark); 

To Crop image using PHP GD function

cropImage(150,100, 'example.png', 'png', 'image.png');
function cropImage($nw, $nh, $source, $stype, $dest) {
$size = getimagesize($source);
echo "
".$w = 500;
echo "
".$h = 400;
switch($stype) {
case 'gif':
$simg = imagecreatefromgif($source);
break;
case 'jpg':
$simg = imagecreatefromjpeg($source);
break;
case 'png':
$simg = imagecreatefrompng($source);
break;
}
$dimg = imagecreatetruecolor($nw, $nh);
echo "
".$wm = $w/$nw;
echo "
".$hm = $h/$nh;
echo "
".$h_height = $nh/2;
echo "
".$w_height = $nw/2;
if($w> $h) {
echo "
".$adjusted_width = $w / $hm;
echo "
".$half_width = ($adjusted_width / 2)+25;
echo "
".$int_width = $half_width - $w_height;
imagecopyresampled($dimg,$simg,-$int_width,0,0,0,$adjusted_width,$nh,$w,$h);
}
elseif(($w <$h) || ($w == $h)) {
$adjusted_height = $h / $wm;
$half_height = $adjusted_height / 2;
$int_height = $half_height - $h_height;
imagecopyresampled($dimg,$simg,0,-$int_height,0,0,$nw,$adjusted_height,$w,$h);
} else {
imagecopyresampled($dimg,$simg,0,0,0,0,$nw,$nh,$w,$h);
}

imagejpeg($dimg,$dest,100);
}

Bootstrap Tab to set active & show its content in onload or onclick

<div>
    <ul class="nav nav-tabs" id="tabMenu">
        <li class="active"><a href="#Home">Home</a></li>
        <li><a href="#Training">Training</a></li>
        <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
Placements <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#dotnet">DotNet</a></li>
                <li><a href="#android">Android</a></li>
                <li><a href="#java">Java</a></li>
            </ul>
        </li>
    </ul>
    <div class="tab-content">
        <div id="Home" class="tab-pane fade in active">
            <p>This is the Home page...</p>
        </div>
        <div id="Training" class="tab-pane fade">
            <p>Please select your option regarding on Training...</p>
        </div>
        <div id="dotnet" class="tab-pane fade">
            <p>Welcome to DotNet Placements Section...</p>
        </div>
        <div id="android" class="tab-pane fade">
            <p>Welcome to Android Placements Section...</p>
        </div>
        <div id="java" class="tab-pane fade">
            <p>Welcome to Java Placements Section...</p>
        </div>
    </div>
</div>


Showing Tab targeted by Selector:
In order to show our tab manually on start or reload, we have to add the following 
script to the above code
<script type="text/javascript">
$(document).ready(function () {
    $('#tabMenu a[href="#java"]').tab('show'); 
// showing the tab targeted by the selector
});
</script>


Showing First tab by Default:
In order to show the First tab on page reload, Add the below script to the main source
<script type="text/javascript">
$(document).ready(function () {
    $("#tabMenu a:first").tab('show'); // It show the first tab on Reload
});
</script>


Showing Last tab by Default:
If we need to show the last tab on default, Change the Script like below,
<script type="text/javascript">
$(document).ready(function () {
    $("#tabMenu a:last").tab('show'); 
// It show the Last tab on Reload
});
</script>


Showing Tabs based on Index:
We can also show the Default Tab by using Index like in the below script,
<script type="text/javascript">
$(document).ready(function () {
    $("#tabMenu li:eq(1) a").tab('show'); 
// It shows second tab (0-indexed, like an array) on Reload
});
</script>