Enter your content here
Enter your content here
We have the best
products
Image Properties

Display Properties

Display properties control basic details about an image like its size, alignment and margin.
  1.  Click on the image you want to change.

  2. Click on the Image Properties  icon.

  3. The image properties dialog appears.

  4. Use the various fields and tabs to modify the image.

  5. Press OK to commit changes.

  • Width - controls the width of the image. when using % or vw the height is automatically zeroed out.  If the image is specified as % or vw an you press OK, the Responsive Image Processor will execute and automatically create multiple images so your image looks good on all devices without wasting bandwidth. If the image is an SVG, the Responsive Image Processor will not run as SVG handle scaling automatically.

  • Height - controls the height of the image. If the width is specified as either % or vw, this must be empty.

  • Don't modify - when checked will place the image exactly as it was uploaded without changing it's size or cropping it. This is required if you are uploading an animated GIF. In the case of an animated GIF, you must make the image the right size using a different tool like Photoshop before uploading.

  • Preserve aspect ratio - when checked will ensure the image is not distorted to accommodate the dimensions. As a result, for example, if you change the width, the height will automatically change to preserve the original aspect ratio.

  • Alignment - can be Left, Right or None. If you choose None, the alignment can be controlled by the containing table cell, or paragraph.

  • Top margin, Bottom margin, Left margin, Right margin - place a space around the respective side of the image.

  • Alternate text - is what visitors see if they don't have a graphical browser. This value is used when search engines index your site. If a blind person is using text-to-speech software or a braille reader, they will get this text. We recommend up 65 characters of text.
[IMAGE]
  Border

Border lets you put a colored border around an image.

  • Border width - specifies the width of a border that surrounds the image.

  • Border style - is the image style.

  • Border color - is the color of the border.
[IMAGE]
Effects/Crop

This is where you can apply various effects, change the quality of the image so it loads faster and crop the image.  Because the effects are applied in order and the effect the result you get from each effect, it is recommended that you apply them using the icons in the toolbar from left to right.


  • Image Quality (figure 2)- allows you to compress an image so it loads more quickly. This only works if the image uploaded was a JPEG. It has no effect for other image types.

    1. Click on the star  icon.

    2. Enter a number from 1 to 100 for quality. The higher the number the higher the quality but also the larger the image.

    3. Enter a Blur value between 0 and 1. The higher the number the more the image is blurred. Add a blur will sometimes allow the image to look good with a lower quality value.

    4. Press OK to apply this effect.
  • Rotate Image Clockwise - Click on the Rotate Clockwise  icon. The image will be rotated clockwise 90 degrees.

  • Rotate Image Counter Clockwise - Click on the Rotate Counter Clockwise  icon. The image will be rotated counter clockwise 90 degrees.

  • Flip Horizontal - Click on the Flip Horizontal  icon. The will image be flipped horizontally.

  • Flip Vertical - Click on the Flip Vertical  icon. The image will be flipped vertically.

  • Crop - Click on the Crop  icon. The crop operation will begin by drawing a red rectangle around the image with a resize handle in each corner. Use drag and drop on the resize handles to site the red rectangle to reflect the cropped area. Click outside of the red rectangle to complete the crop operation. Press OK to apply this effect.

  • Undo Crop - Click on the Undo Crop   icon. The image will revert back to it's original  state. Press OK to apply this effect.

  • Rounded Corners (figure 3) - Click on the Rounded Corners  icon. This make the corners of the images round. Check the "Make corners round" checkbox to make the corners round. Modify the "X rounding" and "Y rounding" values to change the radius and shape of the rounded corners. These values are roughly equivalent to pixels. Press OK to apply this effect.

  • Vignette (figure 4) - Click on the Vignette  icon. This will make you image into a vignette. It will make your image fade into its background without a definite border. To make your image into a vignette, check the "Create Vignette" checkbox. The "Softness" drop-down provides different levels of softness for the edges of the vignette. Click on the "Background color" rectangle to bring up a color picker you can use to select the background color the edges will fade to. The "X offset" and "Y offset" fields control how much the fading will come in from the edges of the image. These values are roughly equivalent to pixels. Press OK to apply this effect.

  • Raise Image (figure 5) - Click on the Raise Image  icon. This will make your image be raised with beveled corners. Check the "Raise Image" checkbox to raise the image. The "Depth" is basically the width of the beveled corners. Press OK to apply this effect.

  • Drop Shadow (figure 6) - Click on the Drop Shadow  icon. this will put a drop shadow under your image. Check the "Shadow" checkbox to give your image a drop shadow. "Depth" is how deep the shadow will be around the image. This is roughly equivalent to pixels.  "Opacity" is basically a percentage the defines how dark the drop shadow is.


[IMAGE]














figure 1


[IMAGE]







figure 2



[IMAGE]










figure 3



