Skip to navigation

Add images to your site

Pyplate comes with Lightbox Javascript image viewer installed.  When you're adding a new post you can easily embed images on your site using the CKEditor toolbar, and apply the lightbox style in the Style menu.  The lightbox effect means that when visitors on your site click on an image, the image will be enlarged and pop out of the page.

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:

/some_image.jpg

If the image is on another site, you need to use its full URL:

http://some_domain.com/some_image.jpg

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.

Save the post and visit the page you've just created.  The image should be embedded in it, and if you click on it, the picture will appear in a Javascript frame.

 

Share this page:

Follow me