Working With Images
ProProfs allows you to easily add images to pages.
- Drag and Drop
- Copy and Paste Upload
- Using the Toolbar
- File Manager
- Image Lightbox
- To add files or images to a page, simply drag them from your desktop onto the editor.
- The system will automatically upload the files or images to the server and insert them into your page without any extra steps.
- Open the image up on your desktop.
- Right-click on the image and select Copy (CNTRL + C).
- In the editor, place your cursor where you want the image to go on the page and select Paste (CNTRL + V).
- The image will be uploaded and inserted into your page.
In order to insert an image, simply select from the editor toolbar then select Upload Image.
The Image Info tab is the default tab that opens after you press the button on the toolbar. It allows you to set the image's URL and configure the way it will appear on the page.
Below is an overview of all Image Info tab elements:
- URL – This is the web address of the image 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 height.
- 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), or the image itself, and other document elements that surround the image, in pixels.
- VSpace – This sets the vertical spacing (or margin) between the image border (if present), or the image itself, and other document elements that surround 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.
You can easily resize images. If the image is too big, you can alter its dimensions by entering new values into the Width and Height fields. By default the image ratio is locked, which you can see by the button. This means that when you change one of the size values (width or height), the other one will be adjusted automatically.
If you want to freely modify both dimensions, click the button to unlock the image ratio. The button will now change to and modification of one dimension will not automatically cause the other one to be adjusted. To lock the image ratio again, click the button once more.
You can easily return to the original image size by pressing the button. This will reset the image size; the original width and height will now appear in appropriate text boxes.
The Upload tab of the Image Properties dialog window allows you to upload your own images to your image library.
To upload an image file, click Add an Image. When the file browser of your operating system opens, navigate to an appropriate folder and choose a file by double-clicking it or using the Open button. To send the file to the server, click the Send it to the Server button.
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.
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).
- Language Code – This is the language of the image element specified according to RFC 1766 (lang attribute).
- Long Description URL – This is the web address of an HTML page containing a longer description of the image (longdesc 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.
- Advisory Title – This adds the text of the tooltip that is shown when the mouse cursor hovers over the image (title attribute).
- Style – This is for CSS style definitions (style attribute). Note that each value must end with a semicolon and individual properties should be separated with spaces.
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.
This feature allows you to insert high quality images on your pages but take as little screen space as you specify by utilizing thumbnails. You can also place images in a group/gallery to easily navigate a collection of related images. An image with lightbox applied can be clicked to show the full or custom size of the image.
(Click to view lightbox)
Follow these steps to add an image lightbox to a page:
- In your content editor, click Insert dropdown > then Image.
- Select Image Lightbox tab in the Image Properties dialog.
- Click Browser server to pick an image from your File Manager. You may also just place an image path in the Image field
- Make sure to click Ok at the bottom to save your changes.
Below is the overview of all Image Lightbox tab options:
- Image - This allows you to just pick an image that exists in your File Manager.
- Thumbnail size (size of image on page) - As what 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. When selecting custom size, additional fields will show allowing you to specify width and height.
- Lightbox size (size of image in lightbox) - This allows you to specify size of image when viewing in a lightbox. Choices are Original image, Lightbox (800x600), 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 in a page with lightbox applied and having same group will allow the end-user to view other images in the group by using the navigation arrows in the lightbox frame.
Suggested Reading: File & Image Manager