Add an image
When you're editing a post, click the image button on the toolbar above the text area.
Enter the URL of the image. If the image is stored on your server, you can use a relative path:
If the image is on another site, you need to use its full URL:
Set the options
Enter the width that you want to be applied to the image. The width should be less than the size of the div that contains the image. You don't need to set the height. The height will be adjusted automatically so that the image's aspect ration is maintained. Setting the alignment option to left or right makes the image float to the left or right. Text will automatically wrap around the image.
The alternative text field is used if the image can't be displayed. I've pasted in the attribution for the image that I used (By University of Liverpool Faculty of Health from Liverpool, United Kingdom (dogUploaded by AlbertHerring) [CC-BY-2.0], via Wikimedia Commons]. If you use images from sources like Wiki Commons, it's important to check the usage rights for that image, and give credit for it where necessary.)
If you want to use the lightbox effect, you need to create the image as a link to itself. Click on the link tab and enter the image's URL again. Click on the OK button on the image dialog. Click on the image in the text area to select it, and select Lightbox in the style menu on the CKEditor toolbar.
Click on the OK button on the image dialog. Click on the image in the text area to select it, and select Lightbox in the style menu on the CKEditor toolbar.