mercredi 12 août 2015

FULLSCREEN BACKGROUND IMAGE SLIDESHOW EN DRUPAL AVEC MODULE

Bonjour Chers Visiteurs de mon fameux blog,

Pour ceux qui suivaient mes articles, mon article précédent parlait de mettre une image en background sur site Drupal.
Ce qui pour moi était difficile à l'époque parce que je n'avait pas trouvé un module qui le faisait. J'utilisait une librairie de Backstretch et un code javascript pour faire afficher mon image en background.




Le moi dernier, je travaillait sur un projet web Drupal qui proposait comme design de mettre une ou plusieurs images en background. La galère !!!!!!!! encore ça mais je l'avait essayé.

Heureusement mon patron, un expert en Drupal trouve un  module Backstretch . 

Coïncidence, C'est le module que je cherchais et je l'ai trouvé . Mais la question que je me pose est Comment est-ce que le module backstretch marche ?

Bon passons aux choses sérieuses. Ce module installé à deux fonctionnalités :

1ère fonction : Il agit en tant que Field formatter c'est-à-dire qu'il s'applique au niveau de l'affichage d'un article.

Ce qui faut faire :

  • Créer un type de contenu avec une propriété image, 
  • ajouter un contenu de ce type avec l'image. 
  • Puis allez dans le "Manage display" de ce type de contenu. 

Au niveau du format de l'image selectionnez ''Backstretch''. Après un chargement, vous allez voir apparaître les paramètres comme ceci.



a- représente le format choisi
b- les paramètres de ce format
c- le bouton pour modifier les paramètres

Vérifions les paramètres en cliquant sur le bouton:


Image style pour le style de l'image. Je vous conseille de le laissez en None pour qu'il utilise la totalité de l'image
Attach to pour l"emplacement de l'image, il y a deux selections : whole page pour qu'il s'affiche sur toute la page et Other element si vous voulez que l'image s'affiche pour une région donnée . Vous devez précisez la région.
Fade et duration pour la vitesse du slide si et si seulement si vous avez uploadé plusieurs images. Alors il y aura un effet de slideshow . Merci Backstretch !!!!!! :) 

Cliquez sur update et enregistrez vos changements.

2ème fonction Un peu plus complexe. 

Ici, nous avons besoin du module Context pour des situations particulières. Exemple: Imaginons que nous avons une vue de page qui affiche plusieurs éléments et nous voulons que cette page affiche une ou plusieurs images. Cette page n'est pas un type contenu et ben voila comment le module Context vient nous sauver.
Installons-le
Activons-le
Rendons-nous dans sa configuration ''' Structure - Context"'


Aucun commentaire:

Enregistrer un commentaire