The tag searches for specific data attributes in your page’s HTML.
🖼️ Images
Include an image in your website like this:
<div
class="product-image"
data-d8s-id="blue-123-3"
data-d8s-preset="shoes"
data-d8s-name="front"
data-d8s-url-params="w_600,ar_2"
></div>
Make sure that in the tag initialization config, you pass “IMAGE” into the viewer's array.
data-d8s-id refers to the ID (SKU) of the product as it was saved in Cloudinary 3D (Product)
data-d8s-preset refers to the name of the preset as it was saved in Cloudinary 3D (Preset)
data-d8s-name refers to the display name was it was saved in Cloudinary 3D (Template)
data-d8s-url-params refers to additional Cloudinary transformations that will be added to the resulting URL.
Notice that you don’t need data-d8s-type here. Image is the default.
🎞️ Video
Include a video on your website like this:
<div
class="product-image hide"
data-d8s-id="blue-123-3"
data-d8s-type="video"
data-d8s-preset="shoes"
data-d8s-name="spin"
data-d8s-url-params="w_600,ar_2"
></div>
Make sure that in the tag initialization config, you pass “VIDEO” into the viewer's array.
Including a video is almost identical to the image example, only adding the attribute data-d8s-type set to “video”.
To globally set Video player related properties, you can add the following config to the Cloudinary 3D tag init:
const d8sApi = initDimensions({
account: "",
viewers: ["IMAGE", "VIDEO", "3D"],
videoViewer: {
params: {
autoplay: true,
volume: 0,
loop: true
}
}
});These will be added to every instance of video.
🧊 3D Viewer
Include a 3D viewer in your website like this:
<div
id="three-d-viewer"
class="d8s-container"
data-d8s-type="3d"
data-d8s-id="blue-123-3"
></div>
Make sure that in the tag initialization config, you pass “3D” into the viewer's array.
Here, the attribute data-d8s-type is set to “3d” to render the Cloudinary 3D viewer with the model associated with the product.
For the 3D viewer to load, It’s script should be included before the tag script:
<script src="https://dimensions-3d-viewer.cloudinary.com/latest/all.js"></script>
<script src="https://dimensions-tag.cloudinary.com/latest/all.js"></script>
For more details on integrating the 3D Viewer see the Getting started article.