Knowledge base
1000 FAQs, 500 tutorials and explanatory videos. Here, there are only solutions!
This guide is about Infomaniak Site Creator, an Infomaniak tool for website creation that includes a media library for your media files (images, videos, documents, etc.).
Accessing Files
To access Site Creator:
- Log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Firefox.
- Click on the icon at the top right of the interface (or navigate through the left side menu, for example).
- Select Hosting (in the Web & Domain section).
- Click directly on the name of the relevant object in the displayed table.
- Click on Site Creator in the left-side menu.
- Click on Customize my site.
The media library can be accessed from the lower part of the left-side menu under Files:
These media files will be available to you when you edit your pages and want to insert content.
Organize Your Files, Folders, and Subfolders
Keep in mind that you cannot move or rename files.
You cannot delete a folder if it's not completely empty.
Therefore, plan the organization of your media files and their structure before you start creating your website.
Create a New Folder
Use the â‹® action menu at the bottom right of the window:
Upload a New File to the Library
Click on Upload a file to browse your hard drive and upload the desired files:
Common image formats are supported (webp, jpg, jpeg, png, gif, svg, etc.), as well as video formats (mp4, mov, etc.). You can also upload other file types (zip, pdf, etc.) to make them available to visitors using the File Download module, for example.
Open the Image Editor
Hover over an image in the library and click on the pencil icon to access the image editor:
Search for and Use Royalty-Free Images
In the left sidebar of the library, there is a menu item that leads to royalty-free stock images that you can insert into your library to enhance your site:
Protect Your Content
Click on Settings in the left sidebar and then on General Settings.
At the bottom, there is an option that, when enabled, prevents visitors from right-clicking on your site.
Troubleshooting Image/Files Upload
Try to upload the lightest possible JPG or PNG images; there's no need to upload images with a width greater than 1000 pixels.
Make sure your files are not in "300DPI" resolution or higher; you don't need this for your website; it's only for printing purposes.
If you're trying to upload files directly from your camera, try resizing them before uploading; from your iPhone, it might be in HEIF/HEIC format, which is not supported - try converting it to JPG first.
This guide helps you protect against hotlinking on Infomaniak Web Hosting.
Preamble
Hotlinking, also known as "leeching" or "bandwidth theft," occurs when a website directly embeds resources (such as images, videos, or audio files) hosted on another site, without permission from the latter. This means that the remote site is used to display content on the hotlinking site, which can result in unauthorized use of resources and bandwidth consumption for the owner of the remote site.
Preventing Hotlinking
Content owners can implement measures to prevent hotlinking, such as rules in the .htaccess file at the root of the website to block requests from specific sites or redirect to a replacement image:
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/replacementimage.png [NC,R,L]
Replace "infomaniak.com" above with your site's address.
Remove the 3 google/bing/yahoo lines if you do not want these 3 sites to be allowed to display your images.
This guide explains how to insert an image, logo, watermark, or watermark on your video streaming broadcasts to strengthen your brand image and protect your content from copying or potential misuse.
Preamble
There are two ways to overlay your logo on your broadcasts:
- Overlaying a logo via the player (free): the logo is overlaid on the video and will not be visible if the stream is embedded outside of the player
- Embedding the logo via transcoding (paid option): the logo is embedded in the video and will be visible in all cases; this case requires complete re-encoding of the stream(s) by a transcoding server, which explains the cost of this method
In both cases, it is possible to customize the following settings:
- position of the logo (in one of the four corners of the player, spacing from the edge, etc.)
- size of the logo (e.g., a logo at 50% will be twice as small)
- We recommend using the native size to optimize loading and rendering quality
- In the case of video transcoding, the logo size is calculated relative to the source video (or maximum quality); the logo will be automatically resized if lower qualities are present to maintain a consistent ratio
- opacity of the logo
1. Overlaying a logo via the player (free)
For this:
- Log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Edge
- Click on the icon in the top right corner of the interface (or navigate through the left side menu)
- Choose Video Streaming (Streaming universe)
- Click on the relevant stream
- Click on Integration and then on Players from the left menu
- Click on the player to customize
- Go to the Appearance tab
- Add the desired logo in png, jpg, or gif (non-animated) format
2. Activate the watermark option (paid option)
For this:
- Log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Edge
- Click on the icon in the top right corner of the interface (or navigate through the left side menu)
- Choose Video Streaming (Streaming universe)
- Click on the relevant stream
- Click on Settings and then on Options from the left menu
- Enable the Watermark option
- Add the desired logo in png, jpg, or gif (non-animated) format
This guide presents several examples of using Varnish on Infomaniak Managed Cloud Server.
⚠️ For additional help, contact a partner or submit a tender — also read the role of the host
Varnish Configuration
This is what a basic configuration file could look like with some common cases and different actions/rules in a single example:
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 beginning
# '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 invalidating 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 sets an "uncacheable" header, do not store the response in cache
if (beresp.http.uncacheable) {
set beresp.uncacheable = true;
}
}
Purging from the CLI Interface
From here, the rules outlined in the above configuration work on all requests. So, if the configured site is "domain.xyz," you can simply use the CLI tool "curl" and do the following:
$ curl -X PURGE https://domain.xyz/
Error 200 Purged
Purged
Guru Meditation:
XID: 2
Varnish cache server
And there, the home page has been purged. Or to purge another URL, simply point the request to it:
$ curl -X PURGE https://domain.xyz/some_path/some_file.html
Error 200 Purged
Purged
Guru Meditation:
XID: 4
Varnish cache server
Or, as indicated in the VCL configuration, purge all images:
$ curl -X PURGEALL https://domain.xyz/images
Error 200 Purged images.
Purged images.
Guru Meditation:
XID: 32770
Varnish cache server
Purging from a CMS
It's a bit more challenging to illustrate this case because there are many ways to manage caching from a backend. In the above configuration example, a check on the "Uncacheable" header is added, which disables caching. With this option, any CMS could simply set this header on the response to disable caching for that request, for example.
From any PHP code and with the above configuration, you can simply send an HTTP request and use this snippet to perform a cache PURGE:
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);
}
Learn More
Useful links regarding the Varnish Configuration Language (VCL) for controlling request handling, routing, caching, and several other aspects: