Gallery display options

Version: Kora Courses, November 02, 2023 or later

Permissions required: Student

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.

0504-1.png

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.

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.

0504-2.png

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

0504-3.png

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

0504-4.png

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

0504-5.png

  • 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 more information on the image editing tools, please see the following article:  Capture photos

0504-6.png

  • After you have completed file conversions, click Upload (7)

0504-7.png

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

0504-8.png

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

0504-9.png

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

0504-10.png

  • 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 (5).

0504-11.png

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

0504-12.png

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

0504-13.png

  • After you have completed file conversions, click Upload (8)

0504-14.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 the “Replace This Item” (2) button.

0504-15.png

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

0504-16.png

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.

0504-17.png

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

0504-18.png

  • 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 to the Gallery in your ePortfolio page.

0504-19.png

Deleting a file from a Gallery

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

0504-20.png

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

0504-21.png

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

0504-22.png

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

0504-23.png

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.

0504-24.png

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 displayed 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
0504-25.png 0504-26.png

 
Opacity selector (9)

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 (10)

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, click the Edit button (1), and select Edit Caption (2).

0504-27.png

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

0504-28.png

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.

0504-29.png

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 want to keep the opacity at less than 100% so that the file can be seen beneath the caption area.

0504-30.png

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.

0504-31.png

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.

0504-32.png

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 as shown in the screenshot below (3).

0504-33.png

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.

0504-34.png

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.


0504-35.png

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

Grid view 

0504-36.png

Full-screen view

0504-37.png

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.