How To Use The Gallery In Your WHAP Website

Adding Images

With the "Gallery" tab selected click the button named "Add Images", select which images to add from the device.

Note - WHAP automatically creates four image variations that are used on varying screen sizes including an extra large, large, medium and small version, for example the extra large version displays on larger desktop screens and the smaller version will be used for mobile screens.

Displaying the correct image size for each device type is excellent for SEO (Search Engine Optimisation).

Adding Folders

With the gallery tab selected click the button named "Add Folder", name the folder then click "OK" to create the folder. Add images within a folder by clicking to enter the folder and once inside click "Add Images", select which images to add to this folder from the device.

Use the folder list view to easily switch between folders.

Stock Images

WHAP has a built in stock image library of over six million images provided by Unsplash API, these Unsplash images are free to use without the need for licensing or attribution, although a mention of WHAP and Unsplash is always appreciated.

With the gallery tab selected click "Stock Images". Use the search bar to search for the type of image you require.

WHAP will display 20 images relevant to your search. Scroll through the images and click the "Load More" button to load more images.

Click an image to reveal the image information, attribution, and import options.

To upload one or multiple images to the gallery click the image and click the overlaid "Import" button. The selected images will appear in the upload progress bar at the top of the gallery, indicating each image that is being uploaded.

Note - WHAP automatically creates a small, medium, large and extra large versions of each image so that website display the correct image size depending on what device a website is viewed on. Displaying the correct image size is good is required for good website performance scores.

The image below shows images that have been successfully uploaded to the gallery.

Renaming Images

Note - It is best practice to rename your images before, or as soon as you have uploaded the images to the gallery because WHAP uses the image name in the path to display the images on the pages it is added to throughout a website.

To rename an image select the image or images to rename. The images selected are indicated by the blue box that overlays the images or images.

Single image selected.

To select multiple images to rename click the "Multi-Select" button and click the images to rename.

Clicking the "Multi-Select" button once will automatically select all images, clicking the "Multi-Select" button twice will allow the user to manually select multiple images.

Multiple Images Selected

With the images to rename selected, click the "Rename" button, enter the new name in the dialogue box and click "OK".

WHAP will rename multi-selected images with the same name, followed by a number that increments for each image. WHAP automatically searches your gallery for images with the same name and will add an additional number to any images that are found to have a duplicate name.

Note - Known as ALT Text (Alternative Text) is one of the criteria search engines use to understand what information an image contains. Naming images is great for SEO (Search Engine Optimisation). WHAP will automatically use the image name as the image ALT Text so image names should reflect what the image is representing.

Example, an image of a man holding a hammer should be named - man-holding-hammer.jpg

Deleting Images

To delete images from the gallery select the image to delete or select multiple images click the "Multi-Select" button twice, select all images that you would like to delete and then click the "Delete" button, a dialog box will appear, clink "Delete".

Clicking the "Multi-Select" button once will automatically select all images, clicking the "Multi-Select" button twice will allow the user to manually select multiple images.

Multi-Select Button

Delete Button

Delete Images

Note - WHAP automatically deletes empty folders, if all images are deleted from a folder WHAP will remove the empty folder from the gallery once the gallery is reloaded.

Editing Images

The WHAP gallery includes an image editing feature that allows users to crop images, add effects, text and shapes to images.

To edit an image ensure the image to edit is selected (indicated by the blue box overlaying the image), then click the "Edit" button. The image will load into the image editor.

Image Editor

The image editing tools are located below the image. Editing tools include a Cropping Tool, Shaping Tool, Text Tool, Pen Tool, and an Effects Tool.

Image Editing Tools

To save an edited image to the gallery click the "Save Image" button at the bottom right corner to upload the image to the gallery.

Save Button

Edited images will upload to the gallery once the image is saved.

Edited Image In The Gallery