Adding Photos to the CKEditor

To upload an image to the CKEditor, click on the portrait icon highlighted below:

Once you click on that icon, you'll be given the option to add an image from our library, or upload a new one. This process is identical to the way we upload images to components:

Adding existing images

Drupal does give you the ability to search through our library, but it has its limitations. There isn't automated meta data added to images, so you would need to search based on broad keywords. The search itself is focused on the title of the image it was given when uploaded to Drupal.

In the example below, I search for "city hall". Once I find the image I want, I select the image with the box in the top right-hand corner, and then scroll down and click "select image":

Adding new images

To add new images, click the "new image" tab:

From there, the process is straightforward. Choose the image you wanted to add from your desktop by clicking "choose file".

After picking your file, you'll be given an option to add a "title" and "alt text". Please complete both fields. The "title" field ties back to searching the photo library, and the "alt text" is used by folks who are blind or have low vision and use screen readers to engage with the website.

Once those fields are filled in, click the "upload and insert into editor" button to get the image to appear in your component:

Adjusting the image size

After uploading and inserting your image, you'll be sent to a screen that provides further options for sizing the image before embedding, as well as aligning the image and adding a caption:

For the most part, especially for horizontal images, you always want to select "full column wide (embedded)" at the bottom of the drop down. By selecting this option, the image will fill the full width of the CKEditor field. Play around with the different image styles to see which option works best for you.

In some cases, especially when you have an image that is more vertical than horizontal (like a headshot), you might want to use the "1/3 column wide" or "1/2 column wide" option and have the text wrap around the image.

To set that up, first select the image size, and then on what side you want the image to appear (left or right):

The end result of the screenshot below looks like this on the site:

Have feedback for this page? Let us know!