feat: style and filter cat with image

css/style.css

@@ -0,0 +1,67 @@
+/* css/style.css */
+
+/* 1) Mise en place de la grille */
+/* .elementor-category-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+} */
+.elementor-category-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+/* Nombre de colonnes dynamiques */
+.elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }
+.elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
+.elementor-category-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
+.elementor-category-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
+.elementor-category-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
+.elementor-category-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
+
+/* 2) Chaque carte = conteneur relatif */
+.elementor-category-grid .category-card {
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */
+  border-radius: 8px;
+}
+
+/* 3) Image pleine carte */
+.elementor-category-grid .category-card img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform .4s ease;
+}
+
+/* 4) Effet hover : léger zoom */
+.elementor-category-grid .category-card:hover img {
+  transform: scale(1.05);
+}
+
+/* 5) Titre centré en overlay */
+.elementor-category-grid .category-card-name {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: .5em 1em;
+  font-size: 1.5rem;
+  line-height: 1.2;
+  text-align: center;
+  color: #ffffff;
+  /* background: rgba(0, 0, 0, 0.4); */
+  border-radius: 4px;
+  transition: background .3s ease;
+}
+
+/* 6) Hover sur titre : fond un peu plus opaque */
+/* .elementor-category-grid .category-card:hover .category-card-name {
+  background: rgba(0, 0, 0, 0.6);
+} */

elementor-category-grid-widget.php

@@ -2,7 +2,7 @@
 /**
  * Plugin Name: Elementor Category Grid Widget
  * Description: Custom Elementor widget to display a grid of post categories with images.
- * Version:     1.0.0
+ * Version:     1.1.0
  * Author:      MrRaph_
  * Text Domain: category-grid-widget
  * Requires Plugins: elementor
@@ -14,41 +14,6 @@ if ( ! defined( 'ABSPATH' ) ) {
     exit; // Sécurité : empêche l'accès direct.
 }
 
-/**
- * Charger les scripts WordPress Media Uploader pour nos écrans de taxonomie.
- */
-// function ccgw_enqueue_media_uploader( $hook_suffix ) {
-//     // On ne charge que sur l'écran de gestion des catégories
-//     if ( 'edit-tags.php' !== $hook_suffix 
-//         || ! isset( $_GET['taxonomy'] ) 
-//         || 'category' !== $_GET['taxonomy'] 
-//     ) {
-//         return;
-//     }
-
-//     // 1. Charger la librairie media
-//     wp_enqueue_media();
-
-//     // 2. Enqueue de ton script JS pour l'image de catégorie
-//     wp_enqueue_script(
-//         'ccgw-category-image',                                        // handle
-//         plugin_dir_url( __FILE__ ) . 'admin/js/category-image.js',    // chemin
-//         [ 'jquery' ],                                                 // dépendances
-//         '1.0',                                                        // version
-//         true                                                          // in_footer
-//     );
-
-//     // 3. Localiser la variable ccgw_data pour ton JS
-//     wp_localize_script(
-//         'ccgw-category-image',                                        // même handle que ci-dessus
-//         'ccgw_data',                                                  // nom de l’objet JS
-//         [
-//             'title'  => esc_js( __( 'Sélectionner une image de catégorie', 'category-grid-widget' ) ),
-//             'button' => esc_js( __( 'Sélectionner',                  'category-grid-widget' ) ),
-//         ]
-//     );
-// }
-// add_action( 'admin_enqueue_scripts', 'ccgw_enqueue_media_uploader' );
 /**
  * Charger les scripts Media Uploader et localiser les données JS
  * sur les écrans d'ajout ET d'édition de catégorie.
@@ -162,3 +127,19 @@ function register_category_grid_widget( $widgets_manager ) {
     $widgets_manager->register( new \Elementor_Category_Grid_Widget() );
 }
 add_action( 'elementor/widgets/register', 'register_category_grid_widget' );
+
+/**
+ * Enqueue styles front-end pour le widget.
+ */
+function ccgw_enqueue_front_styles() {
+    // Ne charger que si Elementor est actif
+    if ( defined( 'ELEMENTOR_VERSION' ) ) {
+        wp_enqueue_style(
+            'ccgw-category-grid-style',
+            plugin_dir_url( __FILE__ ) . 'css/style.css',
+            [],
+            '1.0.0'
+        );
+    }
+}
+add_action( 'wp_enqueue_scripts', 'ccgw_enqueue_front_styles' );

widgets/category-grid-widget.php

@@ -101,6 +101,21 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
             ]
         );
 
+        // ----------------------------------------------------------------------
+        // Contrôle : Ne montrer que les catégories avec image
+        $this->add_control(
+            'hide_without_image',
+            [
+                'label'        => esc_html__( 'Afficher uniquement catégories avec image', 'category-grid-widget' ),
+                'type'         => \Elementor\Controls_Manager::SWITCHER,
+                'label_on'     => esc_html__( 'Oui', 'category-grid-widget' ),
+                'label_off'    => esc_html__( 'Non', 'category-grid-widget' ),
+                'return_value' => 'yes',
+                'default'      => 'no',
+                'description'  => esc_html__( 'Si activé, les catégories sans image seront masquées.', 'category-grid-widget' ),
+            ]
+        );
+
         // Contrôle : Trier par (critère de tri des catégories).
         $this->add_control(
             'order_by',
@@ -250,6 +265,11 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base {
                 $image_url = wp_get_attachment_image_url( $thumbnail_id, $size );
             }
 
+            // *** Nouveau filtre ***
+            if ( 'yes' === $settings['hide_without_image'] && empty( $image_url ) ) {
+                continue;
+            }
+
             echo '<div class="category-card">';
             // Rendre la carte cliquable vers l'archive de la catégorie.
             echo '<a href="' . esc_url( $term_link ) . '">';