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 viewers array.
data-d8s-id refers to the id (SKU) of the product as it was saved in Dimensions (Product)
data-d8s-preset refers to the name of the preset as it was saved in Dimensions (Preset)
data-d8s-name refers to the display name was it was saved in Dimensions (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 in 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 viewers array.
Including a video is almost identical to the image example, only adding the attribute data-d8s-typeset to “video”.
To globally set Video player related properties, you can add the following config to the Dimensions 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 viewers array.
Here, the attribute data-d8s-typeis set to “3d” to render the Dimensions 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.