bg-slideshow ~ fond de site ou de bloc

Mettre un slideshow avec effets de transition et animation en fond de site ou dans un bloc

Le fond d'un bloc de contenu

Le bloc ci-dessus est obtenu avec ce shortcode.
La seule information nécessaire est le chemin du dossier contenant les images à utiliser. Si l'option bg-selector est spécifiée, elle sera ignorée.
Le contenu est du HTML saisi au format code ou avec un éditeur (JCE, TinyME), tout est permis !
L'option center permet de centrer verticalement le contenu entre les shortcodes.
style définit le padding, le centrage horizontal et la couleur du texte. C'est équivalent à: style=padding:20px;text-align:center;color:#fff

{up bg-slideshow=images/actions-demo/bg/animaux 
  | mobile=images/actions-demo/bg/lion.jpg 
  | center 
  | style=p3 tc t-blanc
}
  <h2 class="fs300">Un titre</h2>
  {up lorem=1}
  <a class="btn btn-primary" href="#">Un bouton</a>
{/up bg-slideshow}

Utilisation sur un appareil mobile

Si l'utilisation d'un appareil mobile est détectée, il est possible d'indiquer des images de substitution avec l'option mobile.

C'est le cas pour la démo ci-dessous où le shortcode est :

{up bg-slideshow=images/actions-demo/bg/animaux
  | mobile=images/actions-demo/bg/lion.jpg}

Sur mobile, on affiche une seule image de lion.

Le fond du site

{up bg-slideshow=images/actions-demo/bg/noel 
  | bg-overlay=linear-gradient(90deg, rgba(255,0,0,0.4) 0%, rgba(255,255,0,0.7) 50%, rgba(255,0,0,0.4) 100%) 
  | page-selector=.site-grid
  | page-overlay=rgba(255,80,80,0.6) 
  | css-head=body.vegas-container[position:absolute;min-width:100%]
 }

• L'option principale bg-slideshow contient le chemin du dossier des images pour le slideshow. C'est la seule option nécessaire !
• bg-overlay est la valeur pour la propriété background : un beau dégradé rouge avec un centre jaune. On peut faire plus simple : 70 ou 70% pour une transparence sans dégradé.
• page-selector et page-overlay permettent de jouer sur le style (engénéral la transparence) du fond sous le contenu. .site-grid est le sélecteur du contenu pour le template cassiopeia.
• css-head est une règle css qui sera ajoutée au head de la page.
  Dans notre cas, elle permet sous Joomla 4 avec le template Cassiopeia de voir l'image de fond. Cette règle sera intégrée à partir de la version 3.1 de UP

Note: avec les possibilités de personnalisation des actions introduites avec la version 1.4 de UP, le webmaster peut définir les options "techniques" dans un fichier custom/prefs.ini

Le fond d'un bloc existant

Pour rester dans notre ambiance de fêtes, on va ajouter un slideshow en arrière-plan du footer. La démo, c'est tout en bas de la page.

{up bg-slideshow=02-santa-claus[50-35].jpg; 06-lumieres.jpg 
  | path=images/actions-demo/bg/noel/ 
  | bg-selector=ul.flexmenu
  | css-head=li.flexmenu, li.flexmenu a[color:red !important;font-weight:bold] }

• Comme option principale, j'indique les 2 images utilisées séparées par un point-virgule.
• Pour éviter de répéter le chemin des images, je le renseigne dans l'option path
• le plus important, bg-selector contient le sélecteur CSS du bloc de pied de page.
  A adapter selon le template de votre site.
• css-head me permet d'adapter la couleur des menus aux images

Infos pratiques

Définir les images utilisées

L'option principale bg-slideshow et la liste des images pour mobile acceptent les arguments suivants :

• le chemin vers un dossier sur le serveur : toutes les images jpg et png sont utilisées dans l'ordre alphabétique.
• le chemin et nom d'une ou plusieurs images séparées par un point-virgule
• l'url vers une ou plusieurs images

L'option path permet d'indiquer le chemin commun à toutes les images. Il est pris en compte pour les images normales et celles pour mobile.

Exemple utilisation path avec images web :

