Code Snippet Library: How To Use

Follow these instructions when in the relevant section of the CMS and you will easily be able to add code snippets.

In our example we are going to add a photo caption beneath an image

The process of left clicking the clipboard and pasting into the relevant place in the CMS is the same for all code snippets in the library.

Step 1

Left click the Clipboard image.

Doing so will copy the code to your mouse.

In this example the code will look like this:

<figure> <figcaption class="text-center ">Short Photo Description</figcaption> </figure>

To test it before using the CMS left click the clipboard and paste it into a notepad document to see the result.

Photo Caption Aligned Centre

Scotney Castle
Short Photo Description

Step 2

Click the Source button

Step 2

Step 3

You will see the source code for the image.

Paste the code snippet directly beneath the image code.

Step 3

Step 4

It will now look like this

Change the words 'Short Photo Description' for your own.

Take care to insert your caption exactly between the > closing tag and the < opening tag.

Step 4

End Result Before Publishing

The photo caption will appear to be out of line.

It will correct itself when published live on your site.

Step 6

The End Result After Publishing

Step 8