Cincopa Embed Guide

Introduction

Cincopa offers multiple methods to embed galleries or single assets into your webpage. This guide provides structured details on supported embed methods, including code snippets and usage guidelines.

1. Standard Embed Code

The easiest way to embed a gallery using a standard embed method:

<div id="cincopa_748aa8">...</div>
<script type="text/javascript">
    var cpo = []; cpo["_object"] = "cincopa_748aa8"; cpo["_fid"] = "AIEAPxOcrJt4";
    var _cpmp = _cpmp || []; _cpmp.push(cpo);
    (function() {
        var cp = document.createElement("script"); cp.type = "text/javascript";
        cp.async = true; cp.src = "https://rtcdn.cincopa.com/libasync.js";
        var c = document.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(cp, c);
    })();
</script>

2. JavaScript Initialization (`cincopa.boot_gallery`)

Another method is using cincopa.boot_gallery to initialize the gallery dynamically:

<div id="cincopa_748aa8">...</div>
<script src="https://rtcdn.cincopa.com/libasync.js" type="text/javascript"></script>
<script>
    cincopa.boot_gallery({"_object": "cincopa_748aa8", "_fid": "AMLA-0Ocy3Nd"});
</script>

For a single asset, use:

cincopa.boot_gallery({"_object": "cincopa_748aa8", "_fid": "A4HAcLOLOO68!AcEDQoI4gGxV"});

Use this method to display a responsive thumbnail that opens a gallery or asset in a popup:

<div class="cincopa_popup cincopa_fid_AIEAPxOcrJt4" style="position: relative;">
    <img src="https://mediacdn.cincopa.com/v2/878920/1242!id1DAI-asDgtXA/138/marketersready.mp4" style="width: 100%; height: 100%;">
</div>
<script src="https://rtcdn.cincopa.com/libasync.js" type="text/javascript"></script>

Customization:

Thumbnails can be dynamically generated using:
```
https://rtcdn.cincopa.com/thumb.aspx?fid=GALLERY_ID!ASSET_ID&size=SIZE
```
Sizes available: small, medium, large
You can fully customize the thumbnail appearance using CSS:

Example with custom play button:

<div class="cincopa_popup cincopa_fid_AIEAPxOcrJt4" style="position: relative;">
    <img src="https://mediacdn.cincopa.com/v2/878920/1242!id1DAI-asDgtXA/138/marketersready.mp4" style="width: 100%; height: 100%;">
    <span class="cincopa-play-btn"></span>
</div>
<style>
  .cincopa_popup img {
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
  }
  .cincopa_popup .cincopa-play-btn {
      background: rgba(0, 134, 207, 0.7);
      border-radius: 50%;
  }
</style>
<script src="https://rtcdn.cincopa.com/libasync.js" type="text/javascript"></script>

4. Fixed-Size Thumbnail Link

For a fixed-size thumbnail (same customization applies as for responsive thumbnails):

<div class="cincopa_popup cincopa_fid_AIEAPxOcrJt4" style="width: 300px; height: 150px;">
    <img src="https://mediacdn.cincopa.com/v2/878920/1242!id1DAI-asDgtXA/138/marketersready.mp4" style="width: 100%; height: 100%;">
</div>
<script src="https://rtcdn.cincopa.com/libasync.js" type="text/javascript"></script>

To display the gallery as a clickable text link:

<div class="cincopa_popup cincopa_fid_AIEAPxOcrJt4">
    <a>Open Gallery</a>
</div>
<script src="https://rtcdn.cincopa.com/libasync.js" type="text/javascript"></script>

6. Responsive Iframe Embed

A fully responsive iframe:

<div class="cincopa_responsive_iframe" style="padding:56.25% 0 0 0; position:relative;">
    <div class="cincopa_responsive_wrapper" style="height:100%; left:0; position:absolute; top:0; width:100%;">
        <iframe width="100%" height="100%" src="https://rtcdn.cincopa.com/iframe.aspx?fid=AIEAPxOcrJt4" frameborder="0" allowfullscreen scrolling="no" allow="autoplay *; fullscreen *"></iframe>
    </div>
</div>

To embed a single asset, update fid:

fid=GALLERY_ID!ASSET_ID

Important Notes

Ensure https://rtcdn.cincopa.com/libasync.js is included in your page.
Replace GALLERY_ID and ASSET_ID with actual IDs.
Visit the Cincopa Documentation for more details.

This guide ensures all essential embedding methods are structured clearly for easy reference.

Cincopa Embed Guide

Introduction

1. Standard Embed Code

2. JavaScript Initialization (cincopa.boot_gallery)

3. Responsive Thumbnail (Popup Gallery/Asset)