Gallery

The main purpose of the gallery module is to display images. When you click the thumbnail image it expands the picture to its full size. You can also make your image a link and you can then create a "gallery" of links that go various pages in your site or to other sites.

Step 1: Log into Javelin.

Step 2: Choose which web page and region you want to add the module to, then click the black "Add" button above this region.

Step 3: The Add Module popup will appear. Choose that you would like to insert a "Gallery" module.

Step 4: The module will appear on the page with filler content. This content is not visible to users or while in View mode.

Click & drag the module from the four-pointed arrow on its admin bar to move the module between regions or other modules on the page.

Step 1: Click on the "Add" button on module's admin bar. (If the module is empty, you can also click "Create your first image" within the module)

Step 2: In the subsequent popup, click the "Select Image" icon or link to the right of the top text input (this will either be labeled "Image" or "Gallery Item Image").

Step 3: Navigate to the image you which to use and click it to select it. If you do not know how to do this, view the the tutorial on the Image Manager.

Step 4: Click "Save" to insert the image and close the popup. Click "Save & Add More" to add more images.

Step 1: Hover over the item you wish to move.

Step 2: Click and hold the four-pointed arrow, then drag your item to its new position.
Don't worry if it looks weird or breaks slightly, this may not be permanent. Refresh the page to see if anything broke.

If the changes didn't "stick" check this topic.

Step 1: Hover over the item you wish to move.

Step 2: Click the trashcan icon and "Yes" on the prompt.

Step 1: Hover over the image in question and click the pencil icon on the top left. (Or complete the following steps after adding an image and before exiting the popup.)

Step 2: Add the caption you would like to have underneath the image in the second text input labeled "Caption."

Step 3: Click "Save" to insert the image and close the popup. Click "Save & Add More" to add more images.

The Usual Culprit

The captions have uneven line counts, i.e., one image has a caption that spans three lines and another has only one line.

The Fix

Make your captions have even line lengths by adding <br /> to the end of the shorter captions to equal the highest line count in the image's row.

If you have icons AND want to link to a page within your website

Step 1: Hover over the image in question and click the pencil icon on the top left. (Or complete the following steps after adding an image and before exiting the popoup.)

Step 2: Click the icon next to the "Link" field that looks like a page with a chain link.

Step 3: Use the dropdown to select the desired page. It's relative link will appear in the "Link" field.

Step 4: Click "Save" to insert the image and exit or "Save & Add More" to add more images.

If you don't have icons OR want to link to a page outside your website

Step 1: Hover over the image in question and click the pencil icon on the top left. (Or complete the following steps after adding an image and before exiting the popoup.)

Step 2: Add the link you would like to have underneath the image in the third text input labeled "Link". View the tutorial on creating links.

Step 3: Click "Save" to insert the image and exit or "Save & Add More" to add more images.

Step 1: Hover over the image in question and click the pencil icon on the top left. (Or complete the following steps after adding an image and before exiting the popoup.)

Step 2: Click the "Select File" icon or link on the right of the text input. Navigate to your document. If you do not know how to do this, please review the tutorial on how to use the document manager.

Step 3: Click "Save" to insert the image and exit or "Save & Add More" to add more images.

Step 1: Hover over the arrow next to "Add" and click "Settings."

Step 2: Click "Images" from the left.

Step 3: Change the "Width" and "Height" fields to the desired dimensions.

Step 4: Click "Save" or "Save & Continue."

You cannot change the size of the image through the gallery module. See the tutorials on the Image manager for resizing images.

Step 1: Find the dimensions of the full-size image.

Step 2: Use one of the following formulas to determine the final ratio:

New Width = (Original Width * New Height) / Original Height
New Height = (Original Height * New Width) / Original Width

Step 3: Enter the results into the appropriate thumbnail size fields.