New Bludit Images system v8 and Cover image

kernel/admin/themes/default/css/default.css

@@ -102,11 +102,15 @@ li.bludit-logo {
 }
 
 .uk-thumbnail {
-	margin: 2px 4px !important;
+	margin: 2px 3px !important;
 	max-width: 30% !important;
 	padding: 0 !important;
 }
 
+.uk-progress-bar {
+	background: #2672ec !important;
+}
+
 /* ----------- BLUDIT ----------- */
 
 #logo {
@@ -185,6 +189,7 @@ button.delete-button:hover {
 
 #bludit-images-v8-progressbar {
 	display: none;
+	margin: 20px;
 }
 
 #bludit-images-v8-thumbnails {
@@ -211,6 +216,10 @@ button.delete-button:hover {
 	font-size: 0.9em;
 }
 
+#bludit-quick-images-thumbnails {
+	text-align: center;
+}
+
 /* ----------- BLUDIT COVER IMAGE ----------- */
 #bludit-cover-image {
 
@@ -246,6 +255,11 @@ button.delete-button:hover {
 
 #cover-image-progressbar {
 	display: none;
+	left: 5%;
+	position: relative;
+	top: 33%;
+	width: 90%;
+
 }
 
 /* ----------- LOGIN FORM ----------- */

kernel/admin/themes/default/init.php

@@ -157,21 +157,28 @@ $html .= '
 		echo $html;
 	}
 
