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

➠ bg_slideshow : Affiche une image en fond d'un bloc

Cliquer pour lire la documentation

syntaxe {up bg-slideshow=liste images ou dossier}
syntaxe {up bg-slideshow=liste images ou dossier}contenu{/up bg-slideshow}
doc : https://developer.mozilla.org/fr/docs/Web/CSS/background
author LOMART version 1.0 license GNU/GPLv3 credit Vegas de jaysalvat
  • bg_slideshow: dossier ou images séparées par des points-virgules
  • mobile: image ou règle(s) css
  • path: chemin commun aux images indiquées en argument principal
  • bg-selector=body: bloc portant le slideshow
  • bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
  • bg-color: couleur sous image
  • page-selector: bloc sur contenu
  • page-overlay: background de page-selector (png, opacité, RGBA, CSS)
  • center=1: centrage vertical du contenu entre shortcodes
  • style: classes et styles inline pour bloc créé
  • base-css: règles CSS définies par le webmaster (ajout dans le head)
  • js-options: options non prévues par l'action
  • delay=5000: durée par image
  • transition=fade: random,blur,flash,negative,burn,slideLeft,slideRight,slideUp,slideDown,zoomIn,zoomOut,swirlLeft,swirlRight
  • transitionDuration=1000: durée transition
  • animation: kenburns,kenburnsLeft,kenburnsUp,kenburnsDown,kenburnsUpLeft,kenburnsUpRight,kenburnsDownLeft,kenburnsDownRight,random
  • animationDuration=auto: durée des animations
  • timer=1: affiche barre de progression

    Le fond d'un bloc de contenu

    Un titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Legimus tamen Diogenem, Antipatrum, Mnesarchum, Panaetium, multos alios in primisque familiarem nostrum Posidonium. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Mene ergo et Triarium dignos existimas, apud quos turpiter loquare? Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; A mene tu? Duo Reges: constructio interrete. Si qua in iis corrigere voluit, deteriora fecit. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Et harum quidem rerum facilis est et expedita distinctio.

    Un bouton

    Le bloc ci-dessus est obtenu avec ce shortcode.
    La seule information nécessaire est le chemin du dossier contenant les images à utiliser.
    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

    Le fait de pouvoir définir un fond de site directement dans un article permet d'accorder la décoration générale du site au contenu en cours. Vous faites un article sur Noël, un fond de guirlandes et boules colorées se justifie.

    Cela se fait relativement facilement avec ce shortcode. L'apparente complexité est due au fait que je n'ai droit qu'à un seul exemple.

    Ci-contre, l'image actuelle de fond sans aucun habillage, ni recadrage.

     
    {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=#sp-main-body>.container
      | page-overlay=70
    }
    
    • 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é.
    • base-css est une règle css qui sera ajoutée au head de la page. Dans notre cas, elle permet d'avoir une seconde opalescence pour faciliter la lecture du contenu

    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=#sp-footer
      | base-css=#sp-footer, #sp-footer a[color:red;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.
    • base-css me permet d'adapter la couleur des menus aux images
    J'aurais bien aimé mettre cette animation sur la barre de menu, mais l'ajout de code JS/CSS rend les menus déroulants inopérants.
    Vérifier toujours un éventuel effet de bord !!!

    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}
      &nbsp;
    {/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}
    

    mire.jpg

     

    mire[0-0].jpg

     

    [0-100]

     

    [100-100]

     

    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

    image[repeat].png
    image[0-0-repeat].png
    image[contain].png
    image[cover].png

    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.

    bg-overlay=10%

    bg-overlay=30%

    bg-overlay=60%

    bg-overlay=90%

    Masque coloré avec transparence - #RGBA

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

    bg-overlay=#0006

    bg-overlay=#000F

    bg-overlay=#c7158599

    bg-overlay=#9acd32ff

    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

    01-blanc.png

    01-gris.png

    01-noir.png

    01-rouge.png

    02.png

    03.png

    04.png

    07.png

    08.png

    09.png

    45-1-blanc.png

    45-1-gris.png

    45-1-noir.png

    45-21-blanc.png

    45-2-gris.png

    45-2-noir.png

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

    images/actions-demo/bg/noel-100.png

    images/actions-demo/bg/joomla-blanc-30.png

    images/actions-demo/bg/joomla-noir-30.png

    images/actions-demo/bg/joomla-color-30.png

    valeur CSS pour la propriété background

    linear-gradient

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

    linear-gradient

    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%
    )

    radial-gradient

    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%
    )

    linear-gradient

    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.


    delay=2000
    timer=1

    transition=random
     

    animation=kenburnsUp
     

    transition=slideUp
    animation=kenburnsUp
    Option Description
    delay durée pour chaque image. 5000 (5 sec) par défaut
    transition effet pour le passage d'une image à une autre. fade par défaut, ou blur, flash, negative, burn, slideLeft, slideRight, slideUp, slideDown, zoomIn, zoomOut, swirlLeft, swirlRight. Le mode random effectue une transition au hasard à chaque changement. Les transitions sont réalisées à l'apparition de l'image, mais également à la disparition si le chiffre 2 est indiqué à la fin du nom : fade2, blur2, flash2, negative2, burn2, slideLeft2, slideRight2, slideUp2, slideDown2, zoomIn2, zoomOut2, swirlLeft2, swirlRight2
    transitionDuration durée de la transition
    animation Type d'animation (en plus de la transition) à l'affichage d'une image. Aucune par défaut, les valeurs permises sont : kenburns, kenburnsLeft, kenburnsUp, kenburnsDown, kenburnsUpLeft, kenburnsUpRight, kenburnsDownLeft, kenburnsDownRight ou random
    animationDuration durée de l'animation. auto (idem à delay) par défaut ou durée en millisecondes
    timer 1 par défaut pour afficher un indicateur de temporisation. Une petite bordure blanche au bas de l'image
    js-options pour les webmasters aguerris, ajouter des options au JS non prévues par l'action. La documentation sur le script Vegas est disponible ICI
    Un exemple pour avoir un mode de remplissage contain et des petits points en overlay : js-options=cover:false, overlay:true