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 with ProductMedia.isPhoto and the image is accessed with the ProductMedia.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 with ProductMedia.isVideo and the video is accessed with the ProductMedia.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 with ProductMedia.is360. The individual frames for each rotation can be accessed with the ProductMedia.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>