Facebook Style Background Image Upload and Position Adjustment

Hi all,
I share somany article related to web development. Many people use my article for their professional growth. I got many tutorial requests from my readers related to web development using php, wordpress, mysql, ajax, jquery, javascript etc. From their request, one of my readers asked to me “ how to design facebook style background image upload and position adjustment using web development technology.” After along study, I using Ajax and jQuerymethod for developing this application. I have been published many tutorials related ajax image upload. This one is something different and very interesting.

Table of Content

• MySQL table
• HTML or PHP
• JavaScript
• Ajax
• CSS

MySQL table

The MySQL table used for storing user details to database. Here I use user table for this operation. It contains all the registered user details.

	CREATE TABLE users(
		user_id INT auto_increment primary key, 
		username VARCHAR(30), 
		email VARCHAR(100), 
		name VARCHAR(100), 
		passcode VARCHAR(100), 
		profile_background VARCHAR(300),
		profile_background_position VARCHAR(10)
	);

User database store like this.

	INSERT INTO users('username','email','name','passcode','profile_background','profile_background_position')
	VALUES('pritty','prittytimes@gmail.com','Pritty Times','e10adc3949ba59abbe56e057f20f883e','14643223151.jpg',' -413px');

Database connection in php code

db.php

HTML Code

Pritty  Times

JavaScript Code

Contains JavaScript code and drag option works with Jquery UI plugin. $(‘body’).on(‘change’,’#bgphotoimg’, function()- bgphotoimg is the ID name of INPUT FILE tag and $(‘#bgimageform’).ajaxForm() – imageform is the ID name of FORM. While changing INPUT it calls FORM submit without refreshing page using ajaxForm() method.

CSS Code

*{margin:0px;padding:0px}
body{font-family: Arial, Helvetica, sans-serif;background-color: #e9eaed;color: #333333;}
#container{margin:0 auto;width:900px}
#timelineContainer{width:100%;position:relative}
#timelineBackground {
height: 315px;
position: relative;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
margin-top: -20px;
overflow: hidden;
background-color:#ffffff;
}
#timelineProfilePic {
width: 170px;
height: 170px;
border: 1px solid #666666;
background-color: #ffffff;
position: absolute;
margin-top: -145px;
margin-left: 20px;
z-index: 1000;
overflow: hidden;
}
#timelineTitle {
color: #ffffff;
font-size: 24px;
margin-top: -45px;
position: absolute;
margin-left: 206px;
font-weight: bold;
text-rendering: optimizelegibility;
text-shadow: 0 0 3px rgba(0,0,0,.8);
z-index: 999;
text-transform: capitalize;
}
#timelineShade {
min-height: 95px;
position: absolute;
margin-top: -95px;
width: 100%;
background:url(images/timeline_shade.png);
}
.timelineUploadBG {
position: absolute;
margin-top: 50px;
margin-left: 813px;
height: 32px;
width: 32px;
}
#timelineNav {
border: 1px solid #d6d7da;
background-color: #ffffff;
min-height: 43px;
margin-bottom: 10px;
position: relative;
}

Styling an input type="file" browse button

Default input type file works with browse button, replaced choose/browse button with camera icon.

CSS

Here actual input type="file" in hidden more, applied background image for DIV.

.uploadFile {
background: url('images_bg/whitecam.png') no-repeat;
height: 32px;
width: 32px;
overflow: hidden;
cursor: pointer;
}
.uploadFile input {
filter: alpha(opacity=0);
opacity: 0;
margin-left: -110px;
}
.custom-file-input {
height: 25px;
cursor: pointer;
}

PHP Code

Simple PHP class contains three functions called userDetails, userBackgroundUpdate and userBackgourndPositionUpdate.

userUpdates.php

db = $db;
}
public function userDetails($user_id)
{
$query=mysqli_query($this->db,"SELECT username,email,name,profile_background,profile_background_position  FROM users WHERE user_id='$user_id' ") or die(mysqli_error($this->db));
$data=mysqli_fetch_array($query,MYSQLI_ASSOC);
return $data;
}
public function userBackgroundUpdate($user_id,$actual_image_name)
{
$query=mysqli_query($this->db,"UPDATE users SET profile_background='$actual_image_name' WHERE user_id='$user_id'") or die(mysqli_error($this->db));
return $query;
}
public function userBackgroundPositionUpdate($user_id,$position)
{ 
$position=mysqli_real_escape_string($this->db,$position);
$query=mysqli_query($this->db,"UPDATE users SET profile_background_position='$position' WHERE user_id='$user_id'")or die(mysqli_error($this->db));
return $query;
}
}
?>

image_upload_ajax.php

Save Cover

userBackgroundPositionUpdate($session_uid,$position);
if($data)
echo $position;
}
?>

userDetails($session_uid);
$username=$userData['username'];
$name=$userData['name'];
$profile_background=$userData['profile_background'];
$profile_background_position=$userData['profile_background_position'];
?>













Pritty Times