The Hotel Image Gallery Component

Description

Hotel Gallery 6M

This is a component for displaying images of hotels or other products. It starts with a slider view. You can configure the size of this view from the outside. The user can go from this view into a larger view where all images are displayed. The component is connected with an image resize service which resizes all the images to the perfect size.

Screenshots

A screenshot of the slider view.

A screenshot of the cinema view.

Meta

Maintainer 6m-haj@tui.com
Locales de-DE

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://cloud.tui.com/6m/beone-content/hotel-gallery-6m/master/main.js" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. 

<tui-hotel-gallery></tui-hotel-gallery>

Examples

  • Shows the images of the hotel with the given product code.

    <tui-hotel-gallery product-code="GPA10011"></tui-hotel-gallery>

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name Description Allowed Values Default Required
giata-id

The ID of the hotel of which images should be displayed.

 ^[0-9]+$ no
product-code

The productCode of the hotel of which images should be displayed.

 no
category-order

Comma-seperated list for the order and visibility of image categories. Prefix ! means this category is excluded.

 ^.*,.*$ EXTERIOR_VIEW, POOL, FOOD_AND_BEVERAGES, ACCOMMODATION_EXAMPLE, FACILITIES, ANIMATION,BEACH, SPORT, FAMILY, WELLNESS, SPORT_WATER, GOLF, SPORT_WINTER, !ROOM_SKETCH no
max-slider-images

How much images are displayed in the slider. 0 means all images are displayed.

 13 no
more-button-enabled

Defines whether a more button is displayed in the slider.

 true no
more-button-single-tile

Defines whether the more button is displayed on extra tile.

 true no
slider-carousel

Defines whether the carousel is also enabled for the slider-view. If enabled, ALL images will be displayed in the slider-view.

 false no
highlights

Defines whether the category Highlights with all favorite images are displayed.

 true no
accommodationExampleFavoritesOnly

If enabled, only favorite images with the category 'ACCOMMODATION_EXAMPLE' are displayed.

 true no
date

To retrieve hotel-images which are valid for the specified date, e.g. 2019-07-15

 ([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])) no
videos

Defines whether videos are displayed.

 true no
content-api-url

The URL of the content api. prod=https://production-beone.com/content/api; test=https://acceptance-beone.com/content/api. By default the prod-url is used.

 no
image-resize-url

The URL for the image resizing service. prod=https://production-beone.com/image-resize/signatureTODO/; test=https://acceptance-beone.com/image-resize/signatureTODO/; CDN=https://cloud.tui.com/pics/signatureTODO/

 no
cinemaViewTitleButtonText

The Text that should appear on the CTA-Button in the opened cinema view.

 no
cinemaViewTitleButtonVariant

The CTA-Button Variant (style) in the opened cinema view.

 default|primary|secondary|default-link|primary-link no

Events

Event tui-gallery.title-button-clicked
Type publish
Description

This event is triggered when the title button in the cinema view is clicked (internally it closes the cinema view).
Payload

The payload object of this event has the following properties:

Name type
Description

This describes the type event.
Type string
Name hotel
Description

contains the giataId, name and productCode (strings) of the hotel.
Type object
Event tui-gallery.slider-event
Type publish
Description

This event is triggered when the gallery throws an event.
Payload

The payload object of this event has the following properties:

Name type
Description

This describes the type of the slider event.
Type string
Name cinema
Description

Whether the cinema view is opened.
Type boolean
Name currentIndex
Description

This returns the current index.
Type integer
Name imageURL
Description

The url of the current image.
Type string
Format uri
Name timeBetween
Description

The time in seconds between the last action and the current action.
Type integer
Name hotel
Description

contains the giataId, name and productCode (strings) of the hotel.
Type object
Event tui-gallery.category-event
Type publish
Description

This event is triggered when the gallery throws a category event.
Payload

The payload object of this event has the following properties:

Name type
Description

This describes the type of the category event.
Type string
Name category
Description

This returns the selected category.
Type object
Name hotel
Description

contains the giataId, name and productCode (strings) of the hotel.
Type object
Event tui-gallery.hygiene-banner-clicked
Type publish
Description

This event is triggered when the user clicks on the hygiene banner.
Payload

The payload object of this event has the following properties:

Name type
Description

This describes the type of the category event.
Type string
Name productCode
Description

The product code as returned from the Content API.
Type string
Name giataId
Description

The giataId as returned from the Content API.
Type string
Name hotel
Description

contains the giataId, name and productCode (strings) of the hotel.
Type object