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