An "alt" attribute for the "img" tag if the image is not set as background image.
If "alt" is a string (even an empty string) and the image is set as background image, the hylo-responsive-image components role becomes an image and the "alt" property its alternate text.
Sets the "alt" text as aria-label of the hylo-responsive-image component.
Aria-hidden the component.
Aria-hidden the component when the image is set as background image.
Comment, copyright etc. which is placed in a div tag inside the component with the class "comment".
If the hylo-responsive-image component is placed in an element with the class "hylo-image-wrapper", the div tag will be placed as direct child of the wrapper element. It will get the class "hylo-image-comment".
The comment can also be provided through the slot "comment". In this case this property has to be set to "true".
Css classes added to the comment div tag.
An alternative comment used when the image is displayed in a gallery view. If not set, the original comment is used.
When the comment is provided through the slot "comment", this has to be set to "true".
Css classes added to the comment div tag in a gallery view.
The component replaces unicode characters (\uxxxx) with html special characters in the alt, info and comment automaticly. This switch disables it.
Creates an image which spans over the whole content (width and height) in which the image is placed in.
Creates an image with the dimensions of the screen.
Creates an image which spans over the whole content width in which the image is placed in.
Adds a gradient to the image.
Use the following css variables to adjust the gradient:
--hylo-gradient-top: 33%; --hylo-gradient-bottom: 0%; --hylo-gradient-color-top: #3A3345; --hylo-gradient-color-bottom: white; --hylo-gradient-blend: multiply;
Classes added to the img tag when the image is not loaded as background.
Overwrites/sets the role attribute of the image.
Css classes added to the info button.
A comma separated list of ids. All elements which has the attribute "data-info-id" set to one of the ids is hidden when the info layer is shown.
If set, the image is loaded instantly and lazy loading is not used.
Text of label. A label is a little text banner on top of the image.
Classes added to all labels.
Label of the info button.
Its hylo-page-root translations object key is "imageLabelInfoButton".
Text prepended to each label which is only read by a screen reader.
Array of text labels (each can have its own color for text and background and its own additional css classes). As alternative you can provide a comma separated string or a JSON string representing the Array.
Classes added to the labels wrapper.
Text prepended to the labels wrapper which is only read by a screen reader.
Adds an info button and layer which shows the "comment" content.
If the hylo-responsive-image component is placed in an element with the class "hylo-image-wrapper", the button and the layer will be placed as direct children of the wrapper element. The button will get the class "hylo-image-info" and the layer will get the class "hylo-image-comment".
Otherwise the button and the layer will be direct children of this component with the classes "info" and "comment" respectively.
Can be set as boolean or as comma separated string of breakpoints. A hylo-breakpoint-listener component has to be present for the comma separated string to work.
By default the info button is placed at the right side of the image. This property places it at the left side.
"showInfo" still needs to be set!
Creates the info button as a passive element. The button can not gain focus and is hidden from screen readers. Prevents a link inside a link in case the image is part of a linked element.
"showInfo" still needs to be set!
By default the info button is placed at the bottom of the image. This property places it at the top.
"showInfo" still needs to be set!
A threshold in pixel around the view which triggers the lazy loading of the image.
Returns whether the hylo-responsive-image is waiting to come into view to be loaded (lazy loading).
In order to resolve the hylo-responsive-image has to have a "src" defined through hylo-image(s) and has to have at least one dimension meaning width or height is greater than 0.
The returned promise resolves when all provided hylo-responsive-image(s) have either their "imageLoaded" or their "awaiting" status is true. This means it resolves when all images currently in the view are loaded.
Make sure all images "awaiting" status do resolve (see "awaiting" property).
all images to be checked ("this" component is not included automatically)
Fires when the component got loaded.
Fires when the type of display of the image changed from background to "img" tag or the other way around.
Fires when the image changed.
Fires when an image got loaded. In case of a background image, fires when the background-image style got set.
Emits the url of the image.
Generated using TypeDoc
Manages multiple hylo-image components and displays the appropriate one depending on the current view size and/or orientation.
Nest hylo-image components inside a hylo-responsive-image which represent different versions of an image suitable for different view size and/or orientations. The hylo-responsive-image component will go through its hylo-image child components form top to bottom and pick the first one which fits the current view. Depending on whether the background flag of the hylo-image component is set, the hylo-responsive-image component creates an "img" tag inside itself or sets the image as background-image of itself. If no child hylo-image component fits, nothing is set.
The hylo-responsive-image component uses the hylo-breakpoint-listener to listen view changes and extract the current view size and orientation. A hylo-breakpoint-listener component needs to be present in your app code in order to be used.
If no hylo-breakpoint-listener component is present, the hylo-responsive-image component checks the body tag for the following classes: is-xs, is-sm, is-md, is-lg, is-xl, is-horizontal, is-vertical. If none of these are set, "xs" and "vertical" are assumed. Also, without a hylo-breakpoint-listener no listening for view changes occur. You need to call the update() function manually after each change of the above mentioned classes.
Adds the css class "img-set" if a hylo-image definition fits the current view size/orientation. The class "img-set" is set whether the image is set as img tag or as background style. The class "img-set-as-background" is added if the image is set as background style.
You can trigger a zoom hover effect of the image by wrapping the hylo-responsive-image component in an element with the class "hylo-image-wrapper" and by assigning a parent element the class "hylo-image-hover". The effect gets triggered by "hover" over the "hylo-image-hover" element. Set the size of the image with the "hylo-image-wrapper" element.
Used slots: