Images that have been uploaded to Cascade CMS can be inserted into a page via a WYSIWYG editor by clicking on the Insert/edit image button.
...
Select the desired page in the Site Content menu on the left.
In Edit mode, scroll down your page to the Page Content section.
Place your cursor where you would like to insert the image.
Click on the Insert/edit image icon.
Image Source should have the Internal option checked. Click on Choose File to select the image.
Once you've selected your image, click on Choose.
You are required to fill out the Image Description to ensure that your content is accessible. This is a required field and is important for making content accessible to people with disabilities. If the image is used simply for decoration and provides no substantive meaning to the page check the box next to “this is a decorative image, no description needed.” Cascade CMS will automatically include an empty string that tells screen readers to skip this image.
You have the option to change the dimensions of the image. We recommend keeping the Constrain Proportions checkbox checked to ensure your image is not stretched or skewered when it is resized.
Include notes on adding styles…Select the appropriate custom formats for your image. It is recommended that you select Image - Responsive at a minimum.
Click on Ok. Your image should now be inserted at the point your cursor was.
| Info |
|---|
If you uploaded your image into any folder in your site recently, the image can be found in the Recent tab. If not, use the Browse tab to select the image. |
...
...
Uploading an image from the WYSIWYG editor
...
Align Left will float the image at the left of the Page Content column, and allow text to wrap around the right.
Align Right will float the image at the right of the Page Content column, and allow text to wrap around the left.
Align Center will float the image in the center of the Page Content column, and text will not wrap around the image.
gif of image moveing around
...
To add space between your image and text:
After you've clicked on the Insert/edit image icon, click the Advanced tab.
To add space between your image and text, type in a number in the box for Vertical Space and/or Horizontal Space. You will notice that a CSS style has been added into the Style box for you.
...
.
...
Image Styles
...
There are two custom formats available for images:
Image - Responsive - Responsive images give your visitors the most appropriate images for their devices and screens. This format will add the .img-fluid class to the image to ensure that it scales appropriately.
Image - Rounded Edges - This format will include a CSS class that rounds the edges of an image.
Applying Image Styles
With the image selected, click on the Insert/edit image icon.
Select the desired custom formats from the Styling list.
Click Ok.
| Info |
|---|
You can select more that one custom format for images by using Ctrl/Cmd + click to select multiple formats. |