`<image/>`

Displays a static image

<image/> is a Sectional component that renders an image from a hyperlink or an uploaded file.

Attributes and Properties

Attributes for `<image>`

Positioning (2)

anchor

point. Default value: $\left( 0, 0 \right)$. Coordinates of the anchor point used to position this component on a graph.

positionFromAnchor

keyword. Where this component sits relative to its anchor point.

Value	Description
`upperRight`	Place the component above and to the right of the anchor point.
`upperLeft`	Place the component above and to the left of the anchor point.
`lowerRight`	Place the component below and to the right of the anchor point.
`lowerLeft`	Place the component below and to the left of the anchor point.
`top`	Place the component directly above the anchor point.
`bottom`	Place the component directly below the anchor point.
`left`	Place the component directly to the left of the anchor point.
`right`	Place the component directly to the right of the anchor point.
`center` (default)	Center the component on the anchor point.

Other (20)

asFileName

text. File name to use when downloading the image.

aspectRatio

number. Aspect ratio (width / height) for the image.

authorName

text. Name of the author of the image.

authorUrl

text. URL to link the author's name to in the attribution (e.g. the author's profile page).

decorative

boolean. Default value: false. Whether the image is purely decorative.

displayMode

keyword. How to size the image.

Value	Description
`block` (default)	Display as a block element on its own line.
`inline`	Render inline with surrounding text.

draggable

boolean. Default value: true. Whether the image can be dragged on a graph.

horizontalAlign

keyword. Horizontal alignment of the image within its container.

Value	Description
`center` (default)	Center the image horizontally.
`left`	Align the image to the left edge.
`right`	Align the image to the right edge.

imageName

text. Name of the image, used in place of the generic word “Image” in the attribution.

layer

number. Default value: 0. Z-order layer index when shown on a graph.

licenseCodes

[ keyword ]. License code(s) for the image. Specify two codes to indicate the image is dual licensed.

Value	Description
`CC-BY`	Creative Commons Attribution: reuse with credit, including commercially.
`CC-BY-SA`	Creative Commons Attribution-ShareAlike: reuse with credit; adaptations keep the same license.
`CC-BY-ND`	Creative Commons Attribution-NoDerivatives: reuse unchanged, with credit.
`CC-BY-NC`	Creative Commons Attribution-NonCommercial: reuse with credit for noncommercial purposes.
`CC-BY-NC-SA`	Creative Commons Attribution-NonCommercial-ShareAlike: noncommercial reuse with credit; adaptations keep the same license.
`CC-BY-NC-ND`	Creative Commons Attribution-NonCommercial-NoDerivatives: reuse unchanged for noncommercial purposes, with credit.
`CC0`	Creative Commons Zero: the creator has dedicated the work to the public domain.
`PDM`	Public Domain Mark: the work is free of known copyright restrictions.
`GFDL`	GNU Free Documentation License: copyleft license common on Wikimedia.
`FAL`	Free Art License: copyleft license for artistic works.
`OGL`	UK Open Government Licence: reuse government material with attribution.
`MIT`	MIT License: permissive license common for icon and illustration sets.
`APACHE-2.0`	Apache License 2.0: permissive license common for icon and illustration sets.

licenseName

text. Name of the license for the image.

licenseUrl

text. URL for the license of the image.

licenseVersion

keyword. Version of the Creative Commons license(s) given in licenseCodes (ignored by non-Creative-Commons licenses).

Value	Description
`1.0`	Creative Commons version 1.0.
`2.0`	Creative Commons version 2.0.
`2.5`	Creative Commons version 2.5.
`3.0`	Creative Commons version 3.0.
`4.0` (default)	Creative Commons version 4.0.

mimeType

text. MIME type of the image.

originalUrl

text. Original URL where the image can be found, used to link the image name in the attribution.

rotate

number. Default value: 0. Rotation angle (radians) applied to the image.

size

keyword. Named size preset for the image.

Value	Description
`tiny`	About 1/12 the full width.
`small`	About 30% of the full width.
`medium` (default)	About half the full width.
`large`	About 70% of the full width.
`full`	The full available width.

source

text. URL or path of the image source.

width

componentSize. Explicit width of the image (overrides size).

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<image name="i">`

Positioning (2)

$i.anchor

point. The coordinates where this component is anchored on the graph.

$i.positionFromAnchor

text. Where this component sits relative to its anchor point.

Other (25)

$i.asFileName

text. File name to use when downloading the image.

$i.aspectRatio

number. The aspect ratio (width / height) of the image.

$i.authorName

text. Name of the author of the image.

$i.authorUrl

text. URL to link the author's name to in the attribution (e.g. the author's profile page).

$i.decorative

boolean. Whether the image is purely decorative.

$i.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$i.displayMode

text. How to size the image.

$i.draggable

boolean. Whether the image can be dragged on a graph.

$i.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$i.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$i.hidden

boolean. Whether this component is hidden from the rendered output.

$i.horizontalAlign

text. Horizontal alignment of the image within its container.

$i.imageName

text. Name of the image, used in place of the generic word “Image” in the attribution.

$i.layer

number. Z-order layer index when shown on a graph.

$i.licenseCodes

textList. License code(s) for the image. Specify two codes to indicate the image is dual licensed.

$i.licenseNames

textList. The license name(s) for the image. Derived from licenseCodes when given; otherwise from the licenseName attribute.

$i.licenseUrls

textList. The license URL(s) for the image. Derived from licenseCodes (and licenseVersion) when given; otherwise from the licenseUrl attribute.

$i.licenseVersion

text. Version of the Creative Commons license(s) given in licenseCodes (ignored by non-Creative-Commons licenses).

$i.mimeType

text. MIME type of the image.

$i.originalUrl

text. Original URL where the image can be found, used to link the image name in the attribution.

$i.rotate

number. Rotation angle (radians) applied to the image.

$i.shortDescription

text. A short accessibility description of the image.

$i.size

text. The size of the image.

$i.source

text. URL or path of the image source.

$i.width

componentSize. The display width of the image.

Common to all components (4)

$i.doenetML

text. The DoenetML source code that produced this component.

$i.hide

boolean. Whether to hide this component from the rendered output.

$i.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$i.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: `<image/>` from a hyperlink

An <image/> may be inserted from a hyperlink using the source attribute. A <shortDescription> child is required for accessibility.

Example: `<image/>` in a `<figure>`

An <image/> is often nested within a <figure> along with a <caption>. A <shortDescription> child is required for accessibility.

Example: `<image/>` on a `<graph>`

An <image/> can be placed on a <graph>. Control the size of the image with the size attribute and its initial position with the anchor attribute.

Attribute Examples

Attribute Example: width

The width attribute specifies the absolute width of the image. Doenet determines the size category corresponds to that width and sizes the image accordingly.

Attribute Example: size

The size attribute specifies one of 5 size categories for the <image/>: tiny, small, medium, large, or full.

Attribute Example: aspectRatio

The aspectRatio attribute allows for customization of the image’s default proportions.

Attribute Example: displayMode

The displayMode attribute affects how the <image/> is positioned on screen. The default mode is “block”, which renders the image centered on screen. The available modes are inline, and block.

Attribute Example: horizontalAlign

The horizontalAlign attribute specifies the horizontal position on-screen for the default block-mode style image. Valid values are left, center, and right, with a default of center.

Attribute Example: shortDescription

A <shortDescription> child provides a description of the <image/> for situations where the image cannot load, or for use with screen-reading technology. It is required for accessibility. If neither a <shortDescription> nor the decorative attribute is supplied, a warning is produced.

Attribute Example: decorative

If decorative is specified, it indicates that the image doesn’t add any information to the content of the page and can be ignored by assistive technologies like screen readers.

Attribute Example: source

The source attribute specifies the url for a hyperlinked <image/> and the filepath for an uploaded <image/>.

Attribute Example: anchor

The anchor attribute positions the <image/> on a <graph>.

Attribute Example: draggable

The draggable attribute determines whether the <image/> can be dragged around the graph.

Attribute Example: layer

By adjusting the layer attribute number, geometry can be placed in front of or behind other geometry. The default layer number is 0; all higher numbers are placed in front.

Attribute Example: rotate

The rotate attribute allows for rotation of the <image> about its centerpoint.

Property Examples

Property Example: Attributes as properties 1

The above listed <image/> attributes are also accessible as properties.

Property Example: Attributes as properties 2

The above listed <image/> attributes are also accessible as properties.

Attribution

The attribution attributes let you credit an image’s source and license. When any of them are supplied, Doenet builds a credit sentence and shows it inside the image’s description (open the description disclosure — the “i” button — to see it). The wording follows the Creative Commons “TASL” convention: Title, Author, Source, License.

Attribute Example: licenseCodes

The licenseCodes attribute tags the image with one or more recognized open-license codes. From a code, Doenet derives the full license name and a link to the license deed, then renders the credit sentence in the image’s description. Recognized codes are the six Creative Commons licenses (CC-BY, CC-BY-SA, CC-BY-ND, CC-BY-NC, CC-BY-NC-SA, CC-BY-NC-ND), the public-domain markers CC0 and PDM, and GFDL, FAL, OGL, MIT, and APACHE-2.0. Codes are matched case-insensitively; an unrecognized code is ignored.

Attribute Example: licenseVersion

The licenseVersion attribute selects which version of a Creative Commons license to name and link to. It defaults to 4.0 and is ignored for licenses that are not versioned this way (such as MIT or PDM).

Example: dual licensing

Specifying two codes in licenseCodes marks the image as dual-licensed; the credit sentence names both licenses, joined with “or”.

Example: public-domain codes

The public-domain markers CC0 and PDM are phrased differently in the credit sentence: the work is described as being in the public domain rather than licensed under a set of terms.

Attribute Example: imageName, authorName, authorUrl, and originalUrl

These attributes flesh out the credit sentence. imageName supplies the work’s title (used in place of the generic word “Image”) and links to originalUrl, the page where the image is found. authorName names the creator and links to authorUrl, such as the author’s profile page.

Attribute Example: licenseName and licenseUrl

When an image uses a license that is not one of the recognized licenseCodes, give the license name and link directly with licenseName and licenseUrl. These are used only as a fallback: when licenseCodes is set, the derived names and URLs take precedence and licenseName/licenseUrl are ignored.

Property Example: licenseNames and licenseUrls

The resolved license names and URLs are available as the licenseNames and licenseUrls properties. They are derived from licenseCodes (and licenseVersion) when those are given, and otherwise reflect the licenseName/licenseUrl fallback attributes.

iff implies

<image/>