CKEditor 4: Adding Images

Adding Images with the YMCA Website Services Text Editor

YMCA Website Services allows you to upload and embed images directly into a block of text, either from your computer or from the YMCA Website Services media library and browser.

Uploading Images

  • To add an image, click on the image button in the text editor toolbar.
  • Make sure you’re on the “Upload Images” tab.
  • Next, either drag your image into the upload area or click the button to select an image from your library.
  • Name your image, tag it, and write your alt description.
  • Hit “Save” to go through to the next step.

Adding Images from the Media Library

  • To add an image from the library, click on the image icon in the text editor toolbar.
  • Next, click on the tab that says “All Images”
  • Name your image, tag it, and write your alt description.
  • Hit “Save” to go through to the next step.

Sizing and Floating Your Images

After you save your image to the media library, a dialogue box will appear, giving you some additional options for embedding your image inline.

  • Entity Name simply refers to the name of your image, which you provided on the previous screen.
  • Display as allows you to change the size of the image display without the size of the original image.* By default, YMCA Website Services comes with Full, Half, and Link display modes
    • Full means your image fills the area where it’s inserted
    • Half mean the picture is half the size of its area.
    • Link outputs the image as a simple link to the picture.
  • Link to wraps the image in a link so that when users click on it, it goes to another page.
  • Align allows you to float an image to the center or either side of the page.
  • Caption outputs a caption below the image.

When you’re ready to embed the image, just click “Embed.” You can also click the back button on the bottom to choose a different image.

If you want to make changes to the image you just embedded after you’ve added it, double click on the icon, and the “Embed media” dialogue will appear.

More on Images