Adding an image to the Portfolio

Posted on

Go to the ‘My Portfolio’ page. Open the concerning portfolio. Generally, you will make use of artifacts to add images to your portfolio. Sometimes however, you will want to add an image directly to the portfolio from within the editor, e.g. if you want to add a photograph of yourself to your personal details. Below an explanation.

  1. Selecting the image
    Go to the page/section to which you want to add the picture. Make it active by clicking on it. The menu will open up.
    Portfolio-AddImage
    Click on the add-image icon. Blackboard will show you an extensive popup-screen with three tabs. Via  ‘Browse my Computer’ you can select an image-file to add.
    Portfolio-AddImage_popup
    Choose your file and add a description of the image and a title if desired. The title wil be shown if you’ll hover over the image with the mouse. Beware: big images will load slower than smaller ones in the browser!
    .
  2. Changing the size of the image
    We discourage the use of very large images, since this will slow down the loading time in the browser. The quality of the digital photography has evolved, but the better quality of the images has a counterpart: their bigger size, digital photographs grow up to 4 MB or more! Our advise is to reduce the size of images to a maximum of 1 MB.
    Effectively reducing the size with Paint
    Open the image-file in Paint. Resize it (using ‘Resize’) untill the desired size using Save as… and choose jpg as the ‘Save a type’. The dimension and the size of the file will be smaller. Beware: do not replace the original image-file, since there will be a reduction in the quality that never can be recovered!
    Changing the size in Blackboard
    You may alter the size of the appearance of the image, so it fits to your preferences. This is done at the tab ‘Appearance’ in the popup-screen. If you change the format this way, Blackboard will fit the image optically to these dimensions, while retaining its characteristics. The filesize remains the same. You may even give the file a bigger size, allthough quality will be lost in the endresult: the picture will be granular.
    Portfolio-AddImage2
    .
  3. Additional possibilities
    The tabblad used before has a few extra features that can be used to change the way the picture is presented (in pixels):
    – Horizontal/Vertical Space: extra space between the edge and/or text and the picture
    – Border: adding a border
    – Style: the result of the adjustments above will be reflected in the HTML-code. Changes and additions can be made to this field.
    In the example below, some of the fields are filled in and the Style field is altered by hand, to make the border red.
    Portfolio-AddImageAppearance
    A few of the more advanced options can be changed via the tab ‘Advanced’, like showing another image while hovering over the picture with the mouse, etc.
    Issue ‘Update’ (at the right) to save the changes.
    .
  4. Changing the image
    If you want to make changes to the attributes of the image, you just click your right mousebutton and choose ‘Edit’. The same popup-menu mentioned above will be shown.