Embarquer la visionneuse sur un autre site

En tant qu’iframe

La manière la plus facile d’embarquer la visionneuse est d’utiliser <iframe>.

Ajoutez le code HTML suivant à votre site:

<iframe
    src="{BASE_URL}/s/{SITE_SLUG}/octopusviewer/viewer/embed?octopusviewer_title={TITLE}&{MEDIA_QUERY}"
    height="450px"
    width="100%"
    allow="fullscreen"
    sandbox="allow-same-origin allow-scripts"
></iframe>

Puis remplacez:

{BASE_URL} par l’URL de base d’Omeka,
{MEDIA_QUERY} par une liste de paramètres d’URL séparés par & (ça définira quels médias sont affichés),
{SITE_SLUG} par l’identifiant d’un site Omeka S existant, et
{TITLE} par le texte à afficher dans l’en-tête de la visionneuse.

Par exemple:

<iframe
    src="https://omeka.example.com/s/home/octopusviewer/viewer/embed?octopusviewer_title=OctopusViewer&item_id=23"
    height="450px"
    width="100%"
    allow="fullscreen"
    sandbox="allow-same-origin allow-scripts"
></iframe>

En tant que composant web

Avertissement

Cette fonctionnalité est expérimentale

Si les iframes ne peuvent pas être utilisées, la visionneuse peut aussi être embarquée sur un autre site en tant que composant web.

Ajoutez le code HTML suivant à votre site:

<script src="{BASE_URL}/modules/OctopusViewer/asset/js/octopusviewer-viewer.js"></script>
<octopusviewer-viewer
    media-query="{MEDIA_QUERY}"
    site-slug="{SITE_SLUG}"
    style="display:block; height: 50vmin; min-height: 450px"
>
    <span slot="title">{TITLE}</span>
</octopusviewer-viewer>

Puis remplacez:

{BASE_URL} par l’URL de base d’Omeka,
{MEDIA_QUERY} par une liste de paramètres d’URL séparés par & (ça définira quels médias sont affichés),
{SITE_SLUG} par l’identifiant d’un site Omeka S existant, et
{TITLE} par le texte à afficher dans l’en-tête de la visionneuse.

Par exemple:

<script src="https://omeka.example.com/modules/OctopusViewer/asset/js/octopusviewer-viewer.js"></script>
<octopusviewer-viewer
    media-query="item_id=23"
    site-slug="home"
    style="display:block; height: 50vmin; min-height: 450px"
>
    <span slot="title">All media of item #23</span>
</octopusviewer-viewer>

Note

Le style est mis en ligne par commodité, mais vous pouvez le retirer et utiliser vos propres styles

Attributs optionnels

L’élément HTML octopusviewer-viewer comprend également les attributs suivants:

show-media-selector

Valeurs possibles: auto (par défaut), always, never

Contrôle si le sélecteur de médias (panneau de gauche) est affiché ou non. Si auto, le sélecteur de média sera affiché seulement s’il y a plus d’un média à afficher. Les autres valeurs peuvent être utilisées si vous voulez que le sélecteur de média soit toujours (always) ou jamais (never) affiché.

show-media-info

Valeurs possibles: always (default), never

Contrôle si les infos du média (panneau de droite) sont affichées ou non. Si always, elles seront toujours affichées. Si never, elles ne seront jamais affichées.