TABLE OF CONTENTS


Before You Begin

This document explains how to link and format images (embedded in the content window) to display full-sized in a pop-up overlay called a shadowbox. This feature is useful for displaying complex images in a larger, more readable format and for making full-sized images available for download.


If you have not already inserted your image, please see "How to embed, size and caption an image."


How to

There are two steps to creating a shadowboxed image. 

  1. First, you link the embedded image to its full-sized counterpart. 

  2. Second, you apply the “shadowbox” style to make the linked image appear in an overlay instead of another browser window.


1. Select the embedded image

HINT: Check the “Path:xxx” that appears at the bottom of the content window to be certain the image has been selected. It should have “img” in somewhere in the path (see the green box in the screenshot below).

  1. With the image selected, click the “link” icon (chain)

  2. Select “Download a file.”

  3. Navigate to the full-sized file in the CMS (by default files are stored in the Uploads folder).

  4. Select the image file (DO NOT tick the box beside “Open link in a new window?”)




  5. Insert the link. You will be returned to the content window

    Apply the Shadowbox Style

  6. With the image still selected (or reselected if you clicked off the image) open the Styles drop-down menu at the top of the content window. Scroll to “shadowbox,” select to apply and “Save” the page.



If all went well, the image will now have a small magnifying glass hovering over its lower left corner on the draft site preview (circled in red in the screenshot below.  Click anywhere on the image to view the shadowbox. If you don't see the glass and/or clicking on the image opens it in another window (instead of in an overlay), see troubleshooting tips below.



Troubleshooting Tips


Image Opens in New Tab/Window instead of Overlay

Symptom: The magnifying glass does not appear; image opens in a separate tab or window instead of a shadowbox.

Cause: The shadowbox “class” (styling) has been applied to the wrong HTML element.

Fix: Move the shadowbox class into the "img" statement


1.    Open the HTML by selecting the tiny little HTML from the editing tools at the top of the content window.



2.    Press Command-F (CTRL-F for Windows) to search and type in "div" to find the image code in the HTML window.


Below is an example of correctly formed HTML for shadowboxed image. class="shadowbox" appears between <a and href=


If you find it anywhere else, cut and paste to move it to this position.


<div class="captionImage right" style="width: 200px;">
<a class="shadowbox" href="[file_link,id=2802]" target="_blank">
<img class="right" title="" src="assets/Uploads/_resampled/ResizedImage200132-10-gig-monitors.JPG" alt="10 gig monitors" width="200" height="132" />
</a> <p class="caption right">The new NERSC login screen, seen here on two desktop browsers, offers a sleeker interface, mobile compatibility and other new features.</p>
</div>


Common Scenarios


<img...src=””> places the embedded image on the page.  If the shadowbox class appears here, it is misplaced and should be moved into the link as shown in the first example above.  


<div class="captionImage right" style="width: 200px;">
<a href="[file_link,id=2802]" target="_blank">
<img class="shadowbox" class="right" title="" src="assets/Uploads/_resampled/ResizedImage200132-10-gig-monitors.JPG" alt="10 gig monitors" width="200" height="132" />
</a> <p class="caption right">The new NERSC login screen, seen here on two desktop browsers, offers a sleeker interface, mobile compatibility and other new features.</p>
</div>


<p class=”caption”> sets off the caption text. If class=”shadowbox” is applied to the caption (i.e., appears in this element), move it to the link element as shown in the first example. 


<div class="captionImage right" style="width: 200px;">
<a href="[file_link,id=2802]" target="_blank">
<img class="right" title="" src="assets/Uploads/_resampled/ResizedImage200132-10-gig-monitors.JPG" alt="10 gig monitors" width="200" height="132" />
</a> <p class="shadowbox" class="caption right">The new NERSC login screen, seen here on two desktop browsers, offers a sleeker interface, mobile compatibility and other new features.</p>
</div>


Caption is Linked and Image Does not Appear in Overlay

Symptom: Caption is underlined and you are unable to apply the shadowbox styling. 

Cause: Both image and caption are linked to the full-sized image.

Fix: Move the closing tag of the link or remove the extra link statement (examples below)


If both image and caption are included in the link statement together (see below), just move the "closing tag" </a> to the end of the img statement.

If the img and caption have both been linked separately (the URL appears twice), delete the redundant link and closing tag from the HTML as shown in the red boxes below.