Avec la solution Tikee d'Enlaps et l'application web myTikee dédiée au timelapse, vous pouvez facilement intégrer votre projet timelapse à votre site web en un seul clic. Que vous souhaitiez ajouter une vidéo panoramique, une comparaison avant-après ou une galerie d'images, vous avez accès à des liens iframe personnalisables. Ce tutoriel vous guide à travers les étapes pour personnaliser ces iframes afin d'optimiser l'affichage de votre projet timelapse.

Accéder au code d'intégration Iframe

Pour trouver votre code iframe, rendez-vous sur la page d'accueil de vos projets :

1. Allez dans Projet.

2. Cliquez sur Partager.

1. Modifier la taille de l'Iframe

Le code d'intégration de l'iFrame peut être facilement personnalisé directement depuis le code lui-même. Souvent, lorsqu'une galerie est intégrée avec une iframe, une barre de défilement apparaît par défaut si la galerie est plus grande que l'iframe. Afin d'éviter cela, deux options peuvent être ajoutées pour ajuster facilement l'iframe.

Une option consiste à modifier la hauteur et la largeur de l'iframe pour les faire correspondre à la galerie en changeant les valeurs de height et width dans le code, comme indiqué ci-dessous.

<iframe src="https://staging.tikee.io/time_lapses/1879/photo_gallery/6b12e12d-5650-4aed-8495-38fee083fbba?lang=fr" allowfullscreen style="width: 900px; height: 620px; border: none;" ></iframe>

Vous pouvez également supprimer la bordure et la barre de défilement. Vous pouvez ajouter scrolling=no et frameBorder=0 au code d'intégration pour supprimer cette barre. Attention : si vous supprimez la barre de défilement de la galerie, assurez-vous de régler la hauteur de manière à ce que les boutons de contrôle ne soient pas coupés.

Pour que la vidéo s'adapte à la taille de la page, il faut ajouter ?fluid=true dans l'iframe

<iframe src="https://my.tikee.io/videos/cc3dc6e1-862b-4132-b563-61c92ce0a60a?fluid=true" style="width: 100%; height: 100%; border: none;"></iframe>

2. Personnaliser les couleurs de l'Iframe

Vous pouvez choisir les couleurs de votre iframe comme suit :

• primary_color=5f9ea0

• secondary_color=ff9800

• font_color=db0b93

Transmettez ces paramètres comme n'importe quels paramètres de requête dans une URL, séparés par & :

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=fr&primary_color=5f9ea0&secondary_color=ff9800&font_color=db0b93

Le tout ensemble :

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=fr&primary_color=5f9ea0&secondary_color=ff9800&font_color=db0b93" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

3. Choisir les types de vue dans l'Iframe

Vous pouvez choisir les types de vue que vous souhaitez dans votre iframe comme suit :

default_tab : “single”, “compare”, “immersive”

• single : mode panoramique classique

• compare : vue de comparaison avant-après

• immersive : vue immersive avec reprojection

allowed_viewer_types : single,compare,immersive séparés par une virgule.

/!\ Ces paramètres fonctionnent ensemble, vous ne pouvez pas utiliser allowed_viewer_types sans default_tab.

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=fr&default_tab=immersive&allowed_viewer_types=single,compare,favorite,video

Le tout ensemble :

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=fr&default_tab=immersive&allowed_viewer_types=single,compare,favorite,video" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

4. Masquer les boutons de téléchargement

Vous pouvez masquer les boutons de téléchargement dans votre iframe comme suit :

• hide_downloads : “true”, “false”

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=fr&hide_downloads=true

Le tout ensemble :

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=fr&hide_downloads=true" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

5. Choisir la langue

Vous pouvez choisir la langue du visualiseur de votre iframe en modifiant le paramètre « lang ».

Valeurs acceptées :

lang=en
lang=fr
lang=de
lang=es
lang=ar

6. Rotation de l'image

Vous pouvez faire pivoter les images affichées par l'iframe en ajoutant ce paramètre à l'URL :

• rotate : "true" ou "false".

Lorsqu'il est activé, les images pivotent d'un angle fixe de 180°. Par défaut, les images ne sont pas pivotées.

Exemple :

<iframe src="https://my.tikee.io/{...}?lang=fr&rotate=true" allowfullscreen style="width: 900px; height: 620px; border: none;"></iframe>

<iframe src="https://my.tikee.io/{...}?lang=fr&rotate=true" allowfullscreen style="width: 900px; height: 620px; border: none;"></iframe>

<iframe src="https://my.tikee.io/{...}?lang=fr&rotate=true" allowfullscreen style="width: 900px; height: 620px; border: none;"></iframe>

La personnalisation des iframes de vos projets timelapse Tikee est un processus simple qui vous permet de contrôler l'apparence et les fonctionnalités de vos galeries sur votre site web. En ajustant les dimensions, les couleurs, les types de vue et d'autres paramètres, vous pouvez intégrer harmonieusement votre contenu timelapse dans votre stratégie de communication en ligne.

Pour plus d'informations sur la solution Tikee et ses applications, visitez notre site web.