Skip to main content

How to use the new CMS image component to build pages

CMS Image​

To pull image from the cms banner uploader:

  1. Add CMS Page image to the CMS page builder, its located in media.
  2. On the options:
    • Select site from site dropdown.
    • Select image from image select dropdown, identified by tag.
  3. Use the extra options to alter the CTA or to move the position of the text on the image.
  4. Click Save.

The CMS image should have the same options as the Custom banner, with the additional ability of being able to change the image from the external section.

When using the CMS image for the category section, add the title as text in the cms banner uploader so that the text looks clickable.

Classes​

There are a number of bootstrap classes used on the current homepage design that are explained on this link:

Bootstrap Spacing Classes

Where m is used this refers to margin, p refers to padding. The location is specified as follows:

  • t - top
  • b - bottom
  • l - left
  • r - right
  • x - left and right
  • y - top and bottom

Then spacers are set between the numbers 0 to 5.

So for example a class of py-4 would add padding to the top and bottom with a value of 4.

Adding a line break on a banner

To add a line break on a banner using the cms image component add {{\n}} into the title text.