-	public static function bluditCoverImage()
+	public static function bluditCoverImage($coverImage="")
 	{
 		global $L;
 
+		$style = '';
+		if(!empty($coverImage)) {
+			$style = 'background-image: url('.HTML_PATH_UPLOADS_THUMBNAILS.$coverImage.')';
+		}
+
 $html = '<!-- BLUDIT COVER IMAGE -->';
 $html .= '
 <div id="bludit-cover-image">
-<div id="cover-image-thumbnail" class="uk-form-file uk-placeholder uk-text-center">
+<div id="cover-image-thumbnail" class="uk-form-file uk-placeholder uk-text-center" style="'.$style.'">
 
-	<div id="cover-image-upload">
+	<input type="hidden" name="coverImage" id="cover-image-upload-filename" value="'.$coverImage.'">
+
+	<div id="cover-image-upload" '.( empty($coverImage)?'':'style="display: none;"' ).'>
 		<div><i class="uk-icon-picture-o"></i> '.$L->g('Cover image').'</div>
-		<div>'.$L->g('Drag and drop or click here').'<input id="cover-image-file-select" type="file"></div>
+		<div style="font-size:0.8em;">'.$L->g('Drag and drop or click here').'<input id="cover-image-file-select" type="file"></div>
 	</div>
 
-	<div id="cover-image-delete">
+	<div id="cover-image-delete" '.( empty($coverImage)?'':'style="display: block;"' ).'>
 		<div><i class="uk-icon-trash-o"></i></div>
 	</div>
 
@@ -189,6 +196,7 @@ $(document).ready(function() {
 
 	$("#cover-image-delete").on("click", function() {
 		$("#cover-image-thumbnail").attr("style","");
+		$("#cover-image-upload-filename").attr("value","");
 		$("#cover-image-delete").hide();
 		$("#cover-image-upload").show();
 	});
@@ -202,7 +210,7 @@ $(document).ready(function() {
 
 		loadstart: function() {
 			$("#cover-image-progressbar").find(".uk-progress-bar").css("width", "0%").text("0%");
-			$("#cover-image-progressbar").hide();
+			$("#cover-image-progressbar").show();
 			$("#cover-image-delete").hide();
 			$("#cover-image-upload").hide();
 		},
@@ -222,6 +230,8 @@ $(document).ready(function() {
 
 			$("img:last-child", "#bludit-quick-images-thumbnails").remove();
 			$("#bludit-quick-images-thumbnails").prepend("<img class=\"bludit-thumbnail uk-thumbnail\" data-filename=\""+response.filename+"\" src=\""+imageSrc+"\" alt=\"Thumbnail\">");
+
+			$("#cover-image-upload-filename").attr("value",response.filename);
 		},
 
 		notallowed: function(file, settings) {
@@ -251,7 +261,7 @@ $html .= '
 
 		<div id="bludit-images-v8-drag-drop">
 			<div><i class="uk-icon-picture-o"></i> '.$L->g('Upload image').'</div>
-			<div>'.$L->g('Drag and drop or click here').'<input id="bludit-images-v8-file-select" type="file"></div>
+			<div style="font-size:0.8em;">'.$L->g('Drag and drop or click here').'<input id="bludit-images-v8-file-select" type="file"></div>
 		</div>
 
 		<div id="bludit-images-v8-progressbar" class="uk-progress">
@@ -310,6 +320,8 @@ $(document).ready(function() {
 
 		loadstart: function() {
 			$("#bludit-images-v8-progressbar").find(".uk-progress-bar").css("width", "0%").text("0%");
+			$("#bludit-images-v8-drag-drop").hide();
+			$("#bludit-images-v8-progressbar").show();
 		},
 
 		progress: function(percent) {
@@ -320,6 +332,7 @@ $(document).ready(function() {
 		allcomplete: function(response) {
 			$("#bludit-images-v8-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%");
 			$("#bludit-images-v8-progressbar").hide();
+			$("#bludit-images-v8-drag-drop").show();
 
 			// Images V8 Thumbnails
 			var imageSrc = HTML_PATH_UPLOADS_THUMBNAILS+response.filename;

kernel/admin/views/edit-page.php

@@ -91,7 +91,7 @@ echo '<div class="sidebar uk-width-large-2-10">';
 	echo '<li>';
 
 	// --- BLUDIT COVER IMAGE ---
-	HTML::bluditCoverImage();
+	HTML::bluditCoverImage($_Page->coverImage());
 
 	// --- BLUDIT QUICK IMAGES ---
 	HTML::bluditQuickImages();

kernel/admin/views/edit-post.php

@@ -85,7 +85,7 @@ echo '<div class="sidebar uk-width-large-2-10">';
 	echo '<li>';
 
 	// --- BLUDIT COVER IMAGE ---
-	HTML::bluditCoverImage();
+	HTML::bluditCoverImage($_Post->coverImage());
 
 	// --- BLUDIT QUICK IMAGES ---
 	HTML::bluditQuickImages();

kernel/dbpages.class.php

@@ -12,7 +12,8 @@ class dbPages extends dbJSON
 		'tags'=>		array('inFile'=>false,	'value'=>array()),
 		'status'=>		array('inFile'=>false,	'value'=>'draft'),
 		'date'=>		array('inFile'=>false,	'value'=>''),
-		'position'=>		array('inFile'=>false,	'value'=>0)
+		'position'=>		array('inFile'=>false,	'value'=>0),
+		'coverImage'=>		array('inFile'=>false,	'value'=>''),
 	);
 
 	function __construct()

kernel/dbposts.class.php

@@ -10,7 +10,8 @@ class dbPosts extends dbJSON
 		'status'=>		array('inFile'=>false,	'value'=>'draft'), // published, draft, scheduled
 		'tags'=>		array('inFile'=>false,	'value'=>array()),
 		'allowComments'=>	array('inFile'=>false,	'value'=>false),
-		'date'=>		array('inFile'=>false,	'value'=>'')
+		'date'=>		array('inFile'=>false,	'value'=>''),
+		'coverImage'=>		array('inFile'=>false,	'value'=>''),
 	);
 
 	private $numberPosts = array(

kernel/page.class.php

@@ -111,6 +111,11 @@ class Page extends fileContent
 		return $this->getField('key');
 	}
 
+	public function coverImage()
+	{
+		return $this->getField('coverImage');
+	}
+
 	// Returns TRUE if the page is published, FALSE otherwise.
 	public function published()
 	{

kernel/post.class.php

@@ -83,6 +83,11 @@ class Post extends fileContent
 		return $this->getField('username');
 	}
 
+	public function coverImage()
+	{
+		return $this->getField('coverImage');
+	}
+
 	public function profilePicture()
 	{
 		return HTML_PATH_UPLOADS_PROFILES.$this->username().'.jpg';