Website
Il est rassurant de montrer une image d'un site avant que votre visiteur clique sur un lien. C'est le rôle de cette action
 

🆙 website_preview : Affiche une prévisualisation du site au survol d'un lien

Cliquer pour lire la documentation

syntaxe {up website-preview=CSS_selecteur}
@author: LOMART @version: UP-2.7 @license: GNU/GPLv3 @credit: script jQuery Mini Preview de lonekorean @tags: Widget
  • website_preview = .com-content-article__body a: sélecteur CSS des liens à afficher
  • mode = parenthover: mode chargement preview : parenthover, none, pageload
  • width (l,largeur,w) = 256: largeur preview (px)
  • height (h,hauteur) = 144: hauteur preview
  • scale = .25: Echelle entre 0.1 et 1

Un exemple simple

Le shortcode

{up website-preview=.minipreview}
{up link=lomart.fr | class=minipreview | blank}

Le résultat


lomart.fr  🢀 Survolez le lien

Le premier shortcode met en place les fichiers nécessaires pour afficher une imagette pour tous les liens avec la classe minipreview. L'argument principal du shortcode est le sélecteur CSS qui identifie le ou les blocs pour lesquels on affichera le preview.

Pour le deuxième, j'utilise l'action link pour attribuer la classe minipreview au lien. C'est une facilité, un lien classique avec cette classe fonctionne aussi bien

Où mettre le shortcode ?

Si son usage est occasionnel, il peut être ajouté sur la page où cette fonctionnalité sera utilisé. L'avantage est de connaitre le sélecteur impliqué et de pouvoir personnaliser les autres options. 

Si vous voulez étendre son usage à l'ensemble du site, il faudra l'ajouter dans un module personnalisé comme LM-Custom.

Comment choisir le sélecteur ?

Le plus simple et sans risque est d'obliger la saisie d'un nom de classe. C'est un peu fastidieux, mais cela permet de choisir les liens qui affichent ce preview

{up website-preview=a.classname}

Pour généraliser son utilisation, il est possible d'utiliser un sélecteur qui cible tous les liens du contenu avec un shortcode de ce type qui exclut les liens des menus du site

{up website-preview=.com-content-article__body a} // pour Joomla4-Cassiopiea
{up website-preview=#content a} // pour Joomla3-Protostar

Attention: les liens mailto seront également ciblés.

Paramètres

En dehors de l'option principale qui définit le sélecteur du ou des liens concernés, les autres option sont :

  • mode : le mode de chargement des previews
    • parenthover : par défaut, lors du premier survol du lien
    • pageload : lors du chargement de la page. Attention, cela monopolise beaucoup de ressources si les liens sont nombreux
    • none : aucun pré-chargement 
  • width : largeur du preview. 256 par défaut
  • height : hauteur du preview. 144 par défaut
  • scale : niveau de zoom du site dans le preview. de 0.1 à 1, 0.25 par défaut

Quelques exemples. Notez l'utilisation d'un id pour cibler précisément un lien.


fr.wikipedia.org/wiki/Joomla!
{up website-preview=#demo1
 | h=250 | w=450 | scale=0.25}
{up link=https://fr.wikipedia.org/wiki/Joomla!
 | id=demo1 | blank}

fr.wikipedia.org/wiki/Joomla!

{up website-preview=#demo2
 | h=250 | w=150 | scale=0.1}
{up link=https://fr.wikipedia.org/wiki/Joomla!
 | id=demo2 | blank}

fr.wikipedia.org/wiki/Joomla!

{up website-preview=#demo3
 | h=100 | w=200 | scale=0.8}
{up link=https://fr.wikipedia.org/wiki/Joomla!
 | id=demo3 | blank}
Pour info, cette page utilise 17 action(s) :
box (1) upactionslist (1) flexauto (2) website-preview (4) link (5) span (1) icon (1) listup (1) jcontent-info (1)