Sample Layout's Wiki Page

#adapt-contrib-hotgraphic

Hot Graphic is a content presentation component bundled with the Adapt framework.
When a user clicks on a hot spot within the image, a popup is displayed that consists of text with an image.

When the viewport size changes to the smallest range (e.e.g, smart phone), this component behaves like Adapt's Narrative component (adapt-contrib-narrative). All information remains available but is formatted as a narrative rather than triggered by hot spots.

##Installation

As one of Adapt's core components, Hot Graphic is included with the installation of the Adapt framework and the installation of the Adapt authoring tool.

If Hot Graphic has been uninstalled from the Adapt framework, it may be reinstalled. With the Adapt Command Line Interface installed, run the following from the command line:
adapt install adapt-contrib-hotgraphic

Alternatively, this component can also be installed by adding the following line of code to the adapt.json file:
"adapt-contrib-hotgraphic": "*"
Then running the command:
adapt install
(This second method will reinstall all plugins listed in adapt.json.)

If Hot Graphic has been uninstalled from the Adapt authoring tool, it may be reinstalled using the Plugin Manager.

###Usage

Once installed, the component can be used to display an image with clickable 'hot spot' elements. The location of these hot spots are defined within the content. When a hot spot is clicked, a pop-up window appears which displays an image and text.

Controls are provided to move between the next and previous hot spots via the pop-up window.

##Settings overview

For example JSON format, see example.json. A description of the core settings can be found at: Core model attributes

Further settings for this component are:

####_component

This value must be: hotgraphic

####_classes

You can use this setting to add custom classes to your template and LESS file.

####_layout

This defines the position of the component in the block. Values can be full, left or right.

####_hidePagination

Hides the previous and next actions and progress indicator from the toolbar.

####_canCycleThroughPagination

Enables the popups to be cycled through. e.g. going from item 3 back around to item 1.

####_useGraphicsAsPins

When this is set to true, the item graphics can be used as 'pins'. When this is set to 'false' (per default), a main poster image is displayed, with pins overlayed to trigger the hot spots.

####mobileBody

This is optional body text that will be shown when viewed on mobile.

####_graphic

The main hot graphic image is defined within this element. This element should contain only one value for src, alt and title.

####src

Enter a path to the image. Paths should be relative to the src folder, e.g.

course/en/images/gqcq-1-large.gif

####alt

A value for alternative text can be entered here.

####title

Title text can be entered here for the image.

####_items

Multiple items can be entered. Each item represents one hot spot for this component and contains values for title, body and _graphic.

Within _graphic, 'src', 'title', 'alt' and '_classes' can be set.

####title

This is the title text for a hot spot popup.

####body

This is the main text for a hot spot popup.

####_graphic

Each hotspot can contain an image. Details for the image are entered within this setting.

####src

Enter a path to the image. Paths should be relative to the src folder, e.g.

course/en/images/gqcq-1-large.gif

####alt

A value for alternative text can be entered here.

####title

This setting is for the title attribute on the image.

####strapline

Enter text for a strapline. This will be displayed when viewport size changes to the smallest range and is shown as a title above the image.

####_top

Each hot spot must contain _top and _left coordinates to position them on the hot graphic.

Enter the number of pixels this hot spot should be from the top border of the main graphic.

####_left

Enter the number of pixels this hot spot should be from the left border of the main graphic.

##Limitations

When viewport size changes to the smallest range this component will behave like the Narrative component. All information will be available but as a narrative rather than as hot spots on a graphic.

##Browser spec

This component has been tested to the standard Adapt browser specification.