Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

How to Position Image and Caption Side by Side

Would you like to style your caption to be side by side of the images? We’ll walk you through what CSS needed to style your caption and image side by side.

IMPORTANT: you may need to adjust your slider dimensions once you have tweaked the CSS to your liking to ensure that your slider is displaying properly.

This tutorial is a little more technical as it requires basic knowledge of HTML and CSS.

Setup

Step 1 – Install and activate the CSS Addon

Your first step will be to install and activate the Soliloquy CSS Addon.

If you need any assistance in installing addons, please take a look at this article.

For this instance, we’ll be installing the CSS Addon.

Activate the CSS addon

Step 2 – Create or edit your slider

Next, create a new slider or edit an existing one. You can follow along with our documentation for creating your first slider.

Step 3 – Edit your slider images

Next, you’ll need to edit your images and add your captions.

To do this, click the blue pencil icon to open the Edit Item window.

Soliloquy - edit the image to add your caption

Step 4 – Add the caption to each image

Inside the Caption field, add your caption.

Soliloquy add your caption to style the caption side by side

Using the right and left arrow keys in the top right corner of the Edit Item window, you can navigate through each slider image adding the caption you wish to appear. Remember to click Save Metadata after each time you add your caption.

Step 5 – The CSS

The CSS we’ve used in our demo is for the Alternating right and left captions.

Add the CSS to the Misc tab to style the caption and image side by side

You’ll need to change this ID number to match your slider ID number. You can find this by looking in the sidebar of your slider edit screen.

For more information on how to find your slider ID number you can read this article.

Right aligned caption
#soliloquy-container-508218 .soliloquy-caption-inside {
    height: 174px;
}
#soliloquy-container-508218 .soliloquy-item .soliloquy-image { 
  max-width: 60% !important; 
  margin: 0 !important; 
}
#soliloquy-container-508218 .soliloquy-caption { 
  max-width: 40% !important; 
  left: auto !important; 
  bottom: auto !important; 
  right: 0 !important; 
  top: 0 !important; 
}

You can adjust the max-width and height percentages and positioning values as needed to get it looking just right for your specific website.

Left aligned caption
#soliloquy-container-508218 .soliloquy-caption-inside {
    height: 174px;
}
#soliloquy-container-508218 .soliloquy-item .soliloquy-image { 
  max-width: 60% !important; 
  margin: 0 !important; 
  float: right !important; 
} 
#soliloquy-container-508218 .soliloquy-caption { 
  max-width: 40% !important; 
  bottom: auto !important; 
  top: 0 !important; 
}
Alternating right and left captions
#soliloquy-container-508218 .soliloquy-caption-inside {
    height: 174px;
}
/* Even Slides Caption to the Left */
#soliloquy-container-508218 .soliloquy-item:nth-child(even) .soliloquy-image { 
  max-width: 60%; 
  margin: 0; 
  float: right; 
} 
#soliloquy-container-508218 .soliloquy-item:nth-child(even) .soliloquy-caption { 
  max-width: 40%; 
  bottom: auto !important; 
  top: 0 !important; 
}
/* Odd Slides Caption to the Right */
#soliloquy-container-508218 .soliloquy-item:nth-child(odd) .soliloquy-image { 
  max-width: 60%; 
  margin: 0; 
}
#soliloquy-container-508218 .soliloquy-item:nth-child(odd) .soliloquy-caption { 
  max-width: 40%; 
  left: auto !important; 
  bottom: auto !important; 
  right: 0 !important; 
  top: 0 !important; 
}
Be sure to update the -508218 with your own slider ID number

If you’d like to change this for all sliders, just add the CSS to the WordPress customizer.

Check out our demo of this in action!

Once you click Publish or Update on your slider, you’re all set! You’ve now styled the image and caption to be side by side!

Would you like to only show the caption on hover? Take a look at our tutorial on How to Display Caption on Hover.


FAQs

Q: Why isn’t the height setting of my image being used?

A: When changing the max-width of the image, the height is adjusted and therefore the caption CSS height will also need to be adjusted.


[i]
[i]