Embedding and Lightboxing Images

Embedding and Lightboxing Images

The CHSSWeb system allows you to easily embed images within the text of your pages, articles, and other content. You can also choose to "lightbox" that image. When a user clicks on a lightboxed image, they will see a larger version of that image. If there are multiple lightboxed images on a particular piece of content, you can choose to link those images so that users may browse through the images using a slideshow-like interface.

To see an example of lightboxing, click on the image to the right or on any of the example links embedded within this text.

When you attach an image to a page (see the instructions for attaching images to pages) the image is automatically lightboxed.

To Embed an Image *NEW*

  1. If you would like to embed a new image to your site, you can use the image attachment button to upload and insert directly from the WYSIWYG.

  2. In the upload dialog window that appears, select a picture to be uploaded, enter a name for the picture and a size of the image. Images uploaded this way will be automatically set as a lightbox.
  3. If you wish to embed an image that already exists in the CHSSweb system, simply click on the image icon and then select an originating site and then an image from that site. When you click an image it will highlight that image to confirm your selection. Then click the insert button on the bottom of the page and it will insert the image for you.
  4. You will usually want to add the image to the main content field.


To Embed a Lightboxed Image

  1. Upload an image using the Image tool in the left-hand navigation.
  2. Copy the url for the "original" version of that image.
  3. Find and edit the page, article, event, etc. that needs an illustration.
  4. You will usually want to add the image to the main content field. Highlight the text or image in that field that you want to link to the lightboxed image.
  5. Click on the link symbol in the WYSIWYG toolbar to open the link dialog. Paste the image's URL into the "Link URL" field of the link dialog.
  6. In the title field of the link dialog, add a description of the image. This will appear as the caption for the lightboxed image.
  7. Within the link dialog, click on the "Advanced" tab.
  8. For "Relationship page to target," choose "Lightbox"
  9. Save.
If you are on the new site design and you have multiple lightboxes on a page, the system will automatically turn those images into a slideshow for you. If your site is on an older design, follow these instructions:
  1. Follow the steps above for embedding a lightboxed image.
  2. Click on HTML in the WYSIWYG to edit the html source code.
  3. Find your link or links and where it says rel="Lightbox" modify it to read rel="Lightbox illustrations".
  4. Save.