[IMAGE]














figure 4



[IMAGE]











figure 5



[IMAGE]











figure 6

Large Image 

You may have the system automatically create a large version of your image in response to user actions.

  • Large - provides options to display a large image when the user rolls their mouse over the image or when the user clicks on the image. The default is None (no large image).

  • Large width - specifies the width of the large image when it pops up.

  • Large height - specifies the height of the large image when it pops up.

  • Position - in where the large image will appear when it pops up. Center means the image will be centered in the browser window. Absolute means it will be places at an absolute pixel position on the screen as specified by "Large top" and "Large left".

  • Start opened - when checked will cause the large version of the image to pop up as soon as the page is visited.

  • Printable - will place a printer icon in the header of the image. If the visitor clicks the icon they will be able to print the images. This is useful for offering online coupons.

  • Downloadable - will place a download icon in the header of the images. If the visitor clicks the icon they will be able to save the large image to their local hard drive.

  • Slideshow - will cause all the images that have "On Click", selected to participate in a slideshow. When the user clicks on any of the images, that image will enlarge but each image in the order they appear on the page will pop up and down creating a slide show.

  • Close button - will place a close icon in the header of the large image. The user can click it to close the image or slideshow.
[IMAGE]
Large Image - Caption

The caption tab allow you to put a title in the header of the large version of an image and a caption below the large version of an image.

  • Title for large image - is the title that will appear above the image where control icons like print, download and close appear. You can use WYSIWYG formatting to control the appearance of the title.

  • Caption for large image - is the caption text that will appear below the image. You can use WYSIWYG formatting to control the appearance of the title.
 
[IMAGE]
Large Image - Effects/Crop

This is where you can apply various effects, change the quality of the large image so it loads faster and crop the large image.  Because the effects are applied in order and the effect the result you get from each effect, it is recommended that you apply them using the icons in the toolbar from left to right. This is similar to the Effects/Crop for the image as described above.

  • Image Quality (figure 2)- allows you to compress an image so it loads more quickly. This only works if the image uploaded was a JPEG. It has no effect for other image types.

    1. Click on the star  icon.

    2. Enter a number from 1 to 100 for quality. The higher the number the higher the quality but also the larger the image.

    3. Enter a Blur value between 0 and 1. The higher the number the more the image is blurred. Add a blur will sometimes allow the image to look good with a lower quality value.

    4. Press OK to apply this effect.
  • Rotate Image Clockwise - Click on the Rotate Clockwise  icon. The image will be rotated clockwise 90 degrees.

  • Rotate Image Counter Clockwise - Click on the Rotate Counter Clockwise  icon. The image will be rotated counter clockwise 90 degrees.

  • Flip Horizontal - Click on the Flip Horizontal  icon. The will image be flipped horizontally.

  • Flip Vertical - Click on the Flip Vertical  icon. The image will be flipped vertically.

  • Crop - Click on the Crop  icon. The crop operation will begin by drawing a red rectangle around the image with a resize handle in each corner. Use drag and drop on the resize handles to site the red rectangle to reflect the cropped area. Click outside of the red rectangle to complete the crop operation. Press OK to apply this effect.

  • Undo Crop - Click on the Undo Crop   icon. The image will revert back to it's original  state. Press OK to apply this effect.

  • Rounded Corners (figure 3) - Click on the Rounded Corners  icon. This make the corners of the images round. Check the "Make corners round" checkbox to make the corners round. Modify the "X rounding" and "Y rounding" values to change the radius and shape of the rounded corners. These values are roughly equivalent to pixels. Press OK to apply this effect.

  • Vignette (figure 4) - Click on the Vignette  icon. This will make you image into a vignette. It will make your image fade into its background without a definite border. To make your image into a vignette, check the "Create Vignette" checkbox. The "Softness" drop-down provides different levels of softness for the edges of the vignette. Click on the "Background color" rectangle to bring up a color picker you can use to select the background color the edges will fade to. The "X offset" and "Y offset" fields control how much the fading will come in from the edges of the image. These values are roughly equivalent to pixels. Press OK to apply this effect.

  • Raise Image (figure 5) - Click on the Raise Image  icon. This will make your image be raised with beveled corners. Check the "Raise Image" checkbox to raise the image. The "Depth" is basically the width of the beveled corners. Press OK to apply this effect.

  • Drop Shadow (figure 6) - Click on the Drop Shadow  icon. this will put a drop shadow under your image. Check the "Shadow" checkbox to give your image a drop shadow. "Depth" is how deep the shadow will be around the image. This is roughly equivalent to pixels.  "Opacity" is basically a percentage the defines how dark the drop shadow is.
[IMAGE]













figure 1


[IMAGE]







figure 2



[IMAGE]










figure 3



[IMAGE]














figure 4



[IMAGE]











figure 5



[IMAGE]











figure 6