{up bg-slideshow=0;2;3 | mobile=1 | path=https://picsum.photos/1020/300?image= | style=minh200}
   
{/up bg-slideshow}

Pour utiliser une image identifiée par son ID du site picsum.photos, la syntaxe est https://picsum.photos/1020/300?image=# où # est l'id de la photo.

Pour l'exemple, nous fournissons la partie constante de l'URL dans l'option path et les numéros des photos comme option principale. Sur un mobile, nous affichons uniquement une image.

Centrage des images

Il est prévu que l'image remplisse la totalité du bloc sans déformation (mode cover en CSS). Pour cela, il est nécessaire de recadrer l'image.

Un mécanisme est proposé pour définir le point de référence pour les recadrages. Il consiste en l'ajout d'information à la fin du nom du fichier. Exemple : mire[20-100].jpg pour recadrer à partir d'un point situé à 20% de la gauche et 100% en bas

Si le nom du fichier est passé comme paramètre de l'option principale, il suffit d'ajouter l'indication dans le nom de l'image. Dans l'autre cas, comme on indique uniquement le nom du dossier, il est impossible de saisir les infos dans le shortcode. Il suffira de modifier le nom des images pour qu'elles intègrent l'information.

Pour la démonstration, on utilise une seule image (mire.jpg), mais on indique le cadrage dans son nom

{up bg-slideshow=images/actions-demo/bg/mire.jpg}
{up bg-slideshow=images/actions-demo/bg/mire[0-0].jpg}
{up bg-slideshow=images/actions-demo/bg/mire[0-100].jpg}
{up bg-slideshow=images/actions-demo/bg/mire[100-100].jpg}

Note : L'indicateur de cadrage doit être situé juste avant l'extension de l'image. C'est pour cela qu'il est impossible de les utiliser sur les images picsum.photos.

Pour info, le nom du fichier image avec un sapin que l'on utilise pour le fond de site est : 03-christmas[0-100].jpg.
Le cadrage sur la gauche et en bas permet de voir le sapin et les cadeaux sur les écrans verticaux des smartphones.

Mode remplissage et répétition

Il est possible de définir le mode de remplissage pour une image en ajoutant repeat, cover ou contain dans le nom du fichier.
Il doit être après les informations de centrage. exemple : maphoto[50-50-repeat].jpg

Les overlays

Le but d'un overlay est d'atténuer l'image pour faciliter la lecture du texte.

L'action dispose de 2 options pour définir un overlay : bg-overlay pour l'image de fond et page-overlay pour le bloc défini par page-selector.

Ces 2 options attendent le même type de valeur qui peut-être :

Un niveau de transparence

Il suffit d'indiquer le niveau de transparence d'un masque blanc. Le signe % est optionnel.

Masque coloré avec transparence - #RGBA

Applique un masque coloré semi-transparent. La valeur est saisi au format #RVBA ou #RRVVBBAA.

Image PNG répétée

Il est possible d'indiquer une image PNG qui sera répété en XY.
Sans indication de chemin, on utilise les images se trouvant dans /plugins/content/up/assets/overlay

Vous pouvez utiliser n'importe quelle image en spécifiant son chemin.

valeur CSS pour la propriété background

bg-overlay=linear-gradient(
45deg, 
rgba(0,0,0,1) 0%, 
rgba(255,255,255,1) 50%, 
rgba(0,0,0,1) 100%
)

bg-overlay=linear-gradient(
90deg, 
rgba(255,0,0,1) 0%, 
rgba(255,255,0,1) 25%, 
rgba(5,193,255,1) 50%, 
rgba(255,255,0,1) 75%, 
rgba(255,0,0,1) 100%
)

bg-overlay=radial-gradient(
ellipse at center, 
rgba(242,242,242,1) 0%,
rgba(249,255,142,1) 50%,
rgba(234,40,3,1) 51%,
rgba(255,102,0,1) 75%,
rgba(199,34,0,1) 100%
)

bg-overlay=radial-gradient(
ellipse at center, 
rgba(0,255,0,1) 0%, 
rgba(255,0,0,1) 50%, 
rgba(255,255,0,1) 100%
)

Aidez-vous des sites proposant des générateurs comme : http://angrytools.com/gradient, http://www.colorzilla.com/gradient-editor, ...

Les options du slideshow

Pour ajuster la durée de chaque image, le type de transition ou d'animation, il faut ajouter des options au shortcode.