An Image panel can be used to add graphic content to your pages, such as a photograph, logo or infographic. Images help bring your content to life, leave a lasting impression on your visitors and encourage them to engage with your content for longer. And don't forget... "A picture is worth a thousand words"!

💡 Images should be high resolution, and typically twice the size of the Image panel you wish to fill.

Where to find the Image panel

Navigate to a Document.
Select ‘Design’ for the Version of the Document that you want to work on.

The Version will then open in Design mode and the Panel palette (one of the most important features of TigerDesigner!) can be found to the right of your page design.

How to add an Image panel

Select the ‘Image’ panel type from the Panel palette.
Click and drag out an area on the page.
Select the picture icon from the flyout menu, which will open your Inventory.

From here you can upload a new image, select an existing image or search for an image in the Getty Stock Library.

💡 A filter can be found at the top of your Inventory making it easier to find what you’re looking for. Search by keyword, images used in your design, flagged or those that have been added from the Getty Stock Library.

Existing Images

Use an image that has already been added to your Inventory.

Hover over an image in your Inventory.
Select the tick icon.
The image will be added into the Image panel or replace the one previously used.

Upload an Image

Upload and use one of your owns images into your Inventory.

Hover over the small cog icon at the top right-hand side of your Inventory.
Select 'Upload Images'.
Drag in a file(s) from a folder on your machine or click to ‘Add Files’.
Select Start ‘Upload’.
Hover over the image just uploaded.
Select the tick icon.
The image will be added into the Image panel or replace the one previously used.

💡 When uploading your own images, add or update the description to make it easier to search for when you need it.

Select the Inventory Tools icon from the left-hand menu in your design.
Select the Inventory icon.
Hover over an image and select the magnifying glass icon.
Enter some keywords or a description for the image in the Description field.
Select Save.

Stock Images

Search and find a new image in the Getty Stock Image Library. Stock images are high quality, versatile and can easily fit your Document needs.

Select the 'Stock Library' tab.
Search by keyword or use the filter to narrow down your search.
Hover over an image and select the tick icon to add to your panel.

💡 Stock Images - what you need to know

Unlimited content tokens are available in your account. but you are still required to 'Checkout' any images you wish to use.
When searching for a stock image, click on the magnifying glass to see a larger preview, find similar stock images, or add the image to your library to use later.
Images purchased from the Getty Stock Library are licensed for use with PageTiger only.
A Document watermark means there are unpurchased stock images in your design.

Image panel Settings

When a panel is selected, the Settings palette will become active ready for you to begin applying settings, such as a keyline colour or rounded corners. There are 3 main sections in this area, Name, Accessibility and Panel.

Fully Editable gives you full control of every setting of a Text panel, so it's strongly recommended that you read the below section and become familiar with the settings available.

1. Name

Name

The 'Name' field is set default, but it's important to update it to something unique that reflects the content - for example, 'Photograph of the Finerfood bakery'. Descriptive names make it easier to identify the panels in your design, which is particularly helpful if you're using lots of the same panel type.

2. Accessibility

Visible to Screen Reader

A simple checkbox option is available here for 'Visible to Screen Reader'. It will be ticked by default, but if you don't want the Image panel to be visible in Accessible Mode it can be unselected.

💡 Find out more about images and accessibility in our guide to accessible documents.

3. Panel

This section is used to customise the appearance of the panel - for example, set the image to greyscale, add a border or set a rounded corner.

Vertical Alignment

Choose how the image will be aligned vertically in the panel - for example, the top, bottom or middle of the panel.

Horizonal Alignment

Choose how the image will be aligned horizontally in the panel - for example, the left, centre or right of the panel.

Greyscale

Greyscale can be used to remove the colour from an image and display it in black and white. There may be times that you would like to use this option, perhaps to highlight some imagery on a page and make it stand out from others. Simply tick the 'Greyscale’ checkbox to apply.

Keyline Colour

A keyline adds a border/boundary line around your panel. Use the 'Keyline Colour' field to specify the colour that you wish to set for the border around the edge of the panel.

Keyline Width

Use the 'Keyline Width' to specify the width of the border around the edge of the panel. Enter a numerical value to set the keyline width- the higher the value, the thicker the keyline.

💡 Did you know you can choose a different thickness for each side of a panel? Simply enter four comma-separated values to apply. For example, 0, 0, 5, 0 (top keyline, right keyline, bottom keyline and left keyline) will display a keyline along the bottom of the panel only.

Opacity

Enter a numerical value between 0 - 100 to set the opacity of the image - the higher the value, the more opaque the image will be.

Corner Radius

Use the 'Corner Radius' to specify the roundness of the corners of the panel. Enter a numerical value to set the corner radius - the higher the value, the rounder the corner.

💡 Did you know you can choose a different radius for each corner of a panel? Simply enter four comma-separated values to apply. For example, 10, 10, 0, 0 (top left corner, top right corner, bottom right corner and bottom left corner) will display a corner radius along the top of the panel only.

Position X & Y

Adjust the position of the panel using X and Y coordinates. 'X' sets the position of the left edge and 'Y' sets the top edge of the panel.

Width & Height

Adjust the width and height of the panel. The size is measured in pts.

How to crop an image

Cropping is ideal if you want to improve the composition of your image or focus on a particular part for impact - it's a great solution for improving a photo or image by removing the unnecessary parts.

Click on an Image panel.
Select the ‘Crop Image’ option.
A pop-up box will display containing several crop options, as well as the option to rotate or flip the image.

How to clear an image

If you need to completely remove an image from an image panel it can be cleared. Remember to delete the panel or replace the image to prevent a blank space in your design, which may not be complementary to your page.

Click on an Image panel.
Select the ‘Clear Image’ option.
You will be asked to confirm that you want to clear the image.

Once cleared the image panel will be empty and you can add a new image at any time.

Inventory Manager Housekeeping

How to delete an image

There's no limit to how many images can be uploaded into your Inventory, however we recommend regular housekeeping and removing any images that are longer needed or that have been uploaded in error.

Select the 'Inventory Tools' icon from the left-hand menu in your design.
Select the 'Inventory' icon.
Hover over an image and select the magnifying glass icon.
Select the ‘Delete From My Images’ option.
Select Save.

💡 An image cannot be deleted from the Inventory if it is use in a document.

How to download an image

There may be times that you need to download a image that has previously been uploaded into your Inventory. Perhaps you need to use it elsewhere or plan to share it with a colleague.