How to Add Images

In ProProfs Knowledge Base, you can easily add images with multiple upload options and customize them to make help articles visually appealing for a better user experience.

Images and screenshots add more details to your help pages and give users a better understanding.

Use Case: 

A step-by-step tutorial on using a software feature can be made much clearer with screenshots illustrating each step.

Benefits:

• Enhanced Clarity: Images provide visual cues that help users better understand complex instructions.
• Improved Engagement: Visual content makes articles more engaging and appealing to users.
• Efficient Communication: Images convey information quickly, saving users time and effort in grasping concepts.

In this article, you will learn to add images using:

• Drag and Drop
• Copy and Paste Upload
• Resizing Image
• Uploading an Image
• The Advanced Option
• File Manager
• Image Lightbox

 How to Upload Images using the Drag and Drop method

Step 1: Select the image(s) from the file location.

Step 2: Drag the selected images and drop them in your browser’s ProProfs Knowledge Base editor tab.

This feature works only with the stable Firefox, Chrome, Edge, and Safari versions.

 How to Copy and Paste Images

Step 1: Right-click on the image and select copy or use CTRL+C.

Step 2: Right-click in the Knowledge Base editor or press CTRL+V to paste the image.

 How to Resize Images

Step 1: Right-click on the image and select “Image Properties.”

Step 2: Switch to the Image Info tab.

Step 3: Enter the custom value to change the width, height, and other attributes.

Step 4: Click OK to resize the image.

Alternatively, you can also click the image and use the drag handles to resize the image.

Here is a short description of all Image Info tab elements:

• URL – This is the image’s web address if it is located on an external server. Use the full absolute path, for example, http://example.com/img.jpg.

• Browse Server – If the image has already been uploaded to your image library, you can browse the server and select the image.

• Alternative Text – This short image description is for users with assistive devices (such as screen readers).

• Width – This sets the width of the image in pixels. By default, this is set to the original image’s width.

• Height – This sets the height of the image in pixels. By default, this is set to the original image’s height.

• Border – This sets the size of the solid border around the image in pixels.

• "HSpace" sets the horizontal spacing (or margin) between the image border (if present), the image itself, and other document elements surrounding the image in pixels.

• "VSpace" sets the vertical spacing (or margin) between the image border (if present), the image itself, and other document elements surrounding the image in pixels.

• Alignment – This sets the alignment of the image in the document. Available options are Right and Left.

• Preview – This provides a preliminary view of the selected image, formatted according to the options chosen on the left.

By default, the image ratio is locked, which you can see by the button. When you change one of the size values (width or height), the other one will be adjusted automatically.

If you want to modify both dimensions freely, click the button to unlock the image ratio. The button will now change, and modifying one dimension will not automatically cause the other one to be adjusted. To lock the image ratio again, click the button once more.

 How to Upload images to the Library

Step 1: In the navigation menu, click on Files.

Step 2: Click the Upload button.

Step 3: Select the image from your file location.

You will get a confirmation upon successful image upload.

You can view the uploaded image in the image library.

 How to use the Advanced option

The Advanced tab lets you configure additional image options, such as assigning an ID, language direction, stylesheet classes, and style. It is for advanced users with knowledge of HTML and CSS.

Step 1: Go to the Image Properties.

Step 2: Switch to the Advanced tab.

Step 3: Configure additional image options like ID, language direction, and stylesheet classes.

Step 4: Click OK to apply the changes.

Below is the overview of all Advanced tab elements:

• Id – This is a unique identifier for an image on the page (id attribute).

• Language Direction – This sets the text direction as Left to Right (LTR) or Right to Left (RTL). (dir attribute).

• Stylesheet Classes – These are classes assigned to the image element. Multiple classes can be assigned by separating them with spaces.

• Style – This defines CSS style attributes. Each value should end with a semicolon, and properties should be separated by spaces.

 How to Use File Manager

If the image has already been uploaded to your file manager, you can browse the server and select the image.

The file manager is a central location of the files you have uploaded. You can browse, upload, and manage images here. Learn more about the file manager.

 How to use the Image Lightbox

This feature allows you to add high-quality images to your pages and optimize space as you specify in thumbnails.

You can also place images in a group/gallery to navigate a collection of related images easily.

An image with an applied lightbox can be clicked to show the full or custom size of the image.

Step 1: Go to Image Properties.

Step 2: Switch to the Image Lightbox tab.

Step 3: Click Browse Server to select the image.

Step 4: Customize thumbnail size, lightbox size, stylesheet class, lightbox title, and group for gallery viewing.

Step 5: Click OK to save changes.

Here is the description of all the Image Lightbox tab options:

• Image - This option lets you select an image from your File Manager for display in the lightbox.

• Thumbnail size - This option determines the size of the thumbnail image when viewed on the page. You can choose from small (250x250), medium (350x350), large (450x450), Original image, or Custom size. When selecting a custom size, additional fields will appear to specify the width and height.

• Lightbox size - This option allows you to set the size of the image when viewed in the lightbox. You can choose from Original image, Lightbox (800x600), or Custom size. The lightbox will automatically limit the full image size if it exceeds your browser's viewport dimensions, ensuring no scrollbar appears.

• Thumbnail stylesheet class - This option enables you to add a CSS class to your image element for further customization.

• Lightbox title - This option allows you to specify the text that appears at the top of the Lightbox frame.

• Group (for creating a gallery): This option allows you to create a group or gallery for multiple images. Images on a page with lightbox applied and having the same group will enable the end-user to view other images in the group by using the navigation arrows in the lightbox frame.

That is all about adding and customizing images in ProProfs Knowledge Base.