Working With 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.


In this article, you will learn how to:



 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.

Upload images via drag-and-drop method


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 else, you can use CTRL+C to copy the image.


Step 2: Use right-click to paste the image into the Knowledge Base editor. Or you can simply press CTRL+V.


Right-click or press CTRL + V to open the box to paste the copied image

Press CTRL + V to paste the image and upload


 How to Resize Images


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



Go to 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.


Resize the image


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


Resize an image using drag handles


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,

  • 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.

  • HeightThis 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.

  • AlignmentThis sets the alignment of the image in the document. Available options are Right and Left.

  • PreviewThis 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 Files.


Open File Manager in KB


Step 2: Click the Upload button.


Go to Upload


Step 3: Select the image from the file location.


You will get a confirmation upon successful image upload.


Select an image to upload to library


You can view the uploaded image in the image library.

Uploaded images in the 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: Enter ID, Style, and Stylesheet Classes. Select the Language Direction.


Step 4: Click OK.


Using the Advanced Option


Below is the overview of all Advanced tab elements:


  • IdThis is a unique identifier for an image element in the page (id attribute).

  • Language Direction This controls the direction of the text: Left to Right (LTR) or Right to Left (RTL) (dir attribute).

  • Stylesheet ClassesThis is the class of the image element (class attribute). Note that an image element might be assigned more than one class. If this is the case, separate class names with spaces.

  • Style This is for CSS style definitions (style attribute). Each value must end with a semicolon, and individual properties should be separated with 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 space optimization as you specify in thumbnails.


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


An image with a lightbox applied 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: Select the image options.


Step 5: Click OK to save changes.


Use Image Lightbox


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


  • Image - This allows you to pick an image that exists in your File Manager.

  • Thumbnail size (size of the image on the page) - specifies the size of your thumbnail when the page is viewed. You can select from small(250x250), medium(350x350), large(450x450), Original image, and Custom size. Additional fields will show when selecting a custom size, allowing you to specify width and height.

  • Lightbox size (size of the image in the lightbox) - This allows you to specify the size of the image when viewing it in a lightbox. You can select from the Original image, Lightbox (800x600), and Custom size. The lightbox wisely limits the full image size if it exceeds your browser’s viewport dimensions making sure no scrollbar appears.

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

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

  • Group(for creating a gallery) - This allows you to use a name for a group/gallery that the image will be a member of. Images on a page with lightbox applied and having the same group will allow 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.



Was this information helpful?
© 2005 - 2024 ProProfs
add chat to your website