Blog 2.0 personnalisation image de couverture EN COURS

core/module/install/ressource/defaultdata.php

@@ -504,7 +504,8 @@ class init extends common {
 					],
 					'content' => '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a placerat metus. Morbi luctus laoreet dolor et euismod. Phasellus eget eros ac eros pretium tincidunt. Sed maximus magna lectus, non vestibulum sapien pretium maximus. Donec convallis leo tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras convallis lacus eu risus gravida varius. Etiam mattis massa vitae eros placerat bibendum.</p><p>Vivamus tempus magna augue, in bibendum quam blandit at. Morbi felis tortor, suscipit ut ipsum ut, volutpat consectetur orci. Nulla tincidunt quis ligula non viverra. Sed pretium dictum blandit. Donec fringilla, nunc at dictum pretium, arcu massa viverra leo, et porta turpis ipsum eget risus. Quisque quis maximus purus, in elementum arcu. Donec nisi orci, aliquam non luctus non, congue volutpat massa. Curabitur sed risus congue, porta arcu vel, tincidunt nisi. Duis tincidunt quam ut velit maximus ornare. Nullam sagittis, ante quis pharetra hendrerit, lorem massa dapibus mi, a hendrerit dolor odio nec augue. Nunc sem nisl, tincidunt vitae nunc et, viverra tristique diam. In eget dignissim lectus. Nullam volutpat lacus id ex dapibus viverra. Pellentesque ultricies lorem ut nunc elementum volutpat. Cras id ultrices justo.</p><p>Phasellus nec erat leo. Praesent at sem nunc. Vestibulum quis condimentum turpis. Cras semper diam vitae enim fringilla, ut fringilla mauris efficitur. In nec porttitor urna. Nam eros leo, vehicula eget lobortis sed, gravida id mauris. Nulla bibendum nunc tortor, non bibendum justo consectetur vel. Phasellus nec risus diam. In commodo tellus nec nulla fringilla, nec feugiat nunc consectetur. Etiam non eros sodales, sodales lacus vel, finibus leo. Quisque hendrerit tristique congue. Phasellus nec augue vitae libero elementum facilisis. Mauris pretium ornare nisi, non scelerisque velit consectetur sit amet.</p>',
 					'picture' => 'galerie/landscape/meadow.jpg',
-					'hidePicture' => false,					
+					'hidePicture' => false,
+					'pictureSize' => 20,
 					'publishedOn' => 1548790902,
 					'state' => true,
 					'title' => 'Mon premier article',
@@ -515,7 +516,8 @@ class init extends common {
 					'comment' => [],
 					'content' => '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis eros pharetra metus rutrum pretium et sagittis mauris. Donec commodo venenatis sem nec suscipit. In tempor sollicitudin scelerisque. Etiam quis nibh eleifend, congue nisl quis, ultricies ipsum. Integer at est a eros vulputate pellentesque eu vitae tellus. Nullam suscipit quam nisl. Vivamus dui odio, luctus ac fringilla ultrices, eleifend vel sapien. Integer sem ex, lobortis eu mattis eu, condimentum non libero. Aliquam non porttitor elit, eu hendrerit neque. Praesent tortor urna, tincidunt sed dictum id, rutrum tempus sapien.</p><p>Donec accumsan ante ac odio laoreet porttitor. Pellentesque et leo a leo scelerisque mattis id vel elit. Quisque egestas congue enim nec semper. Morbi mollis nibh sapien. Nunc quis fringilla lorem. Donec vel venenatis nunc. Donec lectus velit, tempor sit amet dui sed, consequat commodo enim. Nam porttitor neque semper, dapibus nunc bibendum, lobortis urna. Morbi ullamcorper molestie lectus a elementum. Curabitur eu cursus orci, sed tristique justo. In massa lacus, imperdiet eu elit quis, consectetur maximus magna. Integer suscipit varius ante vitae egestas. Morbi scelerisque fermentum ipsum, euismod faucibus mi tincidunt id. Sed at consectetur velit. Ut fermentum nunc nibh, at commodo felis lacinia nec.</p><p>Nullam a justo quis lectus facilisis semper eget quis sem. Morbi suscipit erat sem, non fermentum nunc luctus vel. Proin venenatis quam ut arcu luctus efficitur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sollicitudin tristique nunc nec convallis. Maecenas id tortor semper, tempus nisl laoreet, cursus lacus. Aliquam sagittis est in leo congue, a pharetra felis aliquet. Nulla gravida lobortis sapien, quis viverra enim ullamcorper sed. Donec ultrices sem eu volutpat dapibus. Nam euismod, tellus eu congue mollis, massa nisi finibus odio, vitae porta arcu urna ac lorem. Sed faucibus dignissim pretium. Pellentesque eget ante tellus. Pellentesque a elementum odio, sit amet vulputate diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit consequat dolor, malesuada pellentesque tellus molestie non. Aenean quis purus a lectus pellentesque laoreet.</p>',
 					'picture' => 'galerie/landscape/desert.jpg',
-					'hidePicture' => false,					
+					'hidePicture' => false,
+					'pictureSize' => 40,
 					'publishedOn' => 1550432502,
 					'state' => true,
 					'title' => 'Mon deuxième article',
@@ -526,7 +528,8 @@ class init extends common {
 					'comment' => [],
 					'content' => '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut tempus nibh. Cras eget iaculis justo, ac laoreet lacus. Nunc tellus nulla, auctor id hendrerit eu, pellentesque in sapien. In hac habitasse platea dictumst. Aliquam leo urna, hendrerit id nunc eget, finibus maximus dolor. Sed rutrum sapien consectetur, tincidunt nulla at, blandit quam. Duis ex enim, vehicula vel nisi vitae, lobortis volutpat nisl. Vivamus enim libero, euismod nec risus vel, interdum placerat elit. In cursus sapien condimentum dui imperdiet, sed lobortis ante consectetur. Maecenas hendrerit eget felis non consequat.</p><p>Nullam nec risus non velit efficitur tempus eget tincidunt mauris. Etiam venenatis leo id justo sagittis, commodo dignissim sapien tristique. Vivamus finibus augue malesuada sapien gravida rutrum. Integer mattis lectus ac pulvinar scelerisque. Integer suscipit feugiat metus, ac molestie odio suscipit eget. Fusce at elit in tellus venenatis finibus id sit amet magna. Integer sodales luctus neque blandit posuere. Cras pellentesque dictum lorem eget vestibulum. Quisque vitae metus non nisi efficitur rhoncus ut vitae ipsum. Donec accumsan massa at est faucibus lacinia. Quisque imperdiet luctus neque eu vestibulum. Phasellus pellentesque felis ligula, id imperdiet elit ultrices eu.</p>',
 					'picture' => 'galerie/landscape/iceberg.jpg',
-					'hidePicture' => false,					
+					'hidePicture' => false,
+					'pictureSize' => 100,			
 					'publishedOn' => 1550864502,
 					'state' => true,
 					'title' => 'Mon troisième article',

module/blog/blog.php

@@ -35,9 +35,23 @@ class blog extends common {
 		true => 'Publié'
 	];
 
+	public static $pictureSizes = [
+		'20' => 'Très petite',
+		'30' => 'Petite',
+		'40' => 'Grande',
+		'50' => 'Très Grande',
+		'100' => 'Pleine largeur',
+	];
+
+	public static $picturePositions = [
+		'left' => 'À gauche',		
+		'right' => 'À droite ',
+	];
+
+
 	public static $users = [];
 
-	const BLOG_VERSION = '1.9';
+	const BLOG_VERSION = '2.0';
 
 	/**
 	 * Édition
@@ -264,7 +278,9 @@ class blog extends common {
 					'comment' => $this->getData(['module', $this->getUrl(0), $this->getUrl(2), 'comment']),
 					'content' => $this->getInput('blogEditContent', null),
 					'picture' => $this->getInput('blogEditPicture', helper::FILTER_STRING_SHORT, true),
-					'hidePicture' => $this->getInput('blogEditHidePicture', helper::FILTER_BOOLEAN),					
+					'hidePicture' => $this->getInput('blogEditHidePicture', helper::FILTER_BOOLEAN),
+					'pictureSize' => $this->getInput('blogEditPictureSize', helper::FILTER_STRING_SHORT),
+					'picturePosition' => $this->getInput('blogEditPicturePosition', helper::FILTER_STRING_SHORT),
 					'publishedOn' => $this->getInput('blogEditPublishedOn', helper::FILTER_DATETIME, true),
 					'state' => $this->getInput('blogEditState', helper::FILTER_BOOLEAN),
 					'title' => $this->getInput('blogEditTitle', helper::FILTER_STRING_SHORT, true),

module/blog/view/article/article.css

@@ -1,11 +1,40 @@
+
+#sectionTitle {
+	margin-top: 0;
+	margin-bottom: 5px;
+}
 .blogArticlePicture {
 	height: auto;
-	width: 100%;
+	border:1px solid lightgray;
-	background-size: cover;
+	box-shadow: 1px 1px 5px;
-	background-repeat: no-repeat;
-	background-position: center center;
-	margin-top: 15px;
 }
+.blogArticlePictureleft {
+	float: left;
+	margin: 15px 10px 5px 0 ;
+}
+.blogArticlePictureright {
+	float: right;
+	margin: 15px 0 5px 10px ;
+}
+
+
+.pict20{
+	width: 20%;
+}
+.pict30{
+	width: 30%;
+}
+.pict40{
+	width: 40%;
+}
+.pict50{
+	width: 50%;
+}
+.pict100{
+	width: 100%;
+	margin: 15px 0 20px 0 ;
+}
+
 #blogArticleCommentShow {
 	cursor: text;
 }
@@ -16,7 +45,6 @@
 	font-size:0.8em;
 	font-style: italic;
 	color: grey;
-	margin-left: 10px;
 }
 @media (max-width: 767px) {
 	.blogArticlePicture {

module/blog/view/article/article.php

@@ -5,7 +5,9 @@
 </div>
 
 	<?php if ($this->getData(['module', $this->getUrl(0), $this->getUrl(1), 'hidePicture']) == false) {
-		echo '<div class="blogArticlePicture"><img class="blogArticlePicture" src="' . helper::baseUrl(false) . self::FILE_DIR.'source/' . $this->getData(['module', $this->getUrl(0), $this->getUrl(1), 'picture']) . '" alt="' . $this->getData(['module', $this->getUrl(0), $this->getUrl(1), 'picture']) . '"></div>';
+		echo '<img class="blogArticlePicture blogArticlePicture' . $this->getData(['module', $this->getUrl(0), $this->getUrl(1), 'picturePosition']) .
+		' pict' . $this->getData(['module', $this->getUrl(0), $this->getUrl(1), 'pictureSize']) . '" src="' . helper::baseUrl(false) . self::FILE_DIR.'source/' . $this->getData(['module', $this->getUrl(0), $this->getUrl(1), 'picture']) . 		
+		'" alt="' . $this->getData(['module', $this->getUrl(0), $this->getUrl(1), 'picture']) . '">';
 	} ?>
 
 <?php echo $this->getData(['module', $this->getUrl(0), $this->getUrl(1), 'content']); ?>
@@ -17,14 +19,14 @@
 </p>
 <?php  if($this->getUser('group') >= self::GROUP_ADMIN): ?>
 <div class="row">
-    <div class="col3">
+    <div class="col2">
 		<?php echo template::button('blogBack', [
 					'href' => helper::baseUrl() . $this->getUrl(0),
 					'ico' => 'left',
 					'value' => 'Retour'
 		]); ?>
     </div>
-    <div class="col3 offset6">
+    <div class="col2 offset8">
  		<?php echo template::button('blogEdit', [
 					'href' => helper::baseUrl() . $this->getUrl(0) . '/edit/' . $this->getUrl(1) . '/' . $_SESSION['csrf'],
 					'value' => 'Editer'

module/blog/view/edit/edit.php

@@ -28,13 +28,15 @@
 			<div class="block">
 				<h4>Informations générales</h4>
 				<div class="row">
-					<div class="col6">
+					<div class="col12">
 						<?php echo template::text('blogEditTitle', [
 							'label' => 'Titre',
 							'value' => $this->getData(['module', $this->getUrl(0), $this->getUrl(2), 'title'])
 						]); ?>
 					</div>
-					<div class="col6">
+				</div>
+				<div class="row">
+					<div class="col4">
 						<?php echo template::file('blogEditPicture', [
 							'help' => 'Taille optimale de l\'image de couverture : ' . ((int) substr($this->getData(['theme', 'site', 'width']), 0, -2) - (20 * 2)) . ' x 350 pixels.',
 							'label' => 'Image de couverture',
@@ -42,8 +44,21 @@
 							'value' => $this->getData(['module', $this->getUrl(0), $this->getUrl(2), 'picture'])
 						]); ?>
 					</div>
-					<div class="col6">
+					<div class="col4">
+						<?php echo template::select('blogEditPictureSize', $module::$pictureSizes, [
+							'label' => 'Largeur de l\'image',
+							'selected' => $this->getData(['module', $this->getUrl(0), $this->getUrl(2), 'pictureSize'])
+						]); ?>
 					</div>
+					<div class="col4">
+						<?php echo template::select('blogEditPicturePosition', $module::$picturePositions, [
+							'label' => 'Position',
+							'selected' => $this->getData(['module', $this->getUrl(0), $this->getUrl(2), 'picturePosition']),
+							'help' => 'Le texte de l\'article est adapté autour de l\'image'
+						]); ?>
+					</div>					
+				</div>
+				<div class="row">
 					<div class="col6">							
 						<?php echo template::checkbox('blogEditHidePicture', true, 'Masquer l\'image dans l\'article', [
 							'checked' => $this->getData(['module', $this->getUrl(0), $this->getUrl(2), 'hidePicture'])

module/blog/view/index/index.css

@@ -1,10 +1,21 @@
+.rowArticle {
+	margin-bottom: 10px !important;
+}
+.blogArticle {
+	margin: 15px !important;
+	background-color: lightgrey;
+}
 .blogPicture {
 	float: none;
+	border: 1px;
 }
 .blogPicture img {
 	width: 100%;
 	height: auto;
-	}
+	border:1px solid lightgray;
+	box-shadow: 1px 1px 5px;
+}
+
 .blogPicture:hover {
 	opacity: .7;
 }
@@ -19,16 +30,18 @@
 }
 .blogTitle {
 	/*background-color: #ECEFF1;*/
-	padding: 5px;
+	padding: 0px;
+	margin-bottom: 5px;
 }
 .blogContent {
 	float: left;
+	margin-top: 5px;
 }
 .blogDate {
 	font-size:0.8em;
 	font-style: italic;
 	color: grey;
-	margin-left: 10px;
+	
 }
 @media (max-width: 768px) {
 	.blogContent {

module/blog/view/index/index.php

@@ -2,7 +2,7 @@
 	<div class="row">
 		<div class="col12">
 			<?php foreach($module::$articles as $articleId => $article): ?>					
-				<div class="row">
+				<div class="row rowArticle">
 					<div class="col3">
 					<?php 
 						// Déterminer le nom de la miniature
@@ -37,12 +37,11 @@
 							<?php echo utf8_encode(strftime('%d %B %Y', $article['publishedOn']));  ?>
 						</div>
 						<p class="blogContent">
-							<?php echo helper::subword(strip_tags($article['content']), 0, 300); ?>...
+							<?php echo helper::subword(strip_tags($article['content']), 0, 400); ?>...
 							<a href="<?php echo helper::baseUrl() . $this->getUrl(0) . '/' . $articleId; ?>">Lire la suite</a>
 						</p>
 					</div>
 				</div>
-				<hr />
 			<?php endforeach; ?>
 		</div>
 	</div>