CMS Basics Training: Sample Page Two - University of Houston
Skip to main content

Sample Page Two layout images, placed images, related links sets, and content by the column

Two score and seven years ago, today was 47 years in the future.

Here we present some wonderful and fascinating information for our site visitors. Things we've always wanted our site visitors to know about everything our office does for the university and the UH Community. We have included a layout image (Right-Column Image) and inserted pictures into the main content area too - all to make our site visitors interested and informed. Applying to the University of Houston is the first step to your rewarding future.

Yellow Tulips

Here is an image inserted directly into the standard content area. Other images can be linked-to CMS-internally and displayed as layout-compatible background images and layout features (see Banner area above the Standard Content area under the Editing tab, which is where this page's right-side column image was selected/de-selected). If you look into the embedded HTML editor(s) however, you will only be able to directly edit the information which you have access to through this page's editing panel.

If you are inside the CMS, you can try this:

  • Go to the Editing tab and find the Content data definition's Rich Text WYSIWYG Editor.
  • From the Rich Text WYSIWYG Editor, select the image above;
  • From the Insert/Edit Image dialog, request different sizes for the image and Save & Preview the Page to see how the image then fits in the available space. Note: UH styles will tend to automatically 'shrink' an image which is nominally too-wide, so it can still display in the available space;
  • Go back to the WYSIWYG editor holding the image and re-select it, opening the Editor dialog. Then make sure the image size is set to something significantly smaller than the content area (e.g. 200 or 300 pixels wide). Save & Preview the Page to see how that turns out.
    • Next, re-enter the Edit panels and again select the image; then popout the "Formats > Custom" styles options and select either "pull-right" or "pull-left";
    • Submit to save the change and go back to the Page Preview panel;
      (You may not see the effects of the Custom Styles while you're still in the WYSIWYG editor.)
    • In the Page Preview you should then see the text wrapping around the image.
  • See the How To's on the Infotech website for further discussion of using the Styles Popout.