Base de connaissances
1 000 FAQ, 500 tutoriels et vidéos explicatives. Ici, il n'y a que des solutions !
Ce guide concerne Site Creator, outil Infomaniak pour la création de site proposant entre autre une bibliothèque pour vos médias (images, vidéos, documents, etc.).
Accéder aux fichiers
Pour accéder à Site Creator :
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Firefox
- cliquer sur l'icône en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir HĂ©bergement (univers Web & Domaine)
- cliquer directement sur le nom de l'objet concerné dans le tableau qui s'affiche
- cliquer sur Site Creator dans le menu latéral gauche
- cliquer sur Personnaliser mon site
La bibliothèque est accessible depuis la partie inférieure du menu latéral gauche, sous Fichiers:
Ces médias seront à votre disposition lorsque vous éditerez vos pages et souhaiterez insérer du contenu.
Organisez vos fichiers, dossiers et sous-dossiers
Attention vous ne pouvez pas:
- déplacer des fichiers/dossiers
- renommer des fichiers/dossiers
- supprimer un dossier si celui-ci n'est pas entièrement vide
Créer un nouveau dossier
Utiliser le menu d'action â‹® en bas Ă droite de la fenĂŞtre:
Charger un nouveau fichier dans la bibliothèque
Cliquer sur Envoyer un fichier pour parcourir votre disque dur et charger les fichiers désirés:
Les formats d'image habituels sont supportés (webp, jpg, jpeg, png, gif, svg, etc.), idem pour les vidéos (mp4, mov, etc.) et vous pouvez également charger des fichiers (zip, pdf, etc.) afin de p.ex les mettre à disposition des visiteurs par le module Téléchargement de fichier.
Compresser une image
L'option Compresser une image depuis la bibliothèque génère l'erreur de clé API TinyPNG:
Pour éviter cela, obtenir une clé API TinyPNG sur leur site et la renseigner sous Applications > TinyPNG de SiteCreator:
Ouvrir l'Ă©diteur d'image
Survoler une image de la bibliothèque et cliquer sur le menu d'action ⋮ pour accéder à l'éditeur d'image:
Rechercher et utiliser des images libres
Dans la barre latérale gauche de la bibliothèque se trouve un élément de menu conduisant à des images stock (banque d'images) libres de droit que vous pouvez insérer dans votre bibliothèque pour agrémenter votre site:
Protéger votre contenu
Cliquer sur Paramètres dans la barre latérale gauche puis sur Paramètres généraux.
En bas se trouve une option qui une fois activée interdit le clic droit des visiteurs sur votre site.
Résoudre un problème d'upload
Essayez de télécharger des JPG ou PNG les plus légers possible ; il n'est pas nécessaire de télécharger des images d'une largeur supérieure à 1000 pixels.
Assurez-vous que vos fichiers ne soient pas en résolution "300DPI" ou supérieure, vous n'en avez pas besoin sur votre site Web, c'est uniquement pour l'impression.
Si vous essayez de télécharger des fichiers directement depuis votre appareil photo, essayez de les redimensionner avant de les télécharger ; depuis votre iPhone, elle peut être au format HEIF/HEIC, qui n'est pas pris en charge - essayez de la convertir en JPG d'abord.
Ce guide explique comment insérer une image, un logo, un filigrane, un watermark, sur vos diffusions de Streaming vidéo afin de renforcer votre image de marque et protéger votre contenu contre la copie ou d'éventuels détournements.
Préambule
Il existe deux manières d'incruster votre logo à vos diffusions :
- superposer un logo via le player (gratuit): le logo est superposé sur la vidéo et ne sera pas visible si le flux est intégré en dehors du player
- incruster le logo via un transcodage (option payante): le logo est incrusté dans la vidéo et sera visible dans tous les cas de figure ; ce cas nécessite le réencodage complet du ou des flux par un serveur de transcodage, ce qui explique le coût de cette méthode
Dans les deux cas de figure, il est possible de personnaliser les paramètres suivants:
- position du logo (dans l'un des quatre coins du player, espacement depuis le bord, etc.)
- taille du logo (p.ex un logo Ă 50% sera deux fois plus petit)
- nous vous recommandons d'utiliser la taille native pour optimiser le chargement et la qualité du rendu
- dans le cas du transcodage vidéo, la taille du logo est calculée par rapport à la vidéo source (ou qualité maximum) ; le logo sera redimensionné automatiquement si des qualités inférieurs sont présentes afin de conserver un ratio identique
- opacité du logo
1. Superposer un logo via le player (gratuit)
Pour cela:
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Edge
- cliquer sur l'icône en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir Streaming vidéo (univers Streaming)
- cliquer sur le flux concerné
- cliquer sur Intégration puis sur Players depuis le menu à gauche
- cliquer sur le player Ă personnaliser
- aller dans l'onglet Apparence
- ajouter le logo souhaité au format png, jpg ou gif (non animé)
2. Activer l'option watermark (option payante)
Pour cela
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Edge
- cliquer sur l'icône en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir Streaming vidéo (univers Streaming)
- cliquer sur le flux concerné
- cliquer sur Paramètres puis sur Options depuis le menu à gauche
- activer l'option Watermark
- ajouter le logo souhaité au format png, jpg ou gif (non animé)
Ce guide vous permet de vous prémunir contre le hotlinking sur des Hébergement Web Infomaniak.
Préambule
Le hotlinking, également connu sous le nom de "leeching" ou "bandwidth theft", se produit lorsqu'un site Web intègre directement des ressources (telles que des images, des vidéos ou des fichiers audio) hébergées sur un autre site, sans autorisation de ce dernier. Cela signifie que le site distant est utilisé pour afficher le contenu sur le site hotlinking, ce qui peut entraîner une utilisation non autorisée des ressources et une consommation de bande passante chez le propriétaire du site distant.
EmpĂŞcher le hotlinking
Les propriétaires de contenu peuvent mettre en place des mesures pour prévenir le hotlinking, telles que des règles dans le fichier .htaccess à la racine du site Web pour bloquer les requêtes provenant de sites spécifiques ou pour rediriger vers une image de remplacement:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?infomaniak.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|svg)$ https://infomaniak.com/imagederemplacement.png [NC,R,L]
Remplacer "infomaniak.com" ci-dessus par l'adresse de votre site.
Retirer les 3 lignes google/bing/yahoo si vous ne souhaitez pas que ces 3 sites soient autorisés à afficher vos images.
Ce guide présente plusieurs exemples d'utilisation de Varnish sur Serveur Cloud Infomaniak.
⚠️ Pour de l'aide supplémentaire contacter un partenaire ou remplir un appel d'offres — lire aussi le rôle de l'hébergeur
Configuration de Varnish
Voici à quoi pourrait ressembler un fichier de configuration de base avec quelques cas courants et différentes actions/règles dans un seul exemple:
vcl 4.0;
# This should not be modified
backend default {
.host = "127.0.0.80";
.port = "80";
}
# An ACL is an "Access control list", which defines a list of IPs, later to be reused in a rule, for example "Who can purge the cache"
acl purge {
"localhost";
"1.2.3.4"; # My Home IP
"42.42.42.0"/24; # My company's public IP range
! "42.42.42.7"; # Except some annoying colleague
}
# Happens when varnish first gets the request, before sending it to the backend
sub vcl_recv {
# Allow purging
if (req.method == "PURGE") {
# Not from an allowed IP? Then die with an error.
if (!client.ip ~ purge) { # purge is the ACL defined at the begining
# 'synth' is a function that returns a page (without asking the backend) that will not get cached.
return (synth(405, "This IP is not allowed to send PURGE requests."));
}
# If you got to this stage (and didn't error out above), purge the cached result
return (purge);
}
# Allow purging all images, for example
if (req.method == "PURGEALL" && req.url == "/images") {
if (!client.ip ~ purge) {
return (synth(405, "This IP is not allowed to send PURGE requests."));
}
# The 'ban' function is a built-in that allows to invalidates all objects in cache that match the given expression
ban("req.url ~ \.(jpg|png|gif|svg)$");
return (synth(200, "Purged images."));
}
# Pages with authorization are not cached
if (req.http.Authorization) {
# With the 'pass' action, the request will be directly passed from the backend without entering the cache
return (pass);
}
}
# Happens after we have read the response headers from the backend.
# Here you clean the response headers, define if the request must get cached, for how much time, etc.
sub vcl_backend_response {
# Cache all images for 1 day by default
if (beresp.http.content-type ~ "image") {
set beresp.ttl = 1d;
}
# If server set a "uncacheable" header, do not store the response in cache
if (beresp.http.uncacheable) {
set beresp.uncacheable = true;
}
}
Purge Ă partir de l'interface CLI
À partir de là , les règles énoncées dans la configuration ci-dessus fonctionnent sur toutes les demandes, donc si le site configuré est "domain.xyz", vous pouvez simplement utiliser l'outil CLI "curl" et faire ce qui suit:
$ curl -X PURGE https://domain.xyz/
<!DOCTYPE html>
<html>
<head>
<title>200 Purged</title>
</head>
<body>
<h1>Error 200 Purged</h1>
<p>Purged</p>
<h3>Guru Meditation:</h3>
<p>XID: 2</p>
<hr>
<p>Varnish cache server</p>
</body>
</html>
Et là , la page d'accueil a été purgée. Ou pour purger une autre URL, il suffit de faire pointer la requête vers cette dernière:
$ curl -X PURGE https://domain.xyz/some_path/some_file.html
<!DOCTYPE html>
<html>
<head>
<title>200 Purged</title>
</head>
<body>
<h1>Error 200 Purged</h1>
<p>Purged</p>
<h3>Guru Meditation:</h3>
<p>XID: 4</p>
<hr>
<p>Varnish cache server</p>
</body>
</html>
Ou, comme indiqué dans la configuration VCL, purger toutes les images:
$ curl -X PURGEALL https://domain.xyz/images
<!DOCTYPE html>
<html>
<head>
<title>200 Purged images.</title>
</head>
<body>
<h1>Error 200 Purged images.</h1>
<p>Purged images.</p>
<h3>Guru Meditation:</h3>
<p>XID: 32770</p>
<hr>
<p>Varnish cache server</p>
</body>
</html>
Purge Ă partir d'un CMS
C'est un peu plus difficile d'illustrer ce cas car il existe de nombreuses façons de gérer la mise en cache depuis un backend. Dans l'exemple de configuration ci-dessus, un contrôle sur l'en-tête "Uncacheable" est ajouté, qui désactive la mise en cache. Avec cette option, n'importe quel CMS pourrait simplement définir cet en-tête sur la réponse pour désactiver la mise en cache de cette requête p.ex.
A partir de n'importe quel code PHP et avec la configuration ci-dessus, vous pouvez simplement envoyer une requĂŞte HTTP et utiliser cet extrait pour effectuer un PURGE du cache:
<?php
if ($curl = curl_init("http://127.0.0.1/some_url")) {
curl_setopt_array($curl, [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_CUSTOMREQUEST => "PURGE",
CURLOPT_HTTPHEADER => [
"Host: {$_SERVER['HTTP_HOST']}"
]
]);
curl_exec($curl);
if (curl_getinfo($curl, CURLINFO_HTTP_CODE) == 200) {
echo "Cache purged!";
}
curl_close($curl);
}
En savoir plus
Liens utiles concernant le langage de configuration Varnish (VCL) pour contrĂ´ler le traitement des demandes, le routage, la mise en cache et plusieurs autres aspects: