TOC => Shortcodes

Shortcodes

Implement complex content and formatting funcionality by adding simple tags in your text.

   Inserting Shortcodes

   It is easy to insert Shortcodes into your content using the HTML editor's toolbar. Select the Insert ShortCode button as shown below:


   

This will open a modal Selection pop-up that shows you all of the available Shortcodes:


   By clicking the Add button below the Shortcode you want, a template will be inserted into your WYSIWYG editor. The templates all have a similar format:

[shortcode argument = "value"]Target Content[/shortcode]


  • shortcode: the name of the Shortcode enclosed in square brackets [ ]. Requires a closing tag as well.
  • attribute = "value": additional arguments that the shorcode might need to render the content. A height value or a color, for example.
  • Target Content: the plain text content that will be modified by the Shortcode

Available Shortcodes

The following Shortcodes are available for use in your documents:

  • [image]: Add a image from the media library
  • [asset_url]: Return a url from the media library
  • [youtube]: Embedded YouTube player
  • [vimeo]: Embedded Vimeo player
  • [offcanvas]: Creates a link to trigger an Offcanvas Area
  • [modal]: Creates a link to trigger a Modal Area
  • [bsbutton]: Creates a link using the bootstrap button styling
  • [fa]: Insert a font awesome 4 icon
  • [animated_link]: Creates a link with animated underlining
  • [blockquote]: offsets some text as a blockquote with an attribution caption
  • [display]: applies display Utility classes to text
  • [figure]: renders an image as a figure, with a caption
  • [lead]: wraps text in the .lead class
  • [underline]: places a line UNDER any text. amazing.

   The Image Shortcode

   Example: [image alt="some text"]foo.jpg[/image]

   This will render an image tag for the file foo.jpg in the site's media folder.

   Arguments:

  • alt: Adds alternative text to your image for the benefit of readers who can't see the image and also good for SEO.
  • class: Adds an html class attribute to the image tag for styling.
  • format: Change the file format from the original file. Can be jpeg, png, gif or bmp.
  • quality: Sets the encoding quality to use for jpeg images. The higher the quality, the larger the file size will be. The value can be from 0 to 100 and defaults to 75.
  • width, height: The width and height can be set to resize the image. The possible values are limited to prevent malicious clients from creating too many variations of the same image. The values can be 16, 32, 50, 100, 160, 240, 480, 600, 1024, 2048.
  • mode: The resize mode controls how the image is resized.
      the available modes are:
    • pad: Pads the resized image to fit the bounds of its container. If only one dimension is passed, the original aspect ratio will be maintained.
    • boxpad: Pads the image to fit the bounds of the container without resizing the original source. When downscaling, performs the same functionality as pad.
    • max (Default): Constrains the resized image to fit the bounds of its container maintaining the original aspect ratio.
    • min: Resizes the image until the shortest side reaches the given dimension. Upscaling is disabled in this mode and the original image will be returned if attempted.
    • stretch: Stretches the resized image to fit the bounds of its container.
    • crop: Resizes the image using the same functionality as max then removes any image area falling outside the bounds of its container.

   The Asset URL Shortcode

   Example: [asset_url]foo.jpg[/asset_url]

   This will return a relative url of /my-tenant/media/foo.jpg for the file foo.jpg in the site's media folder.

   Arguments:

  • format: Change the file format from the original file. Can be jpeg, png, gif or bmp.
  • quality: Sets the encoding quality to use for jpeg images. The higher the quality, the larger the file size will be. The value can be from 0 to 100 and defaults to 75.
  • width, height: The width and height can be set to resize the image. The possible values are limited to prevent malicious clients from creating too many variations of the same image. The values can be 16, 32, 50, 100, 160, 240, 480, 600, 1024, 2048.
  • mode: The resize mode controls how the image is resized.
      the available modes are:
    • pad: Pads the resized image to fit the bounds of its container. If only one dimension is passed, the original aspect ratio will be maintained.
    • boxpad: Pads the image to fit the bounds of the container without resizing the original source. When downscaling, performs the same functionality as pad.
    • max (Default): Constrains the resized image to fit the bounds of its container maintaining the original aspect ratio.
    • min: Resizes the image until the shortest side reaches the given dimension. Upscaling is disabled in this mode and the original image will be returned if attempted.
    • stretch: Stretches the resized image to fit the bounds of its container.
    • crop: Resizes the image using the same functionality as max then removes any image area falling outside the bounds of its container.

   The Youtube Shortcode

   Example: [youtube]YouTube_Video_ID[/youtube]

   Will embed a YouTube player for the YouTube_Video_ID you specify.

   Arguments: none


   The Vimeo Shortcode

   Example: [vimeo hash="hash value"]Vimeo_Video_ID[/vimeo]

   Will embed a Vimeo player for the Vimeo_Video_ID you specify.

   Arguments:

  • hash: If the video you are embedding requires you to pass a hash code in the URL, this argument will set that value

   The Offcanvas Shortcode

   Example: [offcanvas target="OC_area_name"]link_text[/offcanvas]

   Will render a link with the text link_text that triggers the visiblity of the OffCanvas area named OC_area_name

   Arguments:

  • target: The name of the Offcanvas Area that the link should trigger.

   The Modal Shortcode

   Example: [modal modalID="myModalID" classes="classList"]link_text[/modal]

   Will render a link with the text link_text that triggers the visiblity of the Modal area with the ID of myModalID. You may add any classes you like to the link using the classes attribute.

   Arguments:

  • target: The ID of the Modal Area that the link should trigger. (Consider specifying your own ID using the Modal type's Modal ID property, so you don't need to view the page's source to determine the system generated ID)
  • classes: a list of classes you want to apply to the link, separated by spaces.

   The BootStrap Button Shortcode

   Example: [bsbutton href="target_URL" color="primary" size="small" style="outline" target="_self"]button_text[/bsbutton]

   Will render a bootstrap-style button that navigates to the target_URL. The button will be outlined (no fill), in BootStrap's primary theme color, and contain the text button_text.

   Arguments:

  • href: the URL you want to open with the button
  • color: any of Bootstrap's theme colors: i.e. primary, secondary, danger, etc...
  • size: Either large or small.
  • style: Either normal or outline. The default is normal, which is a filled BootStrap-style button.
  • target: Specifies where to open the linked document. You can specify _self, _blank, _parent or _top. You can also specify an Iframe name, if you're so inclined.

   The Font Awesome Shortcode

   Example: [fa class="fa-xl"]fa-anchor[/fa]

   Will render the FontAwesome fa-anchor icon () in the xl font size. View the available icons.

   Arguments:

  • class: You may specify additional FontAwesome classes for sizing and for animations.

   The Animated Link Shortcode

   Example: [animated_link href="target_URL"]Link_Text[/animated_link]

   Will render an HTML link that navigates to the target_URL. The Link_Text will be displayed with an animated underline effect.

   Arguments:

  • href: The URL that the link will navigate to.

   The Blockquote Shortcode

   Example: [blockquote attribution="Who said it"]Quote Text[/blockquote]

   Will wrap the Quote Text with a <Blockquote> tag, then wraps the <Blockquote> in an HTML5 <Figure> tag. The attribution will be inserted as the figure caption.

   Arguments:

  • attribution: The source of the wrapped quote.

   The Display Shortcode

   Example: [display size=1 color="primary" extraClass="text-decoration-line-through"]title text[/display]

   Will render your title text using Bootstrap's Display utility class, using the size (1-6) you specify. Additionally, it will apply any additional Classes you specify in extraClass.

   Arguments:

  • size: The size designator (1 thru 6) for the Bootstrap Display class.
  • color: any of Bootstrap's theme colors: i.e. primary, secondary, danger, etc...
  • extraClass: A string of classes you want to add to the text, separated by spaces.

   The Figure Shortcode

   Example: [figure caption="figcaption use [br] for line breaks" width="400px" float="left" ]asset_url[/figure]

   Will wrap the image you specify in asset_url with an HTML5 <Figure> tag. The caption text will be rendered as the Figure caption. You may set the width and float behavior with the width and float attributes

   Arguments:

  • caption: the text you want included int the Figure's <figcaption> tag.
  • width: The pixel width you would like as the max-width.
  • float: Specify if you want the image's container to float 'left' or 'right'.

   The Lead Shortcode

   Example: [lead]lead text[/lead]

   Wraps the lead text with the .lead class.

   Arguments: none


   The Underline Shortcode

   Example: [underline]text to underline[/underline]

   Will put a continuous line beneath the text to underline.

   Arguments: none

Page Contents
Back to TOC

Shortcodes

add more things