Gallery Display Options


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.

GalleryOverview.jpg


When you 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

GallerywithDocument.jpg

Uploading Multiples Files Creates a Gallery

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

AddContentButton.jpg


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.

UploadFilesorPreviousUploads.jpg


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

ChooseFiles.jpg


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

ConvertButton.jpg


To rotate the file, click on the rotate left or rotate right buttons (6) above the file. To crop, drag any corner or edge of the selection box around the file. When your image has been rotated and cropped to the desired size, click on the Save button (7)

RotateandCropFile.jpg


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

UploadFiles.png


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

NewGalleryCreated.png


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 Files (2).

AddMoreFiles.png


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.

UploadFilesorPreviousUploads.jpg


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

ChooseFiles.jpg


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

ConvertButton.jpg


To rotate the file, click on the rotate left or rotate right buttons (6) above the file. To crop, drag any corner or edge of the selection box around the file. When your image has been rotated and cropped to the desired size, click on the Save button (7)

RotateandCropFile.jpg


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

UploadFiles.png

 

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 Add More Files (2) button.

ReplaceFile.png

 

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

UploadFilesorPreviousUploadsToReplaceFile.jpg


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 slide.

ResizeGallery.jpg

 

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).

GridView.jpg


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.

DragToReorder.jpg


Deleting a File from a Gallery

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

GridView.jpg


Then hover over the thumbnail until you see the more …  icon. Click on the more … icon and select the Delete option. 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.

DeleteFileFromGallery.jpg

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).

GridView.jpg


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

ReplaceFileInGallery.jpg

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.

FileSettings.jpg

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
Screenshot_2018-03-15_14.36.14.png Screenshot_2018-03-15_14.36.28.png


Opacity Slider (8)

Drag the opacity slider or type in a opacity percentage value. 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 to navigate your ePortfolio, 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 due to slow internet connection). 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, double click on the caption area. Type in your caption text. Selecting text in the caption area will display text formatting tools (1). Text changes will be saved automatically. 

EditCaptionText.jpg

 

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.

CaptionFileSelection.jpg

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 slider 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 slider or type in a 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.

CaptionStyles.jpg 

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.

GalleryLayout.jpg

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.

AutoPlay.jpg

Note: If autoplay is not enabled, a viewer of the ePortfolio page will stay 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 a opacity percentage value.

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

BackgroundColorandOpacity.jpg

 

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.

DisplayOptionsViewers.jpg


Display Options Shown in Published View

Viewers interacting with the gallery in your ePortfolio will see the Play/Pause (1), Grid View (2) and Full-Screen (3) 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.

GalleryDisplayOptionsPublishedView.jpg

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

Grid view 

Screenshot_2018-03-15_18.15.54.png

Full-Screen View

Screenshot_2018-03-15_16.07.50.png

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.