IllusionCMS
FR
Manuel · 8

Fichiers et images

Téléverser et organiser

Sous Fichiers : faites glisser des fichiers dans la zone ou cliquez sur Téléverser (jusqu’à 64 Mo par fichier). Les dossiers servent uniquement à la vue d’ensemble – déplacer ou renommer ne change jamais l’URL d’un fichier. Pour déplacer un fichier, faites-le glisser sur un dossier à gauche.

À droite, pour chaque fichier : nom, texte alternatif, dimensions, variantes, copier l’URL, copier la balise de template, supprimer.

Nettoyer

Après des réimportations ou des refontes, il reste souvent des images et des fichiers CSS/JS que plus rien n’utilise. Nettoyer… (sous Fichiers et sous CSS & JS) les liste – les images avec aperçu, tout présélectionné. Désélectionnez ce qui doit rester, puis Supprimer la sélection ; une confirmation est demandée au préalable. La suppression est définitive, variantes d’image et versions WebP comprises.

Un fichier est considéré comme utilisé si des pages (HTML, Head, champs SEO), des Snippets, du CSS/JS, des entrées de Collection, des Workflows, des Pens ou des sources REST y font référence – via son adresse (y compris une variante d’image ou une version WebP), via image(ID)/file(ID), un champ image ou fichier, comme icône du site ou image d’aperçu. Un CSS/JS est considéré comme utilisé s’il est associé à une page ou intégré via asset_url(ID) ; une feuille de style inutilisée ne compte pas comme utilisation des images qu’elle contient. Juste avant la suppression, le serveur vérifie encore une fois et conserve tout ce qui est utilisé entre-temps.

Ne sont pas détectables les références depuis l’extérieur (autres sites, newsletters pointant directement vers /media/…) et celles issues d’anciennes versions de l’historique – si vous rétablissez une page à une ancienne version, vous n’y retrouverez plus les images supprimées. En cas de doute, désélectionnez.

Variantes d’image et srcset

Pour les JPEG et PNG, IllusionCMS génère automatiquement au téléversement des versions réduites de 320, 640, 960, 1280 et 1920 px de large (uniquement les largeurs inférieures à l’original). Les navigateurs ne chargent ainsi que la quantité d’image dont ils ont besoin. Les GIF, WebP et SVG sont enregistrés tels quels.

Voici comment placer des images sur la page :

  1. Bouton Image dans l’éditeur – insère un <img> avec srcset, sizes, largeur/hauteur, texte alternatif et loading="lazy" ; pour JPEG/PNG dans un <picture> avec des versions WebP (voir ci-dessous).

  2. Balise de template – reste à jour si le texte alternatif ou le fichier change :

    {{ image(12) }}
{{ image(12, "(min-width: 900px) 50vw, 100vw") }}
{{ image(12, "100vw", "hero-bild") }}

  3. Infos sur le fichier pour vos propres constructions :

    {% with f=file(12) %}
  <div class="hero" style="background-image:url('{{ f.url }}')"></div>
{% endwith %}

Bien définir sizes : la valeur indique au navigateur la largeur à laquelle l’image s’affiche sur la page. 100vw pour toute la largeur, (min-width: 960px) 50vw, 100vw pour une image qui occupe la moitié de la largeur à partir du bureau. La boîte de dialogue d’image propose des modèles.

Les textes alternatifs décrivent l’image pour les lecteurs d’écran et les moteurs de recherche. Gérez-les dans le gestionnaire de fichiers – image() les reprend automatiquement.

WebP et tailles via l’URL

Pour chaque JPEG et PNG – l’original et toutes les variantes –, il existe automatiquement une version WebP, généralement environ deux fois plus légère. image() et la boîte de dialogue d’image placent donc l’image dans un <picture> : les navigateurs qui prennent en charge WebP (tous les navigateurs actuels) chargent le fichier WebP, tous les autres le <img> habituel :

<picture>
  <source type="image/webp" srcset="/media/2026/10/foto-ab12-320w.jpg.webp 320w, …, /media/2026/10/foto-ab12.jpg.webp 1600w" sizes="100vw">
  <img src="/media/2026/10/foto-ab12.jpg" srcset="…" sizes="100vw" width="1600" height="900" alt="…" loading="lazy" decoding="async">
