Adding photos, videos & 360° media to products
Media is a product's most compelling selling point. Evance offers product managers the ability to maintain any number of photos, videos and photo frame based 360° interactivity.
You gain access to all media types using the product.media()
method which contains an Array of
ProductMedia objects.
<div class="product-media">
<?ev for (var media of product.media()) { ?>
...
<?ev } ?>
</div>
Identifying media types
There are three media types:
-
Photo
This is the simplest media type and is generally a JPG or a PNG. The simplest way to render a Photo is with the<ev:img>
tag.
You can identify Photos withProductMedia.isPhoto
and the image is accessed with theProductMedia.image
property. -
Video
May be a YouTube, Vimeo or self-hosted video within the Media Library. The simplest way to render a Video is with the<ev:video>
tag.
You can identify Videos withProductMedia.isVideo
and the video is accessed with theProductMedia.video
property. -
360° frames
A series of photo frames. The simplest way to render the frames for this media type is with the<ev:360>
tag.
You can identify 360° frames withProductMedia.is360
. The individual frames for each rotation can be accessed with theProductMedia.frames()
method.
Regardless of its type, all product media types have a cover photo which can be accessed with the ProductMedia.image
property.
<div class="product-media">
<?ev for (var media of product.media()) { ?>
<!-- Photo -->
<?ev if (media.isPhoto) { ?>
<ev:img src="{{ media.image }}" />
<?ev } ?>
<!-- Video -->
<?ev if (media.isVideo) { ?>
<ev:video src="{{ media.video }}" />
<?ev } ?>
<!-- 360 -->
<?ev if (media.is360) { ?>
<ev:360 src="{{ media.frames().join(', ') }}" />
<?ev } ?>
<?ev } ?>
</div>
Identifying a product's primary image
A product's primary image is available from the Product.thumbnail
property, but is also identified
within the list of product media with the ProductMedia.isPrimary
property.
<div class="product-media">
<?ev for (var media of product.media()) { ?>
<div class="{{ media.isPrimary ? 'is-primary' : '' }}">
...
</div>
<?ev } ?>
</div>
Titles & descriptions
Each product media item may have its own title and description these are accessed via ProductMedia.title
and
ProductMedia.description
respectively. In most themes only the title is used as an alt
attribute (illustrated below).
<div class="product-media">
<?ev for (var media of product.media()) { ?>
<!-- Photo -->
<?ev if (media.isPhoto) { ?>
<ev:img src="{{ media.image }}" alt="{{ media.title.escape() }}" />
<?ev } ?>
<?ev } ?>
</div>