WiscWeb CMS - Images in the Text Editor

This document shows how to use Images in the Text Editor.

WiscWeb CMS - Images in the Text Editor

Images in the TextEditor

The Text Editor allows you to place images in a Text Area. Such images can also be used as Links. When placing an image in a Text Area you do one of three things:

  1. Use your Site's Assets
    1. Select an image that already exists in your Site's Assets
    2. Select an image on storage media. Doing this will copy the image to your Assets as part of the process.
  2. Use an image located on some website repository (e.g., MyWebSpace, box.net, dropbox.com, GoogleDrive, etc.).

Note one very important point. You may be a person who is migrating information from one format/web site into WiscWebCMS. If so you need to know that copying and pasting from the old website pages into a TextEditor window will work quite well (though there are some caveats). So well in fact that you might not be aware of a significant gotcha--namely, if there are images that are part of the information you paste into the TextEditor they will appear after the paste concludes. What the paste process does is create Internet links to the images (more on what this is below). This is an issue if the source of that link subsequently is deleted or destroyed, as an old website would almost surely be (why would two stay around after the move from old to new concludes after all?). Every image in every TextArea created in this way would instantly break when the old website is destroyed. That's why putting images in your Site's Assets is so important. Yes, we understand it is a significant bit of extra work, but it really is important that it be done this way.

Assets are images, documents (e.g., Microsoft Word, Microsoft Powerpoint presentations, Adobe PDF documents), etc. that have been added to your CMS site. There are various ways of managing a site's Assets. You can learn more about managing Assets at this KB doc: WiscWeb CMS - Creating folders and adding files via Asset Manager.

Adding an Image

Note: when placing images you should always add Alternative Text: as you go. This Alternative Text is critical for the proper functioning of screen reader programs that allow disabled individuals to successfully navigate and use your site. And, besides, it is the law (really!).
  • The first step in adding an image is to click on the Image button at the far right end of the TextEditor toolbar.
    images tabbar buton to place images
  • The resulting window has two tabs: Asset and Internet.
    images two options assets internet
  • For Assets click on the Select button.
    images asset tab select button
  • The Upload or Choose File window allows you to either get an image from the computer you are using--Local File System--or get an image from those already loaded into your Site's Assets.
    images assets local file system or site assets
  • Here are the windows for either:
    • Select File from Local File System
      image choose local file
      • Click on the Browse button to open a window you can use to find the image file on your local harddrive. Click the appropriate button when you locate the image. If you have categories for your Assets, another window window will require that you specify which category to place the image in.
        image chose local file browse button
      • You will see that the File: field now shows the name of the file you just uploaded.
        image choose local file selected
      • Click on the Upload button and the CMS system will add the image to your Site's Assets and place the image in the TextEditor at the spot you designated.
        image choose local file upload
    • Select Asset
      image choose asset
      • Select the category the image is in and click on OK:
        image choose asset select category
      • The new window will show all of the images for the selected category in Thumbnail or List view.
        image choose asset thumbnail list views
      • At this point you can do several things to locate the desired image:
        1. Use the Search box at the top-left of the window. Note that if you use this search, for Attribute File name you either must type in the exact name including the extension (.gif, .jpg, .png, etc. -- capitalization does not matter) or use a partial name followed by an asterisk, e.g., "usa*" will find all files that start with the three letters "usa". By default the search criteria is "*" which will find all images.
          image choose asset search
        2. Scroll through the results and visually locate the image you want. If the results require more than one page the window will show this with links to scroll through the results pages:
          image choose asset results scrolling
        3. You may realize that the image you want is not in the results but somewhere else. There is a Switch Folder option that allows you to view other images in your Site's Assets
          image choose asset results switch folder
      • When you find the image you want, click on its filename (if you click on the image the CMS system will open a Preview window)
        image choose asset select result
      • Now the image and some of its properties and additional options will appear on the right side of the window. There are options here for manipulating the image directly (Cropping and Extended Image Editing Options which are beyond the scope of this document). If all is okay, click on the OK button and the image will be selected.
        image choose asset select ok
      • You will see that the File: field now shows the name of the file you just selected. Click on the OK button and the CMS system will place the file in the TextEditor at the spot you designated.
        image insert asset ok
  • If you want to use images from some web-based repository, you select the Internet tab. Note that you will need to have copied the URL for the image you want. The examples below use the University's MyWebSpace file management system as its web-based file repository.
    image internet
    • Select the appropriate URL from the URL: dropdown. Big dislaimer here! Internet "addresses," called their URL, have two parts: the part that specifies how a webbrowser talks to the website where the page is located--http, https, ftp, sftp, etc.--and the address itself: www.wisc.edu, www.microsoft.com. Part of the address may be an explicit document on the site, e.g. of a full URL to an image file: https://mywebspace.wisc.edu/jstalnak/web/images/group54/26507/Image_InternetImageURL.jpg. In this CMS form, these two components are separated! The dropdown menu specifies http, etc. and the field is where the address goes. Do not paste a complete URL in the field!! If you do, when the page is published the link that is constructed will look like this: http://http://www.wisc.edu/blah/blah.jpg. The first http:// came from the dropdown and the rest was in the address field. This is a malformed, broken URL that will not work. Confirm that you have done this correctly before you save! Trust me, this happens all the time.
      image internet url
    • Paste or type the address, and only the address, in the right-side field. Click on the OK button and the CMS system will place the file in the TextEditor at the spot you designated.
      image internet added

