Image with caption

Support
#1

I have inserted an image with a link to a larger version. How do I get the larger version to appear in the centre of the page, rather than the top, and also to get the caption to display?

Thanks

#2

Hi Alex,

Thank you for reaching out to us. You can do this with the combination of lightbox and image shortcode see this reference thread: Styling lightbox captions.

Here’s the shortcode combination used in the referenced thread:

[image class="my-portfolio" src="http://image.jpg" alt="some text" type="thumbnail" link="true" href="http://bigger-image2.jpg" title="The Title" lightbox_caption="This is my image caption"]

[lightbox selector=".my-portfolio" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

The upon clicking on image, the bigger image (specified in the href attribute of the image shortcode) will open in a lightbox with a caption.

To learn more about lightbox shortcode see https://demo.theme.co/integrity-1/shortcodes/responsive-lightbox/ and for the Image shortcode, please see https://demo.theme.co/integrity-1/shortcodes/images/

Hope this helps!

#3

Thank you Nabeel for your help. I am assuming that this code needs to be placed into a Content Area element, but that raises a couple of other issues. How do I incorporate an image size within the class, I can’t seem to make it happen

Thanks

Alex

#4

Hey Alex,

Yes you can add the above code in the Raw Content element instead. You can use the style attribute of the Image shortcode to specify the size. For example:

[image style="width: 200px;" src="image.jpg" alt="Text"]

Please note the image URL provided in src attribute will be the smaller image and to show the bigger version of the image on clicking the small image, give the image URL in the href attribute in the following code:

[image class="my-portfolio" src="http://image.jpg" alt="some text" type="thumbnail" link="true" href="http://bigger-image2.jpg" title="The Title" lightbox_caption="This is my image caption"]

[lightbox selector=".my-portfolio" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

Hope this helps!

#5

Thanks. Yes perfect. My learning level has just gone up a little :slight_smile:

#6

You’re welcome, Alex.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.