</picture>

Le fichier WebP porte le nom de l’image suivi de .webp et est créé au premier appel (une seule fois, en une fraction de seconde), puis il est enregistré comme fichier à côté de l’original – y compris pour les images déjà existantes, sans que vous ayez à faire quoi que ce soit. Si une image est remplacée (réimportation), il est recréé.

Pour votre propre HTML et CSS, il existe des paramètres d’URL :

URL renvoie
/media/…/foto.jpg?w=500 la plus petite variante d’au moins 500 px de large (ici 640 px), sinon l’original
/media/…/foto.jpg?format=webp la version WebP de l’original
/media/…/foto.jpg?w=500&format=webp les deux combinés

w choisit toujours l’une des largeurs fixes (320, 640, 960, 1280, 1920) – aucune taille arbitraire n’est générée, afin que personne ne puisse remplir l’espace de stockage. Dans file(), le srcset WebP se trouve sous .webp_srcset. L’export statique contient les fichiers WebP utilisés.

Fichiers privés

Un fichier peut être privé : les visiteurs du site ne le voient pas – /media/… leur répond « introuvable » (404), comme si le fichier n’existait pas. Cela vaut pour l’original, toutes les variantes d’image et les versions WebP. Peuvent le voir :

  • les utilisateurs connectés – dans l’admin (session) et avec un token d’API, y compris en lecture seule (Authorization: Bearer … ou ?token=…),
  • toute personne disposant d’un lien signé.

C’est prévu pour des PDF confidentiels, des ébauches ou du matériel que vous envoyez à des clients par lien.

Basculer : sous Fichiers, cliquez sur le fichier et activez Privé à droite – l’effet est immédiat. Pour téléverser directement en privé, cochez Privé à côté de Téléverser. Les fichiers privés portent un cadenas avec « Privé » dans la grille ; les dialogues de sélection (insérer une image, lier un fichier) affichent une remarque pour eux.

Liens signés : pour un fichier privé, choisissez la validité sous l’interrupteur (1 heure, 1 jour, 7 jours, 30 jours) puis cliquez sur Copier le lien. L’adresse complète se trouve alors dans le presse-papiers, et le message indique la date d’expiration. Le lien ressemble à ceci : /media/2026/10/offre-ab12.pdf?exp=…&sig=… – il vaut pour le fichier avec ses variantes et versions WebP et ne peut être ni prolongé ni transféré à d’autres fichiers. Les liens ne peuvent pas être révoqués individuellement : les signatures restent valables jusqu’à leur expiration, même si vous rendez entre-temps le fichier public puis à nouveau privé. Choisissez donc une validité courte. Les réponses pour les fichiers privés ne sont pas mises en cache (Cache-Control: private, no-store) ni indexées (X-Robots-Tag: noindex), et les téléchargements ne comptent pas dans les statistiques.

Aperçu : dans l’aperçu de l’éditeur de pages, avec ?preview=1 et dans les liens d’aperçu, les images privées apparaissent quand même – image(), file() (.url, .srcset, .webp_srcset), l’icône du site et l’image d’aperçu y renvoient des adresses signées (valables environ une à deux heures). Sur la page en ligne, les adresses restent non signées : les visiteurs ne voient donc pas l’image. file(ID).private indique si un fichier est privé, par exemple pour n’afficher un lien que pour les fichiers publics :

{% with f=file(12) %}{% if not f.private %}<a href="{{ f.url }}">{{ f.name }}</a>{% endif %}{% endwith %}

Limite : seules les adresses issues de image()/file() sont signées. Les chemins écrits à la main dans le HTML (<img src="/media/…">, y compris depuis le dialogue d’image sans Insérer comme balise de template) restent tels quels – l’image manque alors dans l’aperçu. Pour les images privées, utilisez donc la balise de template (le dialogue d’image la présélectionne pour les fichiers privés). L’export statique laisse toujours de côté les fichiers privés.