Pour insérer des images factices dans vos maquettes de site
Les sites lorempixel.com et placeimg n'existant plus, c'est l'action lorem-flickr qui sera utilisée. Normalement cela devrait être transparent, sauf si vous utilisiez des options comme sepia ou grayscale.
Le nouveau nom de l'action est lorem-flick, mais par souci de compatibilité lorempixel est utilisable sans modification des anciens shortcodes.
{up loremflickr=type | width=xx | height=xx}.
Note : width & height sont les dimensions de l'image retournée par lorempixel. Pour l'afficher en remplissant le bloc parent, il faut ajouter style=width:100%
Le site //lorempixel.com étant fermé, l'action utilise le site //loremflickr.com
on peut appeler l'action par loremflickr ou lorempixel
- lorem_flickr (lorempixel,lorem_placeimg): mot(s) clé(s) séparé par des virgules
- height (h,hauteur) = 200: hauteur image téléchargée
- width (l,largeur,w) = 200: largeur image téléchargée
- color: g (gris), p (pixellisé), red, green, ou blue
Bloc parent
- main-tag (block) = div: balise du bloc parent à l'image si options main-class ou align
- main-class: classe(s)
- align: alignement horizontal : left, center, right
Style CSS
- id: identifiant
- class: classe(s)
- style: classes et styles
Version minimale
{up lorem-flickr}Une image de 200x200px est affichée
Choix du type d'image
Le shortcode pour l'image ci-contre est :
{up lorem-flickr=paris,statue/all}Alors que lorempixel avait un choix limité de type d'image, lorem-flickr permet d'utiliser des mots clés non définis à l'avance. Un unique mot peut être recherché ou plusieurs en les séparant par des virgules.
Si on ajoute '/all' à la fin, tous les mots doivent correspondre à l'image.
width & height est la taille demandée en pixels
{up lorempixel=pizza | width=800 | height=150}Ici, on récupère une image de 150x800px qui sera affichée à 50% de la largeur du bloc parent.
Variantes colorées
Avec le mot-clé dog
color=g
color=p
color=red
color=green
color=blue
Un peu de style
{up lorem-flickr=joomla
| class=border:red 2px solid;m1;w50
| main-tag=header
| main-class=border:2px green dotted
| align=center
| w=800px }- L'appel de l'action avec Joomla comme mot-clé. Eh oui !!!
- class donne du style à l'image. Remarquez le mélange des styles et des classes autorisé par UP
- si besoin main-tag permet de changer la balise du bloc parent (div par défaut)
- main-class ajoute un enrichissement au bloc parent
- align accepte left, center et right pour aligner l'image dans son bloc parent
- w, synonyme de width, demande à flickr de retourner une image de 800px de large. La hauteur est celle par défaut (200px). Notez que la largeur affichée est celle définie par l'option class=w50 au point 2
Si aucun mot-clé ne correspond
{up lorem-flickr=xxxxxxxxxxxxxx}Une photo de tomboli sera affichée.
Cette action nécessite de qu'Internet soit disponible sur votre poste.
div (10) upactionslist (1) flexbox (1) lorempixel (2) addcsshead (1) lorem-flickr (8) flexauto (2) listup (1) jcontent-info (1)