Working With Images

 

In Proprofs Knowledge Base, you can easily add and customize your images with multiple options.

 

In this article, you will learn how to:

 


Drag and Drop Images

 

  • Select the images from the file location.

  • Drag the selected images and drop them in the ProProfs editor tab on your browser.

 

Drag and drop

 

This feature works with the current stable versions of Firefox, Chrome, Safari, and Microsoft Edge.

Copy and Paste Upload

 

 

  • Right-click on the image and select Copy. Or use CTRL+C to copy the image.

 

Copy an image

 

  • Use right-click to paste the image into the editor. Or you can simply use CTRL+V.

 

Paste

Copy-paste Image

 

This feature works with the current stable versions of Firefox and Chrome only.

 Resize the image

 

  • Right-click on the image and select “Image Properties.”

 

Image Properties

 

  • Switch to the Image Info tab.

  • Enter the custom value in the width and height field.

  • Click OK.

 

Resize the Image

 

Here is an overview 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 textual description of the image 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 size.

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

  • HSpace – This 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 – This 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.

 

Uploading an Image to the Library

 

In the Image Properties,

 

  • Switch to the Image Lightbox tab.

  • Click Browse Server.

  • Click on the Upload button.

  • Select the image to upload.

 

Upload an Image to Library

 

You can view the uploaded image in the image library.

 

Library

 

 The Advanced option

 

The Advanced tab lets you configure additional image options such as assigning it an ID, a class, a longer description, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML and CSS.

 

 

Simply go to the Image Properties and switch to the Advanced tab.

 

Advanced Tab

 

Below is the overview of all Advanced tab elements:

 

  • Id – This 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 Classes – This 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.

 

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 files you have uploaded. You can browse, upload, and manage images here. Learn more about the file manager.

Image Lightbox

This feature lets you insert high-quality images on your pages but takes as little screen space as you specify by utilizing thumbnails. 

 

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

 

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

 

(Click to view lightbox)

 

 

  • Go to Image Properties.

  • Switch to the Advanced tab.

  • Click Browse Server to select the image.

  • Click OK to save changes.

 

Image Lightbox

 

Below is the overview of all Image Lightbox tab options:

  • Image - This allows you just to pick an image that exists in your File Manager.
  • Thumbnail size (size of the image on page) - As the label says, it specifies the size of your thumbnail when the page is viewed. Choices are small(250x250), medium(350x350), large(450x450), Original image, 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. Choices are 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 a 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 the 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 working with images in the ProProfs Knowledge Base.

 

 

Was this information helpful?

The page cannot be found

The page you are looking for might have been removed, had its name changed, or is temporarily unavailable. Please make sure you spelled the page name correctly or use the search box.

add chat to your website