Commands in the Display section

Step 4 - Pages > Image Object >

Commands in the Display section

Previous pageReturn to chapter overviewNext page

Use the commands in this section to define how the imported image is to be displayed: with WebSite X5 you can obtain wide-angle pictures and add close-up and movement effects.

The Display Mode are:

Automatically resize Image: this option is active by default. The size of the image is automatically adapted to the size of the cell in the page layout table where you insert it.

Manually enlarge and move the Image: with this option, you can enlarge the image by clicking on it until it reaches the size set by the zoom factor. You can move the enlarged image to bring a particular part of it into the foreground: click on the image and drag it to where you want it.

To obtain this effect, the image is first shrunk to the size of the cell in the page layout table and then re-calculated either according to the Max Zoom factor (if you choose Free Movement in Movement Mode) or in proportion to the Height (if you select Horizontal Panoramic View or Vertical Panoramic View for Movement Mode). The resulting image will be bigger than the display area, and can be moved around in it.

Automatically enlarge and move the Image: this option is very similar to the previous one, except that you can move the image by moving the mouse near its edges.

If you select Automatically resize Image as Display Mode, you can select these Settings:

Quality: this is the level of quality to be maintained when the picture is saved in .JPG format. All imported images are automatically converted to .JPG format, or .PNG if transparency has been set. When a file is saved in .JPG format, the more it is compressed the poorer will be the quality.

It is best to use graphic files in .JPG, .GIF and .PNG formats. If you add an image that is not in .JPG, .GIF or .PNG format, it will be automatically converted to .JPG format, according to the specified level of compression. Files are converted to .JPG (or .PNG if they have transparency applied) even if the image is larger than the cell in the page layout table and if it is edited with the Image Editor.

In all other cases, the image is copied as it is, in order to maintain transparency applied to .GIF files.

Resample Method: this option indicates how the image's size is to be reduced (width and height). You can choose from:
Bilinear (faster): this is the quickest resample method, but renders a poorer image quality than the other methods.
Decimate: this method is fairly fast and renders a good-quality image.
Bicubic (better but slower): this is the slowest method, but it renders a high-quality image.

If you select Manually enlarge and move the Image or Automatically enlarge and move the Image for Display Mode  you can work on the following Settings:

Movement Mode: you can indicate the direction in which the image can be moved, manually or automatically. It can be:
Free Movement: the image can be dragged horizontally or vertically. Specify the Max Zoom: for example, a zoom factor of 200% will display the image at twice its original size.

Original picture

Picture with effect applied

Horizontal Panoramic View: the image can only be dragged horizontally. This effect works well on pictures whose width is greater than the height. Specify the picture's height in pixels in the Height field.

Original picture

Picture with effect applied

Vertical Panoramic View: the image can only be dragged vertically. This effect works well on pictures whose height is greater than the width. The value in the Height field is the height, in pixels, that you want to maintain for the cell in the page layout table.

Original picture

Picture with effect applied

Max Zoom: this option is only available for the Free Movement option. You can set the zoom factor for the image so that it is bigger than the available viewing area. If the image were not enlarged, you wouldn't be able to drag it.
Height: this option is only available for the Horizontal Panoramic View and Vertical Panoramic View options. In the first case  you can set the image's height in pixels, and in the second case you can set the height of the cell in the page layout table in which the image is displayed.
Enable Image Enlargement: this option is active by default. The image can be enlarged or reduced by the mouse wheel. When the page is opened, the image is shown at its original size and the icon in the bottom right corner indicates that zooming is possible. The image will be enlarged/reduced when you turn the mouse wheel, until it reaches the size set in Max Zoom.
Show the Zoom Bar: this option is only available if Enable Image Enlargement is active. The image can be enlarged/reduced by sliding the zoom bar cursor left or right.
Show the navigator: this option will display a small window inside the image with a thumbnail of the image itself. The navigator is used to highlight a particular part of the image. Visitors can drag the navigator around the image to highlight different parts. The navigator disappears when the cursor is moved away from the image.
Enable automatic continuous movement: if you select this option, the image will continue to move as long as it is displayed. This can be useful to indicate to visitors that the image can be enlarged. Automatic continuous movement is interrupted when the visitor moves the mouse wheel or the cursor in the zoom bar.

If you have set Automatically resize Image as Display Mode for the image you are working on, you can set Mouse Over Effects:

Mouse Over Effects: you can specify a special effect for when the mouse moves over the image (mouseover).
Settings: these vary according to the type of Mouse Over Effects selected: they give the parameters that define the effect (for example, the color and thickness for of the borders for the "Colored border" effect).

You can also use the Protection options to try and prevent unauthorized copying of your pictures:

Protect Image against copy: protects the image, preventing it from being copied by commands such as Save as that menus in the various browsers propose.

 


Best practices:

-

How to work with the Image Object

-

How to create and link the website's SiteMap


Further information:

-

Search engines and SEO optimization