improvement: ajout featured

components/featured.php

@@ -1,34 +1,39 @@
 <div id="featured-articles">
   <?php
-  query_posts(array(
+  query_posts(array( 
     'post_type' => 'post',
     'tax_query' => array(
         array(
-            'taxonomy' => 'category',
+            'taxonomy' => 'niveau',
-            'terms' => 'blog',
+            'terms' => 'featured',
             'field' => 'slug',
         )
     ),
     'orderby' => 'date',
-    'post_count' => '1',
+    'posts_per_page' => '3',
-    'order' => 'DESC',
+    'order' => 'DESC' 
-    'posts_per_page' => '1'
   ));
-
+  
   if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
-
+  
-  <div class="card head-primary" id="post-<?php the_ID(); ?>">
+  <article class="preview-featured">
-    <div class="card-header"><h1><?php the_title(); ?></h1></div>
+    <a href="<?php the_permalink(); ?>" class="preview-link">
-    <div class="flex-that mb">
+      <div class="preview-item" style="background-image:url('<?php echo get_the_post_thumbnail_url(); ?>');">
-        <div class="article-category">
+		    <div class="preview-overlay">
-          <?php $category = get_the_category();
+		      <div class="preview-categories">
-            echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn-small btn-info'><i class='fa fa-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
+		        <?php $category = get_the_category();
-        </div>
+              echo"<span class='badge bg-primary'>" . $category[0]->cat_name . "</span>"; ?>
-        <time itemprop="datePublished"><em><?php the_time('j F Y') ?></em></time>
+            </div>
-    </div>
+		    
-    <?php the_excerpt(); ?>
+		      <h2 class="preview-title"><?php the_title();/*3*/ ?></h2>
-    <p class="align-center"> <a href="<?php the_permalink(); ?>" class="btn btn-readmore" title="<?php the_title();?>">Lire l'article</a> </p>
+		    </div>
-  </div>
+      </div>
-
+		</a>
+  </article>
+  
+  
   <?php endwhile; ?> <?php wp_reset_query(); /*4*/ ?>
 </div>
+ 
+ 
+

functions.php

@@ -26,6 +26,31 @@
  * Permet d'afficher les niveaux de post pour les post features
  */
 
+ /* 2. Niveau support (for featured posts) */
+
+register_taxonomy(
+  'niveau',
+  'post',
+  array(
+    'label' => 'Niveau',
+      'labels' => array(
+      'name' => 'Niveaux',
+      'singular_name' => 'Niveaux',
+      'all_items' => 'Tous les niveaux',
+      'edit_item' => 'Éditer le niveau',
+      'view_item' => 'Voir le niveau',
+      'update_item' => 'Mettre à jour le niveau',
+      'add_new_item' => 'Ajouter un niveau',
+      'new_item_name' => 'Nouveau niveau',
+      'search_items' => 'Rechercher parmi les niveaux',
+      'popular_items' => 'Niveaux les plus utilisés'
+    ),
+  'hierarchical' => false
+  )
+);
+
+register_taxonomy_for_object_type( 'niveau', 'post' );
+
 // 1.1 - Enregistrement de la taxonomy pour le flag
 register_taxonomy(
   'flag',

home.php

@@ -9,11 +9,11 @@
         echo '<h1 class="page-title">' . get_the_title( $page ) . '</h1>';
         echo '<div>' . $page->post_content . '</div>';
       }
-      echo '<h1 class="page-title">Dernier article</h1>';
+      echo '<h1 class="page-title"><i class="fa fa-fw fa-star" aria-hidden="true"></i> À la une</h1>';
       include(TEMPLATEPATH . '/components/featured.php');
     }
   ?>
-  <h1 class="page-title">Publications</h1>
+  <h1 class="page-title"><i class="fa fa-fw fa-clock-o" aria-hidden="true"></i> Publications</h1>
 	<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
 
 </main>

scss/_global.scss

@@ -4,4 +4,5 @@
 
 @import 'custom/global';
 @import 'custom/previews';
+@import 'custom/featured';
 @import 'custom/article';

scss/custom/_featured.scss

@@ -0,0 +1,48 @@
+#featured-articles {
+    display:grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-gap: $lineheight;
+    padding-bottom: $lineheight;
+    @include xl() {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+}
+
+.preview-featured {
+    font-size: 0.8rem;
+
+    .preview-link {
+        display: block;
+        padding:0;
+        border-radius: $card-radius;
+        overflow: hidden;
+        .preview-item {
+            width: 100%;
+            height: auto;
+            aspect-ratio: 16 / 9;
+            background-size:100% auto;
+            background-position: center center;
+            transition: background-size .5s;
+            
+            &:hover {
+                background-size: 120% auto;
+            }
+        }
+    }
+
+    .preview-overlay {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-start;
+        height:100%;
+        color: white !important;
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
+        padding:$lineheight / 8;
+
+        h2 {
+            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+        }
+    }
+}

scss/custom/_global.scss

@@ -33,6 +33,10 @@
 #page-header {
     background: $color-primary url('img/background.png');
     margin-bottom:1.5rem;
+    font-size: 0.8rem;
+    .fa {
+      font-size: 1rem;
+    }
 }
 
 header h1 {

scss/custom/_previews.scss

@@ -59,7 +59,7 @@
     }
 }
 
-.preview h2 {
+.preview h2, .preview-featured h2 {
     font-size:1.25rem;
     line-height: 1.5rem;
     font-family: $titlefont;

style.css

@@ -2558,7 +2558,10 @@ th {
 /* ------------------ HEADERS ------------------- */
 #page-header {
   background: #e33d22 url("img/background.png");
-  margin-bottom: 1.5rem; }
+  margin-bottom: 1.5rem;
+  font-size: 0.8rem; }
+  #page-header .fa {
+    font-size: 1rem; }
 
 header h1 {
   border-style: none !important;
@@ -2760,13 +2763,13 @@ footer {
     aspect-ratio: 16/9;
     border-radius: 8px; }
 
-.preview h2 {
+.preview h2, .preview-featured h2 {
   font-size: 1.25rem;
   line-height: 1.5rem;
   font-family: Teko, sans-serif;
   font-weight: 800;
   height: 3rem; }
-  .preview h2 a {
+  .preview h2 a, .preview-featured h2 a {
     background-color: transparent !important;
     color: #212529; }
 
@@ -2776,6 +2779,43 @@ footer {
   line-height: 1.25rem;
   color: rgba(33, 37, 41, 0.8); }
 
+#featured-articles {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  grid-gap: 1.6rem;
+  padding-bottom: 1.6rem; }
+  @media (min-width: 1200px) {
+    #featured-articles {
+      grid-template-columns: 1fr 1fr 1fr; } }
+.preview-featured {
+  font-size: 0.8rem; }
+  .preview-featured .preview-link {
+    display: block;
+    padding: 0;
+    border-radius: 8px;
+    overflow: hidden; }
+    .preview-featured .preview-link .preview-item {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 16 / 9;
+      background-size: 100% auto;
+      background-position: center center;
+      transition: background-size .5s; }
+      .preview-featured .preview-link .preview-item:hover {
+        background-size: 120% auto; }
+  .preview-featured .preview-overlay {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    height: 100%;
+    color: white !important;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
+    padding: 0.2rem; }
+    .preview-featured .preview-overlay h2 {
+      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); }
+
 .article img {
   max-width: 100%;
   height: auto;