Pré-requis : demandez l'activation au support
Une fois activée, cette option est paramétrable depuis l'onglet Watermark de chacune de vos salles.
Pour mettre cela en place, 4escape utilise Cloudinary pour la manipulation dynamique d'images.
Informations à prendre en compte :
La photo affichée est la dernière ajoutée sur 4escape. Si rien ne s'affiche... c'est qu'il faut en ajouter une.
Adaptez la taille de vos images (1920 x 1280 est largement suffisant pour du web)
Intégrer le cadre dans le champs "Image secondaire"
Utilisez les variables spécifiques qui seront remplacées lors de la génération de l'image
Pour afficher ou placer un élément en pourcentage, il faut utiliser des nombres inférieurs à 1 et avec virgules :
0.2pour 20%,0.01pour 1%.Il est aussi indispensable de mettre le paramètre
fl_relativepour que ces ratios soient en fonction des dimensions de la photoSi vous voulez aller plus loin vous pouvez consulter le Cookbook de Cloudinary pour avoir des idées ou encore la Documentation Cloudinary sur les images et textes (attention en anglais)
Pour éviter les caractères spéciaux : https://support.cloudinary.com/hc/en-us/articles/202521512-How-to-add-a-slash-character-or-any-other-special-characters-in-text-overlays-
Variables disponibles
Variable | Description |
{LOGO} | Référence de l'image pouvant être intégrée |
{IMG} | Référence de l'image pouvant être intégrée (seconde) |
{SCORE} | Score réalisé par les joueurs |
{TIME} | Temps réalisé par les joueurs (automatique) |
{TIMEM} | Temps réalisé par les joueurs (minutes, secondes) |
{TIMEL} | Temps réalisé par les joueurs (heures, minutes, secondes) |
{TEAMNAME} | Nom de l'équipe |
{DATE} | Date au format classique : 09/10/2020 |
{DATEL} | Date au format long : 9 octobre 2020 |
{ROOM} | Nom de la salle |
Exemples de chaines de transformation
Grâce à la chaîne de transformation, vous allez pouvoir appliquer des modifications à l'image pour la personnaliser. Remplissez la chaîne de transformation à partir d'un des exemples ci-dessous ou à partir de vos propres idées .
Logo en bas à droite :
c_scale,g_south_east,l_{LOGO},fl_relative,w_0.1,x_0.01,y_0.02Logo en bas à gauche :
c_scale,g_south_west,l_{LOGO},fl_relative,w_0.1,x_0.01,y_0.02Logo en haut à droite :
c_scale,g_north_east,l_{LOGO},fl_relative,w_0.1,x_0.01,y_0.02Logo en haut à gauche :
c_scale,g_north_west,l_{LOGO},fl_relative,w_0.1,x_0.01,y_0.02Score en bas au milieu & Logo bas droite
c_scale,co_rgb:ffffff,fl_relative,g_south,l_text:montserrat_200_style_light_align_center:{SCORE},w_0.2,y_0.02/c_scale,g_south_east,l_{LOGO},fl_relative,w_0.1,x_0.01,y_0.02Date en bas à gauche & Logo bas droite
c_scale,co_rgb:ffffff,fl_relative,g_south_west,l_text:montserrat_200_style_light_align_center:{DATE},w_0.2,y_0.02,x_0.01/c_scale,g_south_east,l_{LOGO},fl_relative,w_0.1,x_0.01,y_0.02Logo bas droite & Image secondaire pleine largeur en haut
c_scale,g_south_east,l_{LOGO},fl_relative,w_0.1,x_0.01,y_0.02/c_scale,g_north,l_{IMG},fl_relative,w_1.0Cadre photo
Veillez à remplacer les dimensions (premier paramètre) avec celles du cadre (ici 1920 x 1280). L'image s'y adaptera.
w_1920,h_1280,c_fill,g_faces/c_scale,g_north,l_{IMG},fl_relative,w_1.0
Exemples de mise en page de WATERMARK
Exemple 1
Date en blanc, dans le coin en bas à gauche
Nom d'équipe en blanc, dans le coin en bas à droite
w_1920,h_1280,c_fill,g_faces/c_scale,g_north,l_{IMG},fl_relative,w_1.0/c_scale,co_rgb:ffffff,g_south_west,l_text:montserrat_200_style_light_align_center:{DATE},w_0.3,y_0.02,x_0.01/c_scale,g_south_east,co_rgb:ffffff,l_text:montserrat_200_style_light_align_center:{TEAMNAME},w_0.3,x_0.01,y_0.02
EXEMPLE 2
Date en blanc, en bas et au milieu
Nom d'équipe en blanc, en bas et au milieu
w_1920,h_1280,c_fill,g_faces/c_scale,g_north,l_{IMG},fl_relative,w_1.0/c_scale,co_rgb:ffffff,fl_relative,g_south,l_text:montserrat_200_style_light_align_center:{TEAMNAME},w_0.2,y_0.150/c_scale,co_rgb:ffffff,fl_relative,g_south,l_text:montserrat_200_style_light_align_center:{TIME},w_0.2,y_0.02
EXEMPLE 3
Logo en bas à droite
Nom d'équipe en bas au milieu en blanc
c_scale,g_south_east,l_{LOGO},w_0.4,x_0.01,y_0.02/c_scale,co_rgb:ffffff,fl_relative,g_south,l_text:montserrat_200_style_light_align_center:{TEAMNAME},w_0.2,y_0.05