Images

Standard
Traits

Standard

By default, images are set to be responsive. ALWAYS include a alt attribute to describe the images to screen readers. You can use either a image: or src: trait to reference the path to the image file.

GEM
HTML

= ui.nfg :image, image: 'https://source.unsplash.com/WLUHO9A_xik/800x450'

<img class="img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/800x450" />

Traits

The image component has these avaiable traits.

Trait

Options

Example

id:

Adds an ID to the image.

id: 'my_id'

= ui.nfg :image, id: 'my_id'

class:

Adds a class to the image.

class: 'my-class'

= ui.nfg :image, class: 'my-class'

describe:

For addding a data-describe to any image.

describe: 'test-data-describe'

= ui.nfg :image, describe: 'test-data-describe'

image:

For including a path to the file.

image: 'test.png'

= ui.nfg :image, image: 'test.png'

src:

For including a path to the file.

src: 'test.png'

= ui.nfg :image, src: 'test.png'

alt:

Adds alternate text to the image.

alt: 'This is my alt text.'

= ui.nfg :image, alt: 'This is my alt text.'

tooltip:

Shows a tooltip on image.

tooltip: 'This is my tooltip!'

= ui.nfg :image, tooltip: 'Hi there!'

responsive:

Makes the image NOT responsive.

responsive: false

= ui.nfg :image, responsive: false

render_if:

Condition to determine if the image shows or not.

render_if: (1==1)

= ui.nfg :image, render_if: (1==1)

render_unless:

Condition to determine if the image shows or not.

render_unless: (1==1)

= ui.nfg :image, render_unless: (1==1)