< back to Advanced CMS Training

2 - Embedding with Short Code

Advanced - Use short code in body text throughout your website to embed images, documents, scripts and links.

Last updated on 4/18/2014

You can create links to your uploaded documents and images in articles, products, events or any item with modifiable body text by using short code.  Just open the article editor, product editor, or event editor and insert short code in the Body (or Summary) field.  See the links below for instructions and details:

Short Code Reference

Embedding Images

Base Code ( (img|image-name.jpg) ) 
Options Image Size - Directs the software to use the entered width and height for image size. width=xxx pixels
height=xxx pixels
  Captions - Allows captions to appear under photos captions=this is the caption
  Positioning - Directs the software to position/float the image to the left or right of text. float = left or right
  Margins - Directs the software to apply space between the edges of the image and the text. Margins can be defined as a uniform space around all edges; grouped as top and bottom or left and right; or margins can be defined separately all around the image. margin=X pixels (applies a uniform number of pixels all around the image).

margin=V,H pixels (V defines a top and bottom margin in pixels, H defines a left and right margin in pixels).

margin=T,R,B,L pixels
(T=top margin, R=right margin, B=bottom margin and L=left margin). Margins must be defined in this specific order. All expressed in pixels).
Examples

( ( img|myphoto.jpg|float=right|width=160|height=120|margin=5 ) )
Places image sized 160 x 120 to the right of text, with a 5 pixel margin around all edges.

( ( img|hello.jpg|caption=this is the caption ) )
Places caption underneath the photo

( ( img|myphoto.jpg|width=200|float=right|caption=my long caption text ) )
Caption floats along with the image

( ( myphoto.png|float=left|margin=5,0,2,10 ) )
Places image left of text. Sets a 5 pixel top margin, 0 right margin, 2 pixel bottom margin and 10 pixel left margin.

( ( img|myphoto.gif|height=90|margin=10,15 ) )

Centers an image with a height of 90 pixels. Sets top and bottom margins at 10 pixels; left and right margins at 15 pixels.

Additional Considerations Formats allowed: PNG, GIF, JPEG, and JPG. All others are rejected.
Image name is looked up in the pub/photo folder (Multimedia->Images). Use the exact name in short code or it will not work.

Making Hyperlinks

Add link to short code to create links for outside urls, internal urls, internal pages, documents in the pub/doc or pub/photo folders. You can add link in front of the img code to hyperlink your images.
Base Code ( ( link|url, page, document or image name ) )
Examples URLS: 
Add URL to link to a direct URL, or a local 'short url'
( ( link|url=http://somesite.com ) ) or ( ( link|url=my-article-short-url ) )

Internal Page:
Link to a website page from your own website
( ( link|page=home|text=Home Page ) )

Image in Document Folder:
Photo will be looked up in the pub/doc folder before pub/photo
( ( link|doc=myfamilyphoto.jpg ) )

Hyperlink Image:
Create a hyperlinked image in body text
( ( link|img=image name.jpg|url=http://URL to link to|float=right|width=50|height=50 ) )
 
Additional Considerations

If you use link with img, you can also use all the image options (float, margins, width, height).
To open a link in a new window, use window=new after a pipe character.
( ( link|url=http://somesite.com|window=new ) )


You cannot use short code for URLs that contain equals signs ( = ). If you must make a hyperlink to a URL that contains an equals sign, use the text editor option or create a redirected web page instead. Creating a redirected web page

Using Scripts

Use short code to embed Javascript or HTML scripts to add small programs, Google Ads or Google Maps to your website.
Base Code ( ( script|your script name ) )
Examples For different script examples, go to Script Reference.