CA - Creating an Image Map

CA - Creating an Image Map

Image maps for category pages are handled via the Image Hotspot plugin.

Here is how to create a new image map:
- Click on “Image Hotspot” -> “Add New” on the left-hand menu.
 

- For the title, enter the Web Slug for the category you want the image map to be displayed for.
To get the Web Slug, you can look in Khaos Control by going into the Web screen, opening the website, navigating to the category and then looking in the “Meta” tab:
 

Alternatively, you can navigate to the category on the website and get the Web Slug from the URL, as it is the last part of the URL:
 

The Web Slug is what is uses to match up the image maps to the category, as Web Slugs must be unique.
 

- Enter an image title, which will display above the image map, if it is required.
 

- Click the “Select pins” button
 

- Select the pin image you want to use. The website has a pin image for each vehicle type uploaded already.
   
NOTE: These images should be 19px x 12px.

- Click the “Upload Image” button

- Select the image you want to use for the image map, uploading it if required.
    
NOTE: These images should be around 800px x 600px.

- Click the “Add Point” button
 

- Click and drag the point to where you want it on the image
   

- Click on the point, which should bring up the popup with the point settings and enter the URL to link the point to.
 
NOTE: The URL should be relative, so should not contain the domain name. For example, “/category/shop-by-vehicle/splitscreen/splitscreen-repair-panels/” not “https://www.coolairvw.co.uk/category/shop-by-vehicle/splitscreen/splitscreen-repair-panels/”.

- Enter text into the editor if you want a tooltip to be shown when hovering over the point.
 
- Click the “Done” button to save the change.
 

- Repeat adding points until you have all of them placed.

- Click “Publish” to save the image map.
 

NOTE: You must add at least 1 point to an image map before saving it, or it will cause errors within the plugin if you reload the image map and then try to add a point.

If a part needs to link to multiple products, rather than adding multiple pins, you can instead add the product links to the pin content, rather than the pin itself.
To do this you would need to do the following as a replacement for the stage above where you add the URL to the pin:
- Click into the “Content” area of the pin and add in names for the links, these could be the product name, or stock code, etc.
 

- For each of the items, highlight it and click the “Insert/edit Link” button, and enter the URL and click the “Apply” button.
     

Once you’ve added all of the links, continue the pin creation as above.
On the front-end you will then have a pin that displays a popup when hovered over, which has the links in it, rather than the pin itself being a link:
 

    • Related Articles

    • CA - Team Members

      The individual Team Member pages, that are accessed via the /team/ page, are controlled via a custom post type within Wordpress. Accessing the Team Members To access the Team Member pages within the CMS you need to go to “Team Members” on the ...

    • CA - VW Info

      The individual VW Info pages, that are access via the /vw-info/ page, are controlled via a custom post type within Wordpress. Accessing the VW Info To access the VW Info pages within the CMS you need to go to “VW Info” on the left-hand menu after ...

    • CA - Static Content and Home Page

      Static Content The website uses several pieces of Static Content within the theme to allow for easier editing of text, so full theme updates are not required. Here is a list of the Static Content and where it is used: - Static Content - Register ...

    • Add an Image to a Product

      - Log into Khaos Control. - Click on “Stock” in the left-hand menu. - Search for the product, such as through the Stock Code, and double click on it to open the product. - Switch to the “Telesales / Internet” tab. - Go into edit mode, by clicking the ...

    • CA - Menus

      There are several menus setup within the website’s CMS which are used in various places on the website. Here is a list of the menus and where they are used: - Footer Blog: This menu is used in the footer to define the elements of the “Blog” menu: - ...