[Media] - Formal Figure

How to use a Formal Figure in content pages

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  

Previous Next

1. From the Project Dashboard, select the Content Node from the Outline mode to open it in author mode.
2. Alternatively, users can switch to Author mode and select the Content Node.

Note: The Formal Figure media element can be used to insert images into the content and can hold one image file at a time. The supported file types are jpg, jpeg, png, gif, svg, and bpm.

3. The Image media element can be inserted in the following ways:
   • Select and Insert
   • Drag and Drop
4. To select and insert, 
   • Position the cursor in the editor
   • Click the Media dropdown on the menu bar
   • Select Formal Figure
5. To drag and drop, 
   • Click the Widgets and Patterns button on the left panel
   • Drag and drop the Formal Figure media
6. The Formal Figure option allows an image to be uploaded into the content along with the following details on display:
   • Figure ID
   • Figure Name/Title
   • Caption text
   • Source of the image

Note: The section for Caption Text and the Source of the Image can be deleted by clicking on the delete icon next to it.

7. Click the File button on the Formal Figure media to insert inline images from any of the two options:
   • Project Repository
   • Learning Object Repository
8. To upload from Project Repository:
   • Select a file.
   • Click Add Selected.
   • To upload a file from your local machine, click the upload button and select the image.
   • Click Save on the editor to save the changes.

Note: The uploaded image will not be added to the Learning Object Repository, it will be stored in the project repository.

9. To upload from Learning Object Repository:
   • Select an image (these images have already been uploaded to the LOR and hence are visible on this tab).
   • You can search or apply filters to find the required image.
   • On selecting the image, click Add Selected.
10. Click the Settings button on the Formal Figure pattern to configure:
    • Width - to set the width of the image
    • Height - to set the height of the image
    • Aspect Ratio - by default the aspect ratio of the image is locked to preserve proportionate scaling.
    • Reset - to reset the size of the image to its original size. 
    • Display an enlarged image upon click - disabled by default. If enabled, the users can enlarge the image to view in full screen while previewing.
    • Alt Text - to insert the alt text associated with the image (Maximum character limit - 250)
    • Alignment - to align the image as required
      1. Left 
      2. Center (default)
      3. Right
11. Click Save to update the Settings.
12. Click Save on the editor to save the changes in the content node.

Note: On navigating to Author or Preview mode from the top navigation, users will need to select a node to view its content.