Gallery Overview

Gallery options are available for media and file modules on a page. A Gallery is a great way to display a collection of files whether it’s a collection of images, videos or documents.

When you're editing a module, you will see an option to replace an existing file or add new files. Adding new files will automatically convert a single file module to a Gallery.

The option to display files as a Gallery is not restricted to media files like images, video and audio files but works great with PDFs and other documents as well.

Each Gallery can be styled, has an option for a full screen view, may be auto-played in a loop and also has a caption area for text descriptions.

Ordering files in the Gallery is easily managed by drag and drop.

The Gallery is Different in New Digication - Here's How

If you are familiar with the Gallery module in Digication Classic, there are some differences you'll discover and appreciate in New Digication. Here are the big differences:

1. The Gallery is not a different module type, it's an option available within other modules. You can simply add more files to any existing one and it will automatically turn into a gallery
2. The Gallery is not just for image, video, audio. It can contain documents, pdfs, etc
3. A full screen view is available in the Gallery
4. A play and pause feature is available that will automatically loop through files in the Gallery

Uploading Multiple Files Creates a Gallery

To create a new Gallery, click on the Add Content button (1) at the bottom right of your ePortfolio page.

Then click on the Previous Uploads (2) to create a Gallery of files you have already uploaded to Digication or Upload File (3) to upload new files to Digication.



Select the files you would like to add to the Gallery by dragging and dropping from your computer or by clicking on the Select Files button (4).

Click on the Edit button (5) if you need to crop or rotate any of the files you selected to upload. 

Using the controls on the left side of the screen (6), you have the option to rotate the file, crop it normally, or crop it as a circle.  For further information on the image editing tools, please see the following article:  Capture Photos

After you have completed file conversions, click on the Upload button (7). 

After the files have completed processing, a new Gallery will be added to the ePortfolio page. 

Please note: The maximum accepted image resolution is 100,000,000 pixels.  If your image is larger than this, please resize before uploading.

Add More Files to a Module to Create a Gallery or Add More Files to an Existing Gallery

If you have an existing module that you would like to convert to a Gallery, click on the Edit icon (1) and then click on Add More Items (2).

Then click on the Previous Uploads (2) to add files you have already uploaded to Digication or Upload File (3) to upload new files to Digication.



Select the files you would like to add to the Gallery by dragging and dropping from your computer or by clicking on the Select Files button (4).

Click on the Edit button (5) if you need to crop or rotate any of the files you selected to upload. 

Using the controls on the left side of the screen (6), you have the option to rotate the file, crop it normally, or crop it as a circle.  For further information on the image editing tools, please see the following article:  Capture Photos

After you have completed file conversions, click on the Upload button (7). 

 

Replace a File in the Gallery

To replace a file in the Gallery, navigate to the file you would like to replace and then click on the Edit icon (1). Then click on the Replace This Item (2) button.

Select a file from Previous Uploads (3) or click on Upload File (4) to upload a new file.

Resize or Move Your Gallery

To resize the Gallery drag the resize handle (1) located at each corner of the gallery or drag any edge. You can also use the AutoResize button (2). To move the Gallery, click on the Move button (3) and then drag and drop the gallery to another location within the section.

 

Editing Gallery Display and File Settings

Changing File Display Order
To change the order of files in the Gallery, click on the Grid View button (1).

In the Gallery grid view, hover over the thumbnail until you see the move icon, then click and drag the image (2) to move it into place. Repeat for all images until you reach your desired order.  Click on the Grid View (3) link to return the to Gallery in your ePortfolio page.

Deleting a File from a Gallery
To delete a file from a Gallery, click on the Grid View button (1).

Then hover over the thumbnail until you see the ellipse (...)  icon. Click on the icon and select the Delete option (2). Repeat for all files you wish to delete from the Gallery. This deletion can not be undone. Click on the Grid View link (3) to return the to Gallery in your ePortfolio page.

Note: If you delete a file from the Gallery it will still be saved in your Previous Uploads if you wish to add it to your ePortfolio again in the future.


Replace a File in a Gallery
To change the order of files in the Gallery, click on the Grid View button (1).

In the Gallery grid view, hover over the thumbnail until you see the  ellipse (...)  icon.  Click on the icon and select the Replace This Item (2) option. Click on the Grid View link (3) to return the to Gallery in your ePortfolio page.

Gallery File Settings

A number of file settings are available to customize the display and functionality of each file in the gallery. To edit the file settings, first click on the gallery Settings icon (1). Then select the file in the gallery that you would like to customize by browsing through the thumbnails using the arrow buttons (2) displayed in the left side settings panel.

Display File (3)
The display file option is selected by default for each file you add to the gallery. If you would prefer to hide the file and only show the file name, however, you can toggle the display file option off.

Display Download Link (4)
If you wish to give your ePortfolio viewers the option to download the file, toggle on the Display Download option. A text link to download the file will be display on the right side of the file in the gallery directly below the caption area as shown in the screenshot above.

Make Image Clickable (5)
If you would like the file in the gallery to be clickable and link to another page in your ePortfolio or an external website, toggle on this option. If this option is enabled, you will see the URL field (6) where you will type in the URL of the page you would like to link to as well as the option for the page to open in the same browser window (ideal if linking to another page in your ePortfolio) or a new browser window (7) (which may be your preference if linking to an external website).

Full Size or Best Fit Toggle (8)
Display the file full size within the defined area of the gallery window or use the Best Fit option to auto-crop your image to fill the entire gallery window.

Full Size	Best Fit

 

Opacity Selector (8)

Click the “+” or “-” buttons to increase or decrease the opacity of the image, or type in an opacity percentage value.  Clicking on the number will reveal a section which can be used to adjust the opacity. If the opacity is less than 100% the background behind the file may become visible.

ALT Text (9)

Adding alternative text makes your ePortfolio more accessible to those who may be using screen readers; aids in the indexing of your ePortfolio by search engines; and provides a text display should your file not load as expected (for instance, if a browser setting has disabled images, or a slow internet connection is preventing proper loading). To learn more about alt text visit this resource: https://webaim.org/techniques/alttext/

File Settings Include Gallery Caption Styles

Providing captions for files in the Gallery gives your ePortfolio viewers important information about the files and context of your work. A caption may be added for each file that will display directly over the file as a viewer browses the Gallery.

Editing Caption Text

To edit the caption text for a file in the Gallery, first make sure the Caption toggle (1) is highlighted.  Next, click the Edit button (2), and select Edit Caption (3).

Click within the caption area, and type in your caption text.  Selecting text in the caption area will display text formatting tools (4). Text changes will be saved automatically.

 

Caption Styles
You have several caption style formatting options including position, font family, font size, font color, text alignment, padding, background color, and background opacity. To adjust caption styles, click on the Settings icon (1). Please note that the caption style is customized for each file in the Gallery. Be sure you have the correct file selected in the settings panel before changing the caption style. Use the arrow buttons (2) on the thumbnail in the settings panel to select the correct file.

After the file is selected, scroll down the settings panel until you see the Caption Styles displayed.  

Position (1)
Captions may be positioned at the bottom, center, or top of each file. 

Font Family (2)
Select the desired font from the drop down menu.

Font Size (3)
Drag the font size section or type in a font size.

Font Color (4)
Click on the color swatch and choose your desired font color or type in a hex color code.

Alignment (5)
Select left, center, right or justified alignment.

Padding (6)
Adjust padding to create more space between the caption text and edges of the caption background.

Background Color (7)
Click on the color swatch and choose your desired background color or type in a hex color code.

Background Opacity (8)
Drag the opacity section or type in an opacity percentage value. The caption will display above the file so you will like want to keep the opacity at less than 100% so that the file can be seen beneath the caption area.

Gallery Settings Options

Layout
To change your Gallery layout, click on the Settings icon (1). Click on Gallery Settings (2) in the left panel and then choose a dot or thumbnail layout (3).

The dot layout will be selected by default, however, if you prefer to show thumbnails of files in the Gallery, you may select where you would like the thumbnails to be positioned: Left, Right, Bottom or Top. The dots and thumbnails provide a small view of each file in the Gallery that can be clicked to show a larger view of the file. Arrows displayed on the files shown in the Gallery may also be used to advance to the next or previous file.

Autoplay
Toggle the Autoplay option to On (1) if you would like the Gallery to autoplay automatically when a viewer opens the ePortfolio page. The Gallery will play in a continuous loop. You can set the play speed (2) to the desired number of seconds to control how quickly the Gallery will advance to the next file.

If autoplay is enabled, one can easily click on the Pause button (3) to spend more time on a file.



Note: If autoplay is not enabled, a viewer of the ePortfolio page will still have an option to click on a play button to play through each file in the Gallery in a continuous loop if the Play/Pause option has been enabled. 

Background Color (1)
Adjust the overall Gallery background color so that it coordinates with the files and page in which the gallery is displayed. You may find it helpful to choose a neutral color that does not detract from the colors in the files shown. You can choose a color from the color palette or type in a hex color code. 

Background Opacity (2)
Drag the opacity slider or type in an opacity percentage value.

The background color will display behind the dots or thumbnails of the file (3). 

 

Display Options for Viewers

One of the advantages of using a Gallery to display multiple files is that this display gives viewers of your ePortfolio a variety of options to view your work that suit their needs and preferences.

Play/Pause (1)
If autoplay has been enabled, your Gallery will advance automatically and the viewer may watch the Gallery like a slideshow. If autoplay has not been enabled a Play button is available for viewers that prefer to have files auto advance rather than clicking on the arrows, dots or thumbnails.

Grid View (2)
The grid view is available for viewers you would like to see all thumbnails of all the files contained in the Gallery.

Full-Screen (3)
Clicking the full-screen button will open a full-screen view of the file with options to then browse by using the arrows, dots or thumbnails.

Display Options Shown in Published View

Viewers interacting with the gallery in your ePortfolio will see the Play/Pause (1), Grid View (2), Caption Toggle (3), and Full-Screen (4) view based on your selections in Gallery Settings. If these options are enabled, they will display on the right side of the Gallery when a viewer moves their cursor over the Gallery.

Clicking on the Play/Pause button will pause or restart the auto advancing of files in your Gallery.

Grid view 

Full-Screen View