Profile picture png format
This commit is contained in:
parent
82008f93e7
commit
631cbcb718
|
@ -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 {
|
||||||
|
|
|
@ -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() ?>">
|
||||||
|
|
|
@ -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>
|
||||||
';
|
|
||||||
|
|
||||||
$html .= '
|
</div>
|
||||||
<script>
|
';
|
||||||
$(document).ready(function() {
|
|
||||||
|
$script = '
|
||||||
|
<script>
|
||||||
|
$(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;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -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());
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue