Smart gallery

On this page

Sirv can automatically generate a gallery to display the contents of a folder. You can publish and maintain galleries with total automation. When new content is uploaded to a folder, the smart gallery automatically updates with the new content, so you can publish new assets instantly, without any coding. (Available to paid accounts only.)

Smart galleries can contain images, 360 spins or videos. Whatever content is in the folder, it will be included in the gallery. You can exclude items, if you wish, by applying a filter.

Example

To create a smart gallery, replace the trailing slash of the folder path with .view. For example, if this is your folder:

https://demo.sirv.com/Examples/b74317/

... this will be smart gallery URL:

https://demo.sirv.com/Examples/b74317.view

Embed a smart gallery in your page like this:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>
<div class="Sirv" data-src="https://demo.sirv.com/Examples/b74317.view"></div>

Here's the result:

.view files

.view files are JSONP text files, containing the filename and properties of each asset. You can see the content of the .view file by appending ?info to the URL:

https://demo.sirv.com/Examples/b74317.view?info

The contents can be returned in JSONP format, by adding a callback to the URL:

https://demo.sirv.com/Examples/b74317.view?callback=abc

.view files are generated dynamically and won't appear in your Sirv account but you can also create your own .view files and upload them to your account.

Options

All the usual Sirv Media Viewer options can be applied to smart galleries. There are options for customizing the image zoom, 360 spin videos, thumbnails and styling of the gallery. Try the interactive demo to test all the different settings and see the code required.

<div class="Sirv" data-src="https://demo.sirv.com/Examples/b74317.view" data-options="video.autoplay:true; fullscreen.native:true;"></div>

Content filtering

The gallery content is shown in alphabetical order (uppercase first). Content from any sub-folders will be shown at the end of the gallery.

You can change the content in two ways - simple ordering or advanced ordering with filters.

Simple ordering

You can use the itemsOrder option to specify which items should appear in what order. Use the interactive demo to try these options and see the code.

Possible values are:

  • zoom (zoomable image)
  • spin
  • video
  • image (static image)

The following example will set the spin first, then the video, then everything else:

itemsOrder: [ 'spin', 'video']

The following example will set an image zoom first, then a spin, then 2 more image zooms, then a video, then everything else:

itemsOrder: [ 'zoom', 'spin', 'zoom', 'zoom', 'video']

Items will always appear in alphabetical order (uppercase first), so if your gallery has 2 spins, the first spin alphabetically chosen. If the gallery doesn't have an item, it will be skipped.

Here's a complete script:

<script>
  SirvOptions = {
    viewer: {
      itemsOrder: [ 'zoom', 'spin', 'zoom', 'zoom', 'video']
    },
  };
</script>

Advanced ordering and filtering

You can perform advanced filtering, for example to exclude items from a gallery, by applying a filter in JavaScript.

The following array of functions can be executed as a pipeline, when the gallery initializes.

Method Parameters Description
Sirv.viewer.filters.add (function) Add filter
Sirv.viewer.filters.remove (function) Remove filter
Sirv.viewer.filters.removeAll (event name) Remove all filters

The filter function is provided with the Viewer Id and array of items as arguments and must return the arrays of items.

The functions are called in the order they appear, each passing its return value through to the next. The last return value is used as the actual list of items.

This simple example shows a filter to remove any videos from the gallery:

<script>
  function filterVideo(viewerId, items) {
    return items.filter(item => item.type !== 'video');
  }
  Sirv.viewer.filters.add(filterVideo);
</script>

The following example will filter out a sub-folder named INSTAGRAM:

<script>
  function filterINSTAGRAM(viewerId, items) {
    return items.filter(item => !/\/INSTAGRAM\//.test(item.url));
  }
  Sirv.viewer.filters.add(filterINSTAGRAM);
</script>

The following example applies a filter to sort items, showing the spin first and the video last:

<script>
  function sortItems(viewerId, items) {
    function sortByType(a, b) {
      const types = {
        spin: 0,
        zoom: 1,
        video: 2
      }
    if (types[a.type] < types[b.type]) {
      return -1;
    }
      if (types[a.type] > types[b.type]) {
        return 1;
      }
      return 0;
    }
    return items.sort(sortByType);
  }
  Sirv.viewer.filters.add(sortItems);
</script>

The following script would show spins first, then zoomable images from a subfolder named productImages then a zoomable image called hero.jpg from a subfolder named lifestyleImage:

<script>
  function filterItems(viewerId, items) {
    const spins = items.filter(item => {
      return item.type === 'spin';
      });
      const productImages = items.filter(item => {
        return item.type === 'zoom' && /productImages\/\d+.jpg$/.test(item.url);
      });
      const lifestyleImage = items.filter(item => {
        return item.type === 'zoom' && /lifestyleImage\/hero.jpg$/.test(item.url);
      });
    return spins.sort().concat(productImages.sort(), lifestyleImage);
  }
  Sirv.viewer.filters.add(filterItems)
</script>

The following script will also sort the contents of alphabetically:

<script>
  function sortByName(a, b) {
    const nameA = a.url.split('/').pop().split('.').shift().toUpperCase();
    const nameB = b.url.split('/').pop().split('.').shift().toUpperCase();

    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0;
  }

  function filterItems(viewerId, items) {
    const spins = items.filter(item => {
      return item.type === 'spin';
    });
    const productImages = items.filter(item => {
      return item.type === 'zoom' && /productImages\/d+.jpg$/.test(item.url);
    });
    const lifestyleImage = items.filter(item => {
      return item.type === 'zoom' && /lifestyleImage\/hero.jpg$/.test(item.url);
    });
    return spins.sort(sortByName).concat(productImages.sort(sortByName), lifestyleImage);
  }

  Sirv.viewer.filters.add(filterItems);
</script>

Thumbnail

You can generate a thumbnail to represent the gallery contents. This is useful when you need a product image for a category page on an ecommerce site. The thumbnail image will be a 360 spin, if one exists within that folder (not a subfolder), otherwise it will be an image from the folder.

Display a thumbnail by appending ?thumb to the .view file:

https://demo.sirv.com/Examples/b74317.view?thumb

All the usual dynamic imaging options can be applied to thumbnails, such as scaling. This image has width of 180px:

https://demo.sirv.com/Examples/b74317.view?thumb&w=180

Manually create .view files

As well as automatically creating .view files upon request, you can also manually create them. This gives you total control to specify which files should be included in your gallery. Any file, anywhere in your Sirv account could be included in the gallery, in any order you wish.

Simply generate a file with JSONP coding, like the example below. The example would create a gallery with 4 images, a spin, a Sirv video, a YouTube video and a Vimeo video. The gallery looks like this. The code should be saved in a text file named with a .view extension and uploaded to Sirv.

{
  "dirname": "/demo/sirv-media-viewer/moosejaw/10487919",
  "assets": [
    {
      "name": "10487919x1011935_zm.jpg",
      "type": "image"
    },
    {
      "name": "spin/spin.spin",
      "type": "spin"
    },
    {
      "name": "10487919x1020171_vAlt_image_3.jpg",
      "type": "image"
    },
    {
      "name": "Moosejaw-x-Mystery-Ranch.mp4",
      "type": "video"
    },
    {
      "name": "10487919x1020171_vAlt_image_4.jpg",
      "type": "image"
    },
    {
      "name": "10487919x1020171_vAlt_image_1.jpg",
      "type": "image"
    },
    {
      "name": "https://youtu.be/M1mLIeA3_-I",
      "type": "youtube"
    },
    {
      "name": "https://vimeo.com/319074143",
      "type": "vimeo"
    }
  ]
}

Limitation

The Smart Gallery feature is available only to paid plans and trial plans. Free plans cannot use .view files.

Credit

Special thanks to Gravity 360 for the Adidas shoe 360 spin.

Was this article helpful?

Get help from a Sirv expert