Profile picture png format

This commit is contained in:
dignajar 2016-01-02 19:51:12 -03:00
parent 82008f93e7
commit 631cbcb718
7 changed files with 122 additions and 169 deletions

View File

@ -274,6 +274,17 @@ button.delete-button:hover {
/* ----------- BLUDIT PROFILE PICTURE ----------- */ /* ----------- BLUDIT PROFILE PICTURE ----------- */
#bludit-profile-picture-drag-drop {
width: 100%;
padding: 15px 0;
}
#bludit-profile-picture-progressbar {
display: none;
margin: 15px 0 0;
width: 100%;
}
/* ----------- LOGIN FORM ----------- */ /* ----------- LOGIN FORM ----------- */
div.login-box > h1 { div.login-box > h1 {

View File

@ -102,9 +102,9 @@ $(document).ready(function() {
<ul class="uk-navbar-nav"> <ul class="uk-navbar-nav">
<li class="uk-parent" data-uk-dropdown> <li class="uk-parent" data-uk-dropdown>
<?php <?php
$profilePictureSrc = HTML_PATH_ADMIN_THEME_IMG.'default.jpg'; $profilePictureSrc = HTML_PATH_ADMIN_THEME_IMG.'default.png';
if(file_exists(PATH_UPLOADS_PROFILES.$Login->username().'.jpg')) { if(file_exists(PATH_UPLOADS_PROFILES.$Login->username().'.png')) {
$profilePictureSrc = HTML_PATH_UPLOADS_PROFILES.$Login->username().'.jpg'; $profilePictureSrc = HTML_PATH_UPLOADS_PROFILES.$Login->username().'.png';
} }
?> ?>
<a href="<?php echo HTML_PATH_ADMIN_ROOT.'edit-user/'.$Login->username() ?>"> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'edit-user/'.$Login->username() ?>">

View File

@ -354,130 +354,65 @@ $(document).ready(function() {
echo $html.$script; echo $html.$script;
} }
public static function uploader()
{
global $L;
$html = '
<div id="upload-drop" class="uk-placeholder uk-text-center">
<i class="uk-icon-cloud-upload uk-icon-medium uk-text-muted uk-margin-small-right"></i>'.$L->g('Upload Image').'<br><a class="uk-form-file">'.$L->g('Drag and drop or click here').'<input id="upload-select" type="file"></a>
</div>
<div id="progressbar" class="uk-progress uk-hidden">
<div class="uk-progress-bar" style="width: 0%;">0%</div>
</div>
';
$html .= '<select id="jsimageList" class="uk-width-1-1" size="10">';
$imagesList = Filesystem::listFiles(PATH_UPLOADS,'*','*',true);
foreach($imagesList as $file) {
$html .= '<option value="">'.basename($file).'</option>';
}
$html .= '</select>';
$html .= '
<div class="uk-form-row uk-margin-top">
<button id="jsaddImage" class="uk-button uk-button-primary" type="button"><i class="uk-icon-angle-double-left"></i> '.$L->g('Insert Image').'</button>
</div>
';
$html .= '
<script>
$(document).ready(function() {
$("#jsaddImage").on("click", function() {
var filename = $("#jsimageList option:selected").text();
if(!filename.trim()) {
return false;
}
var textareaValue = $("#jscontent").val();
$("#jscontent").val(textareaValue + "<img src=\""+filename+"\" alt=\"\">" + "\n");
});
$(function()
{
var progressbar = $("#progressbar");
var bar = progressbar.find(".uk-progress-bar");
var settings =
{
type: "json",
action: "'.HTML_PATH_ADMIN_ROOT.'ajax/uploader",
allow : "*.(jpg|jpeg|gif|png)",
loadstart: function() {
bar.css("width", "0%").text("0%");
progressbar.removeClass("uk-hidden");
},
progress: function(percent) {
percent = Math.ceil(percent);
bar.css("width", percent+"%").text(percent+"%");
},
allcomplete: function(response) {
bar.css("width", "100%").text("100%");
setTimeout(function() { progressbar.addClass("uk-hidden"); }, 250);
$("#jsimageList").prepend("<option value=\'"+response.filename+"\' selected=\'selected\'>"+response.filename+"</option>");
},
notallowed: function(file, settings) {
alert("'.$L->g('Supported image file types').' "+settings.allow);
}
};
var select = UIkit.uploadSelect($("#upload-select"), settings);
var drop = UIkit.uploadDrop($("#upload-drop"), settings);
});
});
</script>';
echo $html;
}
public static function profileUploader($username) public static function profileUploader($username)
{ {
global $L; global $L;
$html = ' $html = '<!-- BLUDIT PROFILE UPLOADER -->';
<div id="jsprogressBar" class="uk-progress uk-hidden">
$html .= '
<div id="bludit-profile-picture">
<div id="bludit-profile-picture-image">';
if(file_exists(PATH_UPLOADS_PROFILES.$username.'.png')) {
$html .= '<img class="uk-border-rounded" src="'.HTML_PATH_UPLOADS_PROFILES.$username.'.png" alt="Profile picture">';
}
else {
$html .= '<div class="uk-block uk-border-rounded uk-block-muted uk-block-large">'.$L->g('Profile picture').'</div>';
}
$html .= '
</div>
<div id="bludit-profile-picture-progressbar" class="uk-progress">
<div class="uk-progress-bar" style="width: 0%;">0%</div> <div class="uk-progress-bar" style="width: 0%;">0%</div>
</div> </div>
<div id="upload-drop" class="uk-placeholder uk-text-center"> <div id="bludit-profile-picture-drag-drop" class="uk-form-file uk-placeholder uk-text-center">
<i class="uk-icon-cloud-upload uk-margin-small-right"></i>'.$L->g('Upload Image').'<br><a class="uk-form-file">'.$L->g('Drag and drop or click here').'<input id="upload-select" type="file"></a> <div>'.$L->g('Upload image').'</div>
<div style="font-size:0.8em;">'.$L->g('Drag and drop or click here').'<input id="bludit-profile-picture-file-select" type="file"></div>
</div>
</div> </div>
'; ';
$html .= ' $script = '
<script> <script>
$(document).ready(function() { $(document).ready(function() {
$(function()
{
var progressbar = $("#jsprogressBar");
var bar = progressbar.find(".uk-progress-bar");
var settings = var settings =
{ {
type: "json", type: "json",
action: "'.HTML_PATH_ADMIN_ROOT.'ajax/uploader", action: HTML_PATH_ADMIN_ROOT+"ajax/uploader",
allow : "*.(jpg|jpeg|gif|png)", allow : "*.(jpg|jpeg|gif|png)",
params: {"type":"profilePicture", "username":"'.$username.'"}, params: {"type":"profilePicture", "username":"'.$username.'"},
loadstart: function() { loadstart: function() {
bar.css("width", "0%").text("0%"); $("#bludit-profile-picture-progressbar").find(".uk-progress-bar").css("width", "0%").text("0%");
progressbar.removeClass("uk-hidden"); $("#bludit-profile-picture-progressbar").show();
}, },
progress: function(percent) { progress: function(percent) {
percent = Math.ceil(percent); percent = Math.ceil(percent);
bar.css("width", percent+"%").text(percent+"%"); $("#bludit-profile-picture-progressbar").find(".uk-progress-bar").css("width", percent+"%").text(percent+"%");
}, },
allcomplete: function(response) { allcomplete: function(response) {
bar.css("width", "100%").text("100%"); $("#bludit-profile-picture-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%");
progressbar.addClass("uk-hidden"); $("#bludit-profile-picture-progressbar").hide();
$("#jsprofilePicture").html("<img class=\"uk-border-rounded\" src=\"'.HTML_PATH_UPLOADS_PROFILES.$username.'.jpg\">");
$("#bludit-profile-picture-image").html("<img class=\"uk-border-rounded\" src=\"'.HTML_PATH_UPLOADS_PROFILES.$username.'.png?time='.time().'\">");
}, },
notallowed: function(file, settings) { notallowed: function(file, settings) {
@ -485,14 +420,14 @@ $(document).ready(function() {
} }
}; };
var select = UIkit.uploadSelect($("#upload-select"), settings); UIkit.uploadSelect($("#bludit-profile-picture-file-select"), settings);
var drop = UIkit.uploadDrop($("#upload-drop"), settings); UIkit.uploadDrop($("#bludit-profile-picture-drag-drop"), settings);
});
}); });
</script>'; </script>
';
echo $html; echo $html.$script;
} }
} }

View File

@ -129,16 +129,8 @@ if( ($Login->role()==='admin') && ($_User->username()!='admin') ) {
HTML::formClose(); HTML::formClose();
echo '</div>'; echo '</div>';
echo '<div class="uk-width-3-10" style="margin-top: 50px; text-align: center;">';
echo '<div id="jsprofilePicture">'; echo '<div class="uk-width-3-10" style="margin-top: 50px; text-align: center;">';
if(file_exists(PATH_UPLOADS_PROFILES.$_User->username().'.jpg')) {
echo '<img class="uk-border-rounded" src="'.HTML_PATH_UPLOADS_PROFILES.$_User->username().'.jpg" alt="">';
}
else {
echo '<div class="uk-block uk-border-rounded uk-block-muted uk-block-large">'.$L->g('Profile picture').'</div>';
}
echo '</div>';
HTML::profileUploader($_User->username()); HTML::profileUploader($_User->username());

View File

@ -38,10 +38,10 @@ if($type=='profilePicture')
{ {
// Resize and crop profile image. // Resize and crop profile image.
$username = Sanitize::html($_POST['username']); $username = Sanitize::html($_POST['username']);
$tmpName = $username.'.jpg'; $tmpName = $username.'.png';
$Image = new Image(); $Image = new Image();
$Image->setImage(PATH_TMP.'original'.'.'.$fileExtension, '200', '200', 'crop'); $Image->setImage(PATH_TMP.'original'.'.'.$fileExtension, '400', '400', 'crop');
$Image->saveImage(PATH_UPLOADS_PROFILES.$tmpName, 100, true); $Image->saveImage(PATH_UPLOADS_PROFILES.$tmpName, 100, false, true);
} }
// --- OTHERS --- // --- OTHERS ---
else { else {

View File

@ -19,7 +19,7 @@ class Image {
$this->resizeImage($newWidth, $newHeight, $option); $this->resizeImage($newWidth, $newHeight, $option);
} }
public function saveImage($savePath, $imageQuality="100", $forceJPG=false) public function saveImage($savePath, $imageQuality="100", $forceJPG=false, $forcePNG=false)
{ {
$extension = strtolower(pathinfo($savePath, PATHINFO_EXTENSION)); $extension = strtolower(pathinfo($savePath, PATHINFO_EXTENSION));
@ -28,21 +28,25 @@ class Image {
$path_complete = $filename.'.'.$extension; $path_complete = $filename.'.'.$extension;
if($forceJPG) { if($forcePNG) {
imagejpeg($this->imageResized, $filename.'.jpg', $imageQuality); $extension = 'png';
} }
else elseif($forceJPG) {
{ $extension = 'jpg';
}
switch($extension) switch($extension)
{ {
case 'jpg': case 'jpg':
case 'jpeg': case 'jpeg':
// Checking for JPG support
if (imagetypes() & IMG_JPG) { if (imagetypes() & IMG_JPG) {
imagejpeg($this->imageResized, $path_complete, $imageQuality); imagejpeg($this->imageResized, $path_complete, $imageQuality);
} }
break; break;
case 'gif': case 'gif':
// Checking for GIF support
if (imagetypes() & IMG_GIF) { if (imagetypes() & IMG_GIF) {
imagegif($this->imageResized, $path_complete); imagegif($this->imageResized, $path_complete);
} }
@ -55,16 +59,16 @@ class Image {
// *** Invert quality setting as 0 is best, not 9 // *** Invert quality setting as 0 is best, not 9
$invertScaleQuality = 9 - $scaleQuality; $invertScaleQuality = 9 - $scaleQuality;
// Checking for PNG support
if (imagetypes() & IMG_PNG) { if (imagetypes() & IMG_PNG) {
imagepng($this->imageResized, $path_complete, $invertScaleQuality); imagepng($this->imageResized, $path_complete, $invertScaleQuality);
} }
break; break;
default: default:
// *** No extension - No save. // Fail extension detection
break; break;
} }
}
imagedestroy($this->imageResized); imagedestroy($this->imageResized);
} }

View File

@ -81,4 +81,15 @@ class User
return $this->getField('instagramUsername'); return $this->getField('instagramUsername');
} }
public function profilePicture($absolute=true)
{
$filename = $this->getField('username').'.png';
if($absolute) {
return HTML_PATH_UPLOADS_PROFILES.$filename;
}
return $filename;
}
} }