Facebook Style Background Image Upload and Position Adjustment.

{ 56 comments }

I received many tutorial requests from my readers that asked to me how to design Facebook style ajax background image upload and position adjustment using Jquery. I have been published many tutorials about ajax image upload, this one is very interesting and it is a combination of many features. I has implemented this in Wall Script, this post will explain you how to design timeline HTML frame, CSS techniques and database design for background image system.

Facebook Style Background Image Upload and Position Adjustment.

Download Script

Live Demo

Note: Try this demo with mobile device.

Users Table
User table 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','profile_background','profile_background_position')
VALUES
('srinivas','[email protected]','Srinivas Tamada','142384801.jpg','-18px');

Timeline profile background wire-frame.

HTML Code
Take a look at the live demo for more understanding.

<div id="container">

<div id="timelineContainer">

<div id="timelineBackground">
<img src="uploads/backgroundimage.jpg" class="bgImage" style="margin-top: -10px;">
</div>


<div id="timelineShade">
<form id="bgimageform" method="post" enctype="multipart/form-data" action="image_upload_ajax_bg.php">
<div class="uploadFile timelineUploadBG">
<input type="file" name="photoimg" id="bgphotoimg" class="custom-file-input">
</div>
</form>
</div>


<div id="timelineProfilePic"></div>


<div id="timelineTitle">Srinivas Tamada</div>


<div id="timelineNav"></div>

</div>
</div>

CSS code
Just focus on highlighted CSS properties.

*{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;
}

JavaScript
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.

$('body').on('click','.bgSave', function()- bgSave is the class name of save button, using $("#timelinBGload").attr("style") calling the style value and split with top: string.

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

<?php
class userUpdates
{
private $db;
public function __construct($db)
{
$this->db = $db;
}
/* Users Details */
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;
}
/* Background Image Update */
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;
}
/* Background Image Position Update */
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
Uploading image file into uploads folder and inserting background image name into users table. Here upload image size restricted for 1 MB, if you want you can modify image size by changing 1024 value.

<?php
include 'db.php';
session_start();
$session_uid='1'; // $_SESSION['user_id'];
include 'userUpdates.php';
$userUpdates = new userUpdates($db);

include_once 'getExtension.php';
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
if(isset($_POST) && $_SERVER['REQUEST_METHOD'] == "POST" && isset($session_uid))
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];

if(strlen($name))
{
$ext = getExtension($name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024))
{
$actual_image_name = time().$session_uid.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
$bgSave='<div id="uX'.$session_uid.'" class="bgSave wallbutton blackButton">Save Cover</div>';
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
$data=$userUpdates->userBackgroundUpdate($session_uid,$actual_image_name);
if($data)
echo $bgSave.'<img src="'.$path.$actual_image_name.'" id="timelineBGload" class="headerimage ui-corner-all" style="top:0px"/>';
}
else
echo "Fail upload folder with read access.";

}
else
echo "Image file size max 1 MB";

}
else
echo "Invalid file format.";

}
else
echo "Please select image..!";

exit;
}
?>

image_saveBG_ajax.php
Inserting background position value into users table based on user session id.

<?php
include 'db.php';
session_start();
$session_uid='1'; // $_SESSION['user_id'];
include 'userUpdates.php';
$userUpdates = new userUpdates($db);

if(isset($_POST['position']) && isset($session_uid))
{
$position=$_POST['position'];
$data=$userUpdates->userBackgroundPositionUpdate($session_uid,$position);
if($data)
echo $position;
}
?>

index.php
Displaying background image based login user session id, more help PHP Login Page Example.

<?php
include 'db.php';
session_start();
$session_uid='1'; // $_SESSION['user_id'];
include 'userUpdates.php';
$userUpdates = new userUpdates($db);

$userData=$userUpdates->userDetails($session_uid);
$username=$userData['username'];
$name=$userData['name'];
$profile_background=$userData['profile_background'];
$profile_background_position=$userData['profile_background_position'];
?>
//HTML Code
<div id="container">

<div id="timelineBackground">
<img src="<?php echo $path.$profile_background; ?>" class="bgImage" style="margin-top: <?php echo $profile_background_position; ?>;">
</div>

<div id="timelineShade">
<form id="bgimageform" method="post" enctype="multipart/form-data" action="image_upload_ajax_bg.php">
<div class="uploadFile timelineUploadBG">
<input type="file" name="photoimg" id="bgphotoimg" class="custom-file-input">
</div>
</form>
</div>

<div id="timelineProfilePic"></div>


<div id="timelineTitle">Srinivas Tamada</div>

<div id="timelineNav"></div>

</div>

</div>

db.php
Database connection you have to modify username, password and database values.

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD,DB_DATABASE) or die(mysqli_connect_error());
$path = "uploads/"; //Images upload folder
?>