Vous avez surement déjà vu, lors de vos pérégrinations sur Internet, un superbe splash screen vous souhaitant la bienvenue ou vous informant d’une offre spéciale. Et bien avec ce tuto, on va apprendre (dans la joie et la bonne humeur !) à en mettre un en place sur votre Drupal … et ce en moins de 30 minutes !

Précisions pour le mec au fond de la classe que j’ai déjà perdu …

Je vais quand même préciser au cas où ce qu’est un splash screen et citer mon vieil ami Wikipédia : « En jargon informatique, un splash screen est la toute première fenêtre affichée par un logiciel ».

Autrement dit, au chargement d’un site par exemple, un splash screen est une fenêtre qui va masquer votre page d’accueil jusqu’à une action de la part du visiteur (clic sur l’image, fermeture de la pop-up …)

Prérequis et installation des modules

Pour réaliser notre objectif dans les temps donnés, on va pas s’embêter et profiter de la communauté Drupal qui a déjà fais le travail pour nous !

Dans un premier temps, téléchargez le module Splashify. Installez-le depuis la liste des modules de votre site. Et là … et ben ça marche pas. Mais pas de panique !

Dans un second temps, téléchargez et installez les modules Libraries et Colorbox.

Dans un troisième temps, téléchargez et placez dans le répertoire librairies (dans le répertoire /sites/all/librairies) les librairies suivantes :

• jStorage (disponible à cette adresse). Splashify va chercher le fichier jstorage.min.js, il devra donc être accessible depuis /sites/all/libraries/jstorage/
• Colorbox (disponible à cette adresse). Le module Colorbox va chercher le fichier jquery.colorbox-min.js depuis le répertoire /sites/all/libraries/colorbox/ , donc assurez-vous qu’il soit accessible.

Maintenant vous avez tous les outils nécessaires ! Passons à la configuration pour afficher notre superbe image à l’arrivée d’un utilisateur sur votre site.

Configuration

La configuration de votre splash screen se trouve à l’adresse NOM_SITE/admin/config/system/splashify. Vous verrez des onglets en haut à droite qui ressemble à ceci :

Onglet « When »

Cet onglet va déterminer quand vous souhaitez afficher votre splash screen. L’écran ressemble à ceci :

Depuis cet onglet, vous pouvez choisir parmi plusieurs options :

• La fréquence d’apparition de votre splash screen (toujours, une fois par semaine, une fois par mois ou … jamais, ce qui est carrément super utile !)
• Qui peut voir votre splash screen, parmi les rôles que vous avez crée depuis votre site

On passe maintenant à l’onglet suivant, « Where »

Onglet « Where »

Depuis cet onglet, on va paramétrer où vous souhaitez faire apparaître votre splash screen. J’en entends déjà qui disent « Dans ta définition, tu dis que c’est sur l’écran d’accueil, donc c’est inutile hein ! ». Déjà on parle pas comme ça à son professeur !

Si vous le souhaitez, vous pouvez le faire apparaître partout sur votre site ! (et spammez votre utilisateur qui adore ça)

On passe au plus intéressant, l’onglet « What »

Onglet « What »

Sur cet onglet, on va paramétrez ce que vous souhaitez afficher à l’utilisateur. Moi, dans mon exemple, je veux afficher un raton-laveur dans son carton-maison et qui nous invite à rentrer (je fais ce que je veux !)

Pour ça, vous devez choisir comme Splash Mode l’option « Display entered text/HTML full screen », ce qui vous proposera l’éditeur de contenu que vous avez paramétré. Il fonctionne comme celui pour vos différents types de contenu, donc n’ayez pas peur et laissez parler votre créativité 😉

On passe au dernier onglet, « How »

L’onglet « How »

Depuis cet onglet, on va paramétrer la façon dont va apparaître notre splash screen. Comme on a installé Colorbox qui nous propose de l’afficher en mode lightbox, c’est bien évidemment cette option qu’on va choisir !

Vous oubliez pas de préciser la taille de votre lightbox, et c’est reglé !

Si vous souhaitez paramétrer le style de la lightbox, allez voir du côté de NOM_SITE/admin/config/media/colorbox.

Résultat

TADAAA ! On a notre raton-laveur qui nous ouvre les portes de son carton ! Vous pouvez bien évidemment choisir de mettre autre chose, comme une offre spéciale, une information importante … mais je préfère quand même mon raton !

30 minutes après, votre splash screen est prêt ! N’hésitez pas à nous envoyer vos plus beaux et à partagez mon article 😉