{up website-preview=CSS_selecteur}- 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 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}box (1) upactionslist (1) flexauto (2) website-preview (4) link (5) span (1) icon (1) listup (1) jcontent-info (1)