Profile picture png format
This commit is contained in:
dignajar
parent
82008f93e7
commit
631cbcb718
|
|
@ -274,6 +274,17 @@ button.delete-button:hover {
|
|||
|
||||
/* ----------- 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 ----------- */
|
||||
|
||||
div.login-box > h1 {
|
||||
|
|
|
|||
|
|
@ -102,9 +102,9 @@ $(document).ready(function() {
|
|||
<ul class="uk-navbar-nav">
|
||||
<li class="uk-parent" data-uk-dropdown>
|
||||
<?php
|
||||
$profilePictureSrc = HTML_PATH_ADMIN_THEME_IMG.'default.jpg';
|
||||
if(file_exists(PATH_UPLOADS_PROFILES.$Login->username().'.jpg')) {
|
||||
$profilePictureSrc = HTML_PATH_UPLOADS_PROFILES.$Login->username().'.jpg';
|
||||
$profilePictureSrc = HTML_PATH_ADMIN_THEME_IMG.'default.png';
|
||||
if(file_exists(PATH_UPLOADS_PROFILES.$Login->username().'.png')) {
|
||||
$profilePictureSrc = HTML_PATH_UPLOADS_PROFILES.$Login->username().'.png';
|
||||
}
|
||||
?>
|
||||
<a href="<?php echo HTML_PATH_ADMIN_ROOT.'edit-user/'.$Login->username() ?>">
|
||||
|
|
|
|||
|
|
@ -354,130 +354,65 @@ $(document).ready(function() {
|
|||
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)
|
||||
{
|
||||
global $L;
|
||||
|
||||
$html = '
|
||||
<div id="jsprogressBar" class="uk-progress uk-hidden">
|
||||
$html = '<!-- BLUDIT PROFILE UPLOADER -->';
|
||||
|
||||
$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>
|
||||
|
||||
<div id="upload-drop" class="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 id="bludit-profile-picture-drag-drop" class="uk-form-file uk-placeholder uk-text-center">
|
||||
<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>
|
||||
';
|
||||
|
||||
$html .= '
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
</div>
|
||||
';
|
||||
|
||||
$script = '
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$(function()
|
||||
{
|
||||
var progressbar = $("#jsprogressBar");
|
||||
var bar = progressbar.find(".uk-progress-bar");
|
||||
var settings =
|
||||
{
|
||||
type: "json",
|
||||
action: "'.HTML_PATH_ADMIN_ROOT.'ajax/uploader",
|
||||
action: HTML_PATH_ADMIN_ROOT+"ajax/uploader",
|
||||
allow : "*.(jpg|jpeg|gif|png)",
|
||||
params: {"type":"profilePicture", "username":"'.$username.'"},
|
||||
|
||||
loadstart: function() {
|
||||
bar.css("width", "0%").text("0%");
|
||||
progressbar.removeClass("uk-hidden");
|
||||
$("#bludit-profile-picture-progressbar").find(".uk-progress-bar").css("width", "0%").text("0%");
|
||||
$("#bludit-profile-picture-progressbar").show();
|
||||
},
|
||||
|
||||
progress: function(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) {
|
||||
bar.css("width", "100%").text("100%");
|
||||
progressbar.addClass("uk-hidden");
|
||||
$("#jsprofilePicture").html("<img class=\"uk-border-rounded\" src=\"'.HTML_PATH_UPLOADS_PROFILES.$username.'.jpg\">");
|
||||
$("#bludit-profile-picture-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%");
|
||||
$("#bludit-profile-picture-progressbar").hide();
|
||||
|
||||
$("#bludit-profile-picture-image").html("<img class=\"uk-border-rounded\" src=\"'.HTML_PATH_UPLOADS_PROFILES.$username.'.png?time='.time().'\">");
|
||||
},
|
||||
|
||||
notallowed: function(file, settings) {
|
||||
|
|
@ -485,14 +420,14 @@ $(document).ready(function() {
|
|||
}
|
||||
};
|
||||
|
||||
var select = UIkit.uploadSelect($("#upload-select"), settings);
|
||||
var drop = UIkit.uploadDrop($("#upload-drop"), settings);
|
||||
});
|
||||
UIkit.uploadSelect($("#bludit-profile-picture-file-select"), 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();
|
||||
|
||||
echo '</div>';
|
||||
echo '<div class="uk-width-3-10" style="margin-top: 50px; text-align: center;">';
|
||||
|
||||
echo '<div id="jsprofilePicture">';
|
||||
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>';
|
||||
echo '<div class="uk-width-3-10" style="margin-top: 50px; text-align: center;">';
|
||||
|
||||
HTML::profileUploader($_User->username());
|
||||
|
||||
|
|
|
|||
|
|
@ -38,10 +38,10 @@ if($type=='profilePicture')
|
|||
{
|
||||
// Resize and crop profile image.
|
||||
$username = Sanitize::html($_POST['username']);
|
||||
$tmpName = $username.'.jpg';
|
||||
$tmpName = $username.'.png';
|
||||
$Image = new Image();
|
||||
$Image->setImage(PATH_TMP.'original'.'.'.$fileExtension, '200', '200', 'crop');
|
||||
$Image->saveImage(PATH_UPLOADS_PROFILES.$tmpName, 100, true);
|
||||
$Image->setImage(PATH_TMP.'original'.'.'.$fileExtension, '400', '400', 'crop');
|
||||
$Image->saveImage(PATH_UPLOADS_PROFILES.$tmpName, 100, false, true);
|
||||
}
|
||||
// --- OTHERS ---
|
||||
else {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ class Image {
|
|||
$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));
|
||||
|
||||
|
|
@ -28,21 +28,25 @@ class Image {
|
|||
|
||||
$path_complete = $filename.'.'.$extension;
|
||||
|
||||
if($forceJPG) {
|
||||
imagejpeg($this->imageResized, $filename.'.jpg', $imageQuality);
|
||||
if($forcePNG) {
|
||||
$extension = 'png';
|
||||
}
|
||||
else
|
||||
{
|
||||
elseif($forceJPG) {
|
||||
$extension = 'jpg';
|
||||
}
|
||||
|
||||
switch($extension)
|
||||
{
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
// Checking for JPG support
|
||||
if (imagetypes() & IMG_JPG) {
|
||||
imagejpeg($this->imageResized, $path_complete, $imageQuality);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'gif':
|
||||
// Checking for GIF support
|
||||
if (imagetypes() & IMG_GIF) {
|
||||
imagegif($this->imageResized, $path_complete);
|
||||
}
|
||||
|
|
@ -55,16 +59,16 @@ class Image {
|
|||
// *** Invert quality setting as 0 is best, not 9
|
||||
$invertScaleQuality = 9 - $scaleQuality;
|
||||
|
||||
// Checking for PNG support
|
||||
if (imagetypes() & IMG_PNG) {
|
||||
imagepng($this->imageResized, $path_complete, $invertScaleQuality);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
// *** No extension - No save.
|
||||
// Fail extension detection
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
imagedestroy($this->imageResized);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,4 +81,15 @@ class User
|
|||
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