Image formatting guide

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-level background image (1)
  • The lower section utilizes a top-level 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)

14image.png

Using Image Editing/Formatting Tools to Get the Most Out of Your Images

Opacity

Through the module settings, the opacity 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.

29image.png

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 through the Gallery Settings, and then reduce the opacity of your image.

30image.png

Crop Tool

When using the Upload File or Capture Photo tool, you have the option to crop your image before uploading it to the page.  For full instructions on doing so, please see the following article: Capture Photos

17image.png

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.   

For example, in the following case, a portrait style photo was uploaded as a background image.  By default, the top portion of the photo, depicting the sky, is the only portion of the image that fits into the section:

Using the crop tool, the portion of the image which you would like to highlight can be isolated:

19image.png

28image.jpg

Orientation

Using the crop tool, the portion of the image which you would like to highlight can be isolated:

26image.jpg

27image.jpg

22image.jpg

For full instructions on using the Edit tools, please see the following article: 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 the following article: 

Creating Layout by Moving and Resizing Modules

Best Fit displays a portion of the uploaded image, maintaining the original scale, that fits into your selected module size:

23image.png

Full Size changes the dimensions of the image so that the entire image fits into your selected module size:

24image.png

Fixed Toggle

Through the Image Settings, you have the option to set your image as Fixed using a slider.  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.

smooth7.gif

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

smooth8.gif

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.

smooth9.gif

For further guidance on incorporating the above formatting tools and tips into an overall ePortfolio design, please visit our Design Principles ePortfolio: https://resources.digication.com/designprinciples

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.