Articles in this section

See more

Adding captions to GallerySliders

  • Updated

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

Some may wish to add captions to GallerySliders. By default, there is not a way to do this in Semplice currently. However, with a tiny bit of code you add this functionality to your GallerySliders. We will use each image's ALT tag information to add the caption.

You can view a live example of the hack here:

caption-image.gif

Adding the captions

As mentioned above, we will use the ALT tag information from our images to generate the captions. To add an ALT tag to your image, go to the Wordpress Media Library in Wordpress (alternatively, you can also just start uploading your images).

Click an image you wish to use in a GallerySlider, and under 'Alternative Text' in your image options add your caption. You can add any caption you like!

adding-caption.gif

Adding the custom class

To trigger the captions to appear, we'll assign a custom class to our GallerySlider. We have the option to either make the caption appear ON TOP of our GallerySlider, or BELOW our GallerySlider.

If you want the caption to appear on top of the image, add the custom class of "caption-on-top" (without quotes). If you want the caption to appear below the image, add the custom class of "caption-below" (without quotes).

caption-slider-custom-class.gif

Adding the custom CSS

We'll need to add custom CSS to style our captions. Add your custom CSS under Customize > Advanced > Custom CSS.

You can customize the font-size amount to increase the caption text size. You can also increase/decrease the opacity on the image overlay by changing the '0.25' value in the 'background: rgba(0,0,0,0.25)' property.

.semplice-gallery-slider .gallery-image-caption {
  font-size:  16px !important;
}

.caption-on-top .semplice-gallery-slider .gallery-image-caption {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  color: #FFF;
  transform: translate(-50%, -50%);
}

.caption-on-top .semplice-gallery-slider .gallery-image-caption::after {
  content: '';
  width: 200vh;
  height: 200vw;
  background: rgba(0,0,0,0.25);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: translate(-50%, -50%);
}

.caption-below .flickity-viewport  {
  overflow: visible;
}

.caption-below .semplice-gallery-slider .gallery-image-caption {
  position: absolute;
  left: 50%;
  bottom: -40px;
  z-index: 3;
  transform: translate(-50%, 0%);
}

Adding the custom JS

We'll need to add custom JS to finally bring this hack together. Add the following custom JS under Customize > Advanced > Custom JS:

jQuery('.semplice-gallery-slider').find('img').after(function() {
return jQuery('<p class="gallery-image-caption">').text(jQuery(this).attr('alt'));
});

Troubleshooting

Captions only appear once

This can happen if you have Single App mode enabled. You will need to either switch to Static Site mode, or view this article's troubleshooting tips for how to get custom javascript to work with Single App mode.

Related articles