Image formatting guide

Version: Kora Courses, February 28, 2023 or later

Permissions required: Student

Images provide an effective way to personalize your ePortfolio and set it apart from the pack.  It is often said that a picture is worth a thousand words. Images can quickly convey a great deal of information, making them an indispensable tool for telling your story through your ePortfolio. 

Digication provides multiple options for adding images to your ePortfolio, and users have a number of options for formatting and styling.  

The image below depicts an ePortfolio for a writing program.  The page displayed contains two separate sections, each utilizing images in different ways:

• • The top section on the page utilizes a bottom-layer background image (1).
  • The lower section utilizes a top-layer background image (2).
  • Within the top section, an image depicting an owl has been uploaded as standalone page content (3).
  • The Rich-text module in the top section uses an image of a bookshelf as a background image (4).

Use image editing/formatting tools to get the most out of your images

Opacity

• Through the module settings, the opacity (1) of an image can be reduced.  This creates a semi-transparent version of your image, which can add an interesting design element to your ePortfolio page.

• The opacity setting can be used together with the module background color to add a colored tint to an image in your ePortfolio.  To do this, choose a background color (2) through the Gallery Settings, and then reduce the opacity of your image.

Crop tool

• When using the Upload File Capture Photo or Search Image tool, you have the option to crop your image (1) before uploading it to the page.  

For more information on using the crop tool, please see “Capture photos”.

• When using an image as a section or module background, the crop tool gives you control over which part of an image appears behind your content (2).   

For example, in the following case, a landscape-style photo was uploaded as a background image.  By default, the right-hand portion of the photo, depicting more trees, is the only portion of the image that fits into the section.

• Using the crop tool, the portion of the image that you would like to highlight can be isolated (3).

Orientation

• Using the Orientation tool (1), you can rotate (2) the images to the desired angle, ensuring that they are aligned as per your preference (3). 

For more information on using the Rotate tool please see, “Capture photos”. 

Full size vs. best fit

Through the Image Settings, you can select either Full Size or Best Fit for your image.  This is particularly useful when you have used click and drag to resize your image module to dimensions different than the uploaded image.  For more information on using click and drag to resize modules, please see “Creating layout by moving and resizing modules”.

• Best Fit (1) displays a portion of the uploaded image, maintaining the original scale, that fits into your selected module size.

• Full Size (2) changes the dimensions of the image so that the entire image fits into your selected module size.

Fixed toggle

• Through the Image Settings, you have the option to set your image as Fixed using a slider (1).  This is particularly useful for Section backgrounds, as it determines whether or not the background image moves as you scroll. 
  
• When your section background image is set to Fixed, it will not move as you scroll down the page.  This effect can be incorporated into your page design, allowing you to reveal hidden parts of larger images as the user scrolls down the page.

• When Fixed is turned off, the image moves with the section as you scroll down the page.

• You can create a three-dimensional effect on your ePortfolio page by placing a non-fixed section between two fixed sections that share a common background image.

For more information on incorporating the above formatting tools and tips into an overall ePortfolio design, please see, “ePortfolio Design Principles”.