MagixSlideshow

MagixSlideshow est le module officiel de gestion de bannières défilantes et de diaporamas dynamiques pour Magix CMS 4. Conçu comme une extension modulaire de type Widget , il s'interface directement avec le moteur de rendu du CMS et l'outil de gestion de mise en page ( Layout Manager ).

1. Caractéristiques principales

• Composant natif de type Widget : Déclaré pour s'intégrer directement aux points d'ancrage ( Hooks ) de la structure de vos thèmes via l'outil de Layout.

• Gestion multilingue native : Configuration indépendante des médias, titres, sous-titres, boutons et liens d'action pour chaque langue active de l'instance.

• Optimisation SEO & Accessibilité : Génération sémantique des balises alt , structuration ARIA adaptée aux lecteurs d'écran et gestion granulaire des attributs de liens (cibles, titres).

• Interface unifiée Magix CMS : Utilisation conjointe des composants d'administration MagixForms et MagixGallery pour le téléversement, le recadrage et l'ordonnancement fluide des diapositives.

• Respect des Core Web Vitals : Chargement conditionnel des dépendances CSS/JS, dimensionnement strict pour prévenir le Cumulative Layout Shift (CLS) et support du chargement différé ( lazy loading ).

2. Prérequis système

• Cœur du CMS : Magix CMS version 4. 0. 0 ou supérieure.

• Environnement serveur : PHP 8. 2+ avec extensions standard (GD ou Imagick, JSON, cURL).

• Front-end : Bootstrap 5. 3+ (natif au thème par défaut).

3. Procédure d'installation

L'installation de MagixSlideshow s'opère en quelques étapes via l'administration :

1. Déploiement des fichiers : Téléchargez l'archive officielle du plugin et décompressez son contenu dans le répertoire /plugins/ de votre arborescence Magix CMS :

votre-site/
└── plugins/
    └── MagixSlideshow/
        ├── db/
        ├── src/
        ├── views/
        └── manifest.json

1. Accès au gestionnaire : Connectez-vous au panneau d'administration de Magix CMS.

2. Activation : Naviguez vers le menu Extensions > Gestionnaire .

3. Exécution du script d'installation : Localisez la ligne MagixSlideshow dans la liste des modules non installés, puis cliquez sur le bouton d'installation automatique. Le script d'installation configure automatiquement les tables de données nécessaires dans la base SQL et enregistre les identifiants de hooks.

4. Configuration des diapositives

Une fois activé, le module dispose de son propre contrôleur d'administration pour créer et organiser vos contenus :

1. Accédez à la rubrique Extensions > MagixSlideshow .

2. Cliquez sur Ajouter une diapositive .

3. Renseignez les paramètres par langue :

   • Visuel principal : Sélection ou téléversement d'image optimisée via MagixGallery .

   • Titres & Textes d'accroche : Champs textuels compatibles avec la mise en forme typographique du thème.

   • Call-to-Action (Lien d'action) : URL de redirection interne ou externe avec libellé personnalisé.

4. Activez ou désactivez l'état de publication de chaque slide à l'aide des commutateurs prévus.

5. Réorganisez l'ordre d'affichage des diapositives par glisser-déposer sur la liste.

5. Intégration dans les thèmes (Layout Manager)

MagixSlideshow ne nécessite aucun codage manuel dans vos fichiers de templates Smarty :

1. Rendez-vous dans Configuration > Disposition (Layout) .

2. Repérez le composant MagixSlideshow dans le panneau latéral des widgets disponibles.

3. Glissez-déposez le bloc dans la zone cible de votre choix (ex. : displayHomeTop , displayHeaderBottom ou displayContentTop ).

4. Définissez la visibilité contextuelle (affichage exclusif sur la page d'accueil ou étendu à l'ensemble du site).

5. Enregistrez la disposition : le diaporama est immédiatement rendu sur le front-end sans nécessiter de purge manuelle de cache.

6. Bonnes pratiques de performance

• Dimensions d'images homogènes : Pour éviter tout décalage d'affichage lors de la navigation, téléversez des visuels ayant le même ratio d'aspect (ex. 1920x800px pour une bannière plein écran).

• Compression : Privilégiez les formats modernes (WebP ou AVIF) afin de limiter le poids de la première diapositive et préserver l'indice Largest Contentful Paint (LCP).