Aligning an Image

By default all images are placed at the cursor position.
image default alignment

Alignment Options

This default placement may be acceptable. However, often one wants to control how text around an image works. There are options for images, for example, one can set that will float an image left or right in the Text Area and any text will flow around it. You can set the appropriate value either when the image is placed or afterwards by modifying the image's settings. Here are the five options with screenshots to show what they do:

  1. Top - The text aligns with the top edge of the image (the image appears to hang from the text line):
    image top alignment
  2. Middle - The text aligns with the middle of the image (the image appears to be bisected by the text line):
    image middle alignment
  3. Bottom - The text aligns with the bottom of the image (the image and text appear to sit on the same line):
    image bottom alignment
  4. Left - The image shifts to the far left of the text and the text flows around it:
    image left alignment
  5. Right - The image shifts to the far right side of the text and the text flows around it:
    image right alignment
Alignment Settings

You get access to the setting, called Alignment:, using the Insert Image or Edit Image Properties window. It defaults to (none). The setting is available when you first place an image and also by right-clicking any image and selecting Edit Image Properties from the pop-up menu:
image edit alignment
image edti image properties

Alignment Tweaking with CSS Padding
NOTE: These steps require that you have a good understanding of HTML so that you can read the raw HTML to find the html you must modify. Some CMS editors may not have authorization to use the Source Code mode of the Text Editor. These instructions will not work without access to Source Code mode.

One thing you may note is that by default images placed near or within text have the text very, very close to their edges if you use left alignment (see the image above). In other words, there is no default padding to add a bit of whitespace to clean up the appearance. You can add such whitespace using the Source Code editing mode of the TextEditor:

  • Click on the Source Editor tab.
    image text editor source code tab
  • Locate the <img> tag which will show a src value that points to the Asset or URL of the image and a style value that sets the Alignment.
    image in code editor
  • Modify the style to add padding with the format "style: <padding_amount><measurement_unit>;" (note the ; at the end inside the quote sign). For example ".25in" specifies ".25" as the padding amount and "in" (i.e., our familiar Imperial inches in decimal form) as the "measurement_unit". You can use other measurement units if you are familiar with their use (metric, both cm and mm, or px for pixels). FYI decimal values for common Imperial measures: 1/16 = .0625, 1/8 = .125, 1/4 = .25:
    image add padding in code editor
  • Here's what adding 1/4-inch padding looks like:
    image quarter inch padding view
  • When you use "padding" you are actually adding padding all the way around the image:
    image quarter inch padding all around
  • You can add padding for one, or more, sides by adding -left, -right, -top, -bottom to the word padding. Note that when you manually modify the style in the Source Code editor and then click on the Design or Preview mode tab, the Text Editor will reformat the html source code and move the style from the end of the <img> tag to the beginning just following the alt tag. Have no idea why it does this but it is nothing you did.
    image padding to just right side of image
  • Adding padding-right looks like this:
    images padding right only

Scaling the Size of an Image

You can also affect the image Scale directly from within the TextEditor. A single click on an image will cause an eight-control-point selection control to appear. Each of the eight control points are live. By click-and-dragging on any of them you can increase or decrease the scale of the image in the direction you drag. Dragging any corner will simply make the image larger or smaller. Dragging the top, left, right, or bottom control-point will stretch the image in the direction you drag.
image scale control points

And there you have it. The CMS System gives you many options for placing images and a little bit of CSS styling allows you to tweak the underlying HTML and CSS to get a more professional look.




Keywords:wiscweb cms templates content classes image spacing padding margin adjust edit change move relocate place add remove   Doc ID:26507
Owner:Ryan H.Group:WiscWeb CMS
Created:2012-09-19 16:29 CDTUpdated:2014-12-02 12:34 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0