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.

🆙 lorem_flickr (lorempixel,lorem_placeimg) : affiche une image aleatoire

Cliquer pour lire la documentation

Syntax 1 : {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
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3 @tags: Editor
  • 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 }
  1. L'appel de l'action avec Joomla comme mot-clé. Eh oui !!!
  2. class donne du style à l'image. Remarquez le mélange des styles et des classes autorisé par UP
  3. si besoin main-tag permet de changer la balise du bloc parent (div par défaut)
  4. main-class ajoute un enrichissement au bloc parent
  5. align accepte left, center et right pour aligner l'image dans son bloc parent
  6. 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.

Pour info, cette page utilise 27 action(s) :
div (10) upactionslist (1) flexbox (1) lorempixel (2) addcsshead (1) lorem-flickr (8) flexauto (2) listup (1) jcontent-info (1)