ePublishing Knowledge BaseePublishing Knowledge BaseePublishing Knowledge Base EditorialHow do I add an image caption or photo credit within the body of an article or blog post?

How do I add an image caption or photo credit within the body of an article or blog post?

This article will show you how to add captions or photo credits within the body of your articles or blog posts. First, check with your website administrator or ePublishing Solutions Manager to see if your site has a CSS class to handle displaying captions with images.

The Shortcode is a simple snippet of code that allows you to easily embed certain features into WYSIWYG content, without the need for ugly or complicated markup.

1. Edit any WYWISYG content.

2. Go into Source mode in the editor.

Add the following shortcode:

[image-with-caption src="capitol.jpg" direction="left" url="http://url"]This is caption text.[/image-with-caption]

This "image-with-caption" shortcode requires the src attribute. That is the path to your image. Exclude "ext/resources" from this path, it's added automatically. The caption for the image is placed between the open and close of this shortcode.

Other optional parameters include direction, url, and alt.

Direction - {left|right} the direction the image will be positioned.
URL - The image will link to this specificed URL, default value is no link.
Alt - The alt text for the image.

3. FAQ

Do I have to enter this in Source mode?

Yes, the shortcode is hidden in normal mode to prevent the quotes from getting converted through WYSIWYG's Advanced Content Filter.

Can I add other attributes to the shortcode?

No, there are a specific set of attributes for each shortcode. We welcome any feature requests to improve our shortcodes.

Can I style this component from our client specific stylesheet?

No. ePublishing specific classes may receive updates by our core development team and could conflict with your applied styles. If other styling is desired, instead of using the shortcode you can write custom HTML from the Source mode and use your stylesheet to add your own styling.