How to add gallery captions

Captions are a great way to quickly describe or explain an image, video or spin. They can also boost your SEO, by providing useful context about an image/video, to help search engines understand the content of an image.

Add gallery captions to Sirv Media Viewer

Steps

1. Add the data-caption attribute to each item in your gallery. The code looks like this:

<div class="Sirv">
  <div data-caption="Enter your caption here 1" data-src="https://demo.sirv.com/demo/snug/teal.spin"></div>
  <div data-caption="Enter your caption here 2" data-src="https://demo.sirv.com/demo/snug/unpacked.jpg" data-type="zoom"></div>
  <div data-caption="Enter your caption here 3" data-src="https://demo.sirv.com/demo/snug/sofa-build.mp4"></div>
</div>

2. Add CSS styles to your page, to display and style the text as you wish. Example:

<style>
  /* Alter item display & layout to show caption underneath */
  .smv:not(.smv-grid-gallery) .smv-slide > .smv-content > .smv-component[data-caption] {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Increase or decrease a negative value (36px) to fit the caption into */
    height: calc(100% - 36px) !important;
}

  /* Item caption */
  .smv:not(.smv-grid-gallery) .smv-slide > .smv-content > .smv-component[data-caption]:after {
    content: attr(data-caption);
    display: inline;
    position: absolute;
    top: 100%;
    left: 50%;
    height: auto;
    padding: 10px;
    transform: translateX(-50%);
  }
</style>

3. Your page should also reference sirv.js once:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

Grid layout with captions in fullscreen

It's also possible to show captions in fullscreen only.

This example shows a grid gallery, opening to fullscreen on click. thumbnails. Captions are displayed under each item in fullscreen:

The code looks like this:

            
<div class="Sirv sirv-grid-gallery" data-options="thumbnails.type: grid; thumbnails.size:340; fullscreen.always: true; fullscreen.thumbnails.size:80">
  <div data-caption="Caption 1" data-src="https://demo.sirv.com/demo/snug/teal-b-throw.jpg" data-type="zoom"></div>
  <div data-caption="Caption 2" data-src="https://demo.sirv.com/demo/snug/unpacked.jpg" data-type="zoom"></div>
  <div data-caption="Caption 3" data-src="https://demo.sirv.com/demo/snug/sofa-detail-03.jpg" data-type="zoom"></div>
  <div data-caption="Caption 4" data-src="https://demo.sirv.com/demo/snug/sofa-detail-05.jpg" data-type="zoom"></div>
  <div data-caption="Caption 5" data-src="https://demo.sirv.com/demo/snug/teal.spin"></div>
  <div data-caption="Caption 6" data-src="https://demo.sirv.com/demo/snug/sofa-detail-11.jpg" data-type="zoom"></div>
</div>
<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>
<style>
  .Sirv.sirv-grid-gallery .smv-slides-box {
    height: 0 !important;
    flex: 0 1 0;
  }
  .Sirv.sirv-grid-gallery .smv-selectors-box {
    flex-grow: 1;
  }
  .Sirv.sirv-grid-gallery .smv-scroll {
    justify-content: space-between !important;
  }
  .Sirv.sirv-grid-gallery .smv-thumbnails .smv-item.smv-active smv-thumbnail {
    border-color: transparent;
  }
  .Sirv.sirv-grid-gallery .smv-thumbnails .smv-selector[data-type="spin"]:before {
    background-image: url(https://scripts.sirv.com/smv/v3/b7/graphics/icons/black/icon.spin.12.svg) !important;
    background-color: rgba(245, 245, 245, 0.75) !important;
  }
  .Sirv.sirv-grid-gallery .sirv-hint.spin-hint-horizontal-animation .sirv-hint-message {
    display: none;
  }
  .Sirv.sirv-grid-gallery .sirv-hint.spin-hint-horizontal-animation {
    content:'';
    width: 100%;
    height: 90px;
    background-position: center;
    background-size: 240px auto;
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    z-index: 10;
    background-repeat: no-repeat;
    background-image: url(https://scripts.sirv.com/sirvjs/v3/graphics/hint/hint.arrow.05.svg);
  }
  .Sirv.sirv-grid-gallery .smv-thumbnails .smv-selector[data-type="video"]:before {
    background-image: url(https://scripts.sirv.com/sirvjs/v3/graphics/icons/black/icon.video.3.svg) !important;
    background-color: rgba(255, 255, 255, 0.58) !important;
  }
</style>

Captions in a Smart Gallery

You can also show captions in a Smart Gallery. These clever galleries are generated from .view files, to show the contents of a folder.

Captions can be added both above and/or below the gallery contents. The content for the caption comes from the meta fields for the assets in your Sirv account:

• Meta title - shown above the gallery item.
• Meta description - shown under the gallery item; also used for image alt text.

Demo: https://demo.sirv.com/demo/sirv-media-viewer/bosnjaklovro/smv-gallery-with-heading-and-caption.html

Join Sirv today

Try Sirv free for 30-days! Use Sirv Media Viewer to create your website galleries: spin gallery; video gallery; image gallery or combine all your media into one amazing gallery.

FAQ

Do captions work with static images?

Captions work alongside spins, zoomable images and videos but not static images.