Define an image which is displayed depending on the size and/or orientation of the view.

Besides the image source you can set multiple flags which define for which view the image is suitable. You can set multiple flags to indicate that the image can be used for multiple views. If you don't set any size flag or orientation flag, you define that the image works for any view size or orientation respectively. If no view flag is set at all, the image is useable for all views.

You can also define that the image is to be set as a background image of the parent hylo-responsive-image component instead of an "img" tag.

Group several hylo-image components under a hylo-responsive-image component to create an image which adapts to the size and/or orientation of the view. Only actual displayed images are getting loaded.

Properties

background: boolean

Indicater that the image source is to be set as a background image instead of an "img" tag. Images in a gallery view are always displayed as background image.

call: string

An url which will be called to get the final image src.

If set, this url will be called and the response will replace the "src". The original "src" will be added to the url as GET query. It adds "?" or "&" to the url automatically.

The response has to be a JSON string. The following values can be set in the JSON string:

  • "src": the final "src" of the hylo-image
  • "comment": the "comment" value of the parent hylo-responsive-image
  • "comment-gallery": the "comment-gallery" value of the parent hylo-responsive-image
  • "comment-html": html markup which will be placed in the parent hylo-responsive-image's "comment" slot

If "comment-html" is provided, "comment" will be set automatically to "true".

callSplit: string = '/media/'

A string which is used to split the "src" when "call" is used. It's usually the media folder.

Only the path starting at the media folder should be passed to the "call". Therefore the second part of the split should used.

gallery: boolean

This image definition is used for a gallery view. Images in a gallery view are always displayed as background image.

horizontal: boolean

Indicater that the image source is to be used in a horizontal view.

lg: boolean

Indicater that the image source is to be used in a lg view.

md: boolean

Indicater that the image source is to be used in a md view.

sm: boolean

Indicater that the image source is to be used in a sm view.

src: string

The image source path.

vertical: boolean

Indicater that the image source is to be used in a vertical view.

xl: boolean

Indicater that the image source is to be used in a xl view.

xs: boolean

Indicater that the image source is to be used in a xs view.

Generated using TypeDoc