Article
4 comments

Add image with caption to SharePoint rich text editor

Have you ever tried to add a caption to an image inside the SharePoint rich text editor? In this case you might end up editing the source code of the editor. Before you touch the source code of your page, let me show you a more convenient way to achieve this without advanced coding techniques.

HTML 5 tags for captions

If you like to add illustrations, diagrams or photos and add a caption on a web page, HTML5 has some new elements for you.

  • “`<figure>“` container element for illustrations, diagrams, photos
  • “`<figcaption>“` the caption of the figure

The figure tag groups, image and figure caption to one unit in the DOM tree. We don’t need to use “`

“` elements for this purpose. The following example shows how an implementation will look like.

<figure>
    <img src="kitten.png" alt="Kitten" title="Cat playing with a ball" />
    <figcaption>Cat playing with a ball looks nice </figcaption>
</figure>

But let’s take a look how we can add this to our SharePoint.

Make code snippet reusable for the editor

Publishing site and Wiki page template have a special list for making html snippets reusable. This list is called “Reusable Content”, can be found on the root of a publishing site collection and can store html and text snippets.

Upload default image of figure

Before we can add the html there I would recommend to upload a default image for our reusable snippet. In my case the sample image has a width of 469 pixels and a height of 220px. These values match to the image rendition for a large image.

Sample image stored in site collection images

Sample image stored in site collection images

Adding reusable content

Now the html snippet can be added to the reusable content list. From this list content editor are free to choose any existing element to add default content on a page. On this list a new reusable HTML item needs to be created. Just fill in a title and a meaningful comment. Uncheck the automatic update checkbox because otherwise your editors won’t be able to make changes to the embedded instance of the HTML code. “Show in drop-down menu” needs to be checked because this check box defines if an html snippet is selectable for an editor. The most important field is the “Reusable HTML”. This is where the snippet code needs to be added.

<figure>
    <img src="/SiteCollectionImages/sample-image.png?RenditionID=3" height="220" width="468">
    <figcaption>Add your text here to add a caption</figcaption>
</figure>

Make sure to add the HTML snippet in source code view. Otherwise, you will just paste in the HTML code as text. This works the same way as on regular publishing pages.

Creation of reusable content

Creation of reusable content

After these modifications the entry can be saved and approved so that everybody is free to use it.

Insert snippet into the page

To insert the snippet on a page selects the reusable content button from the insert ribbon. In the drop down you will now find now the “Figure with caption” snippet.

Snippet selection in rich text editor

Snippet selection in rich text editor

A click on the drop down your HTML code will be added the HTML code to the current cursor position.

Snippet embedded in rich text editor

Snippet embedded in rich text editor

The last thing that needs to be done is to change the placeholder image and replace it with another picture. Don’t forget to change the caption text.

Final touch of figure with caption

Final touch of figure with caption

With this simple Sharepoint configuration we improved the editing experience a lot.

Apply CSS

This newly added, and introduced HTML snippet can now be styled to any requirement to match the overall design of SharePoint.

In my case I use round edges of the image as well for the border of the figure tag. In addition to this I also changed the style of the caption text. Last but not least. The snippet is responsive too.

CSS applied to firgure

CSS applied to firgure

figure{
    margin: 0em;
    border: 1px silver solid;
    padding: 1em;
    max-width: 720px;
    border-radius: 0.5em;
    img{
        width: 100%;
        height: auto;
        border-radius: 0.25em;
    }
}
figcaption{
    line-height: 1em;
    padding: 0.5em 0 0;
    font-style: italic;
    font-size: 1.25em;
}

Now it’s up to you how your figures should be styled. Place the caption above, right, left or below the image. Might add it as an overlay inside the image. Change it to whatever you like or your design requires.

Conclusion

I think there are more opportunities to make use of the reusable content than just add an image with caption. From my point of view, it is an easy way to enhance the functionalities of the SharePoints rich text editor.

The only negative thing about this solution is, that it requires the publishing features and is not suitable for team sites.

The good thing it doesn’t require custom code and just use out to the box features. It is also cloud and Office 365 ready.

4 Comments

  1. Hi,
    I am learning SharePoint during an internship and your tutorials helped a lot! Thanks 🙂
    couldn’t find a proper answer while searching through the articles- is there a way to make a SharePoint site fixed-width in cases where I do not have access to the designer/master pages? Any help would be greatly appreciated!

    Reply

    • Hi,
      the easiest way you can accomplish this is using only a custom css. Eventually you can add this through alternate style sheet url property.
      Do you use team site template or publishing based web template?

      /Stefan

      Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.