diff --git a/README.md b/README.md
index f2e7146..f10163a 100644
--- a/README.md
+++ b/README.md
@@ -122,7 +122,7 @@ This is the main text for a hot spot pop-up.
This text is displayed when `device.screenSize` is `small` (i.e. when viewed on mobile devices, except when the [_isNarrativeOnMobile](#_isnarrativeonmobile-boolean) setting is set to `false`). It is presented in a title bar above the image.
#### \_imageAlignment (string):
-Defines the horizontal alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Right: Image aligned to the right of the text area. The default alignment is `right`.
+Defines the alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Top: Image aligned above the text area. Right: Image aligned to the right of the text area. Bottom: Image aligned below the text area. The default alignment is `right`.
#### \_classes (string):
CSS class name(s) to be applied to the popup item. Classes available by default are:
diff --git a/less/hotgraphicPopup.less b/less/hotgraphicPopup.less
index 9c79393..9eabe1e 100644
--- a/less/hotgraphicPopup.less
+++ b/less/hotgraphicPopup.less
@@ -34,24 +34,11 @@
// Pop up item
// --------------------------------------------------
- &__item-image-container {
- width: 60%;
- margin: auto;
- }
-
@media (min-width: @device-width-medium) {
&__item {
display: flex;
- align-items: flex-start;
- }
-
- &__item-content {
- width: 60%;
- }
-
- &__item-image-container {
- width: 40%;
- margin-left: @item-padding;
+ flex-direction: column;
+ row-gap: 1rem;
}
}
@@ -81,16 +68,23 @@
.u-display-none;
}
- // Align hotgraphic pop up image to the left
+ // Hotgraphic pop up image alignment
// --------------------------------------------------
@media (min-width: @device-width-medium) {
- &__item.align-image-left {
- flex-direction: row-reverse;
+ &__item.align-image-left,
+ &__item.align-image-right {
+ flex-direction: row;
+ column-gap: 1rem;
+ }
+
+ &__item.align-image-left &__item-content,
+ &__item.align-image-right &__item-content {
+ width: 60%;
}
- &__item.align-image-left &__item-image-container {
- margin-left: inherit;
- margin-right: @item-padding;
+ &__item.align-image-left &__item-image-container,
+ &__item.align-image-right &__item-image-container {
+ width: 40%;
}
}
diff --git a/properties.schema b/properties.schema
index b99bcd7..296f806 100644
--- a/properties.schema
+++ b/properties.schema
@@ -230,9 +230,9 @@
"type": "string",
"required": false,
"default": "right",
- "inputType": {"type":"Select", "options":["left","right"]},
+ "inputType": {"type":"Select", "options":["left","top","right","bottom"]},
"title": "Image alignment",
- "help": "Defines the horizontal alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Right: Image aligned to the right of the text area. The default alignment is `right`."
+ "help": "Defines the alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Top: Image aligned above the text area. Right: Image aligned to the right of the text area. Bottom: Image aligned below the text area.The default alignment is `right`."
},
"_graphic": {
"type": "object",
diff --git a/schema/component.schema.json b/schema/component.schema.json
index 7900bbb..500d2c7 100644
--- a/schema/component.schema.json
+++ b/schema/component.schema.json
@@ -168,11 +168,13 @@
"_imageAlignment": {
"type": "string",
"title": "Image alignment",
- "description": "Defines the horizontal alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Right: Image aligned to the right of the text area. The default alignment is `right`",
+ "description": "Defines the alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Top: Image aligned above the text area. Right: Image aligned to the right of the text area. Bottom: Image aligned below the text area.The default alignment is `right`.",
"default": "right",
"enum": [
"left",
- "right"
+ "top",
+ "right",
+ "bottom"
],
"_backboneForms": "Select"
},
diff --git a/templates/hotgraphicPopup.jsx b/templates/hotgraphicPopup.jsx
index 9353b72..66bbd92 100644
--- a/templates/hotgraphicPopup.jsx
+++ b/templates/hotgraphicPopup.jsx
@@ -37,6 +37,14 @@ export default function HotgraphicPopup(props) {
aria-hidden={!_isActive ? true : null}
>
+ {(_imageAlignment === 'left' || _imageAlignment === 'top') &&
+