Replaces img tags with hylo-responsive-image components.

Place the hylo-responsive-image compponents which should be used to replace the img tags as direct children of this component. Each img tag wrapped by this component will be replaced if it is not already part of a hylo-responsive-image component.

The first img tag will be replaced with the first direct child hylo-responsive-image component, the second img tag will be replaced with the second hylo-responsive-image component and so on. If there are less hylo-responsive-image components than img tags, the remaining img tags will be replaced with the last hylo-response-image component.

When an img tag is replaced with a hylo-responsive-image componet, the hylo-responsive-image component is actually copied and all nested hylo-image components as well were their "src" attributes will be set to the "src" value of the img tag.

You can group img tags by setting the attribute "data-replace-id" to the same value. These img tags will count as one and their "src" values will be used to set the hylo-image components in the given order.

The replaced img tags and the original hylo-responsive-image components will be removed from the DOM.

Sets the css variables '--hylo-replace-image-width', '--hylo-replace-image-height' and '--hylo-replace-float' to the hylo-responsive-image componet if the img has a "width", "height" and/or "float" style set. The "width" and "height" styles are parseInt(). If the "width"/"height"-attribute of the image is set and the "width"/"height" are set as style, the style settings supersede the attribute settings. Also sets the classes 'hylo-replace-image-has-width', 'hylo-replace-image-has-height', 'hylo-replace-image-has-float-left' and/or 'hylo-replace-image-has-float-right'.

Properties

setComment: boolean

Scans the image for a "figcaption" tag or the attributes "data-fb-author" and "data-fb-description" and sets their content as "comment" value for the hylo-responsive-image. "setInfo" overwrites this setting.

A "figcaption" tag has to be a sibling element of the "img" tag and both has to be children of a "figure" element. The "figcaption" and "figure" elements will be removed afterwards.

setCommentGallery: boolean

Scans the image for a "figcaption" tag or the attributes "data-fb-author" and "data-fb-description" and sets their content as "commentGallery" value for the hylo-responsive-image.

A "figcaption" tag has to be a sibling element of the "img" tag and both has to be children of a "figure" element. The "figcaption" and "figure" elements will be removed afterwards.

setInfo: boolean

Scans the image for a "figcaption" tag or the attributes "data-fb-author" and "data-fb-description" and creates an info layer out of it.

A "figcaption" tag has to be a sibling element of the "img" tag and both has to be children of a "figure" element. The "figcaption" and "figure" elements will be removed afterwards.

Generated using TypeDoc