Image | Bulma-Gomponents

Image

The b.Image constructor creates a Bulma image element.

Modifier	Action
`b.ImgSq16`	Fixed square image, of 16x16px
`b.ImgSq24`	Fixed square image, of 24x24px
`b.ImgSq32`	Fixed square image, of 32x32px
`b.ImgSq48`	Fixed square image, of 48x48px
`b.ImgSq64`	Fixed square image, of 64x64px
`b.ImgSq96`	Fixed square image, of 96x96px
`b.ImgSq128`	Fixed square image, of 128x128px
`b.ImgSquare`	Force image ratio to square
`b.Img1By1`	Force image ratio to 1 by 1
`b.Img5By4`	Force image ratio to 5 by 4
`b.Img4By3`	Force image ratio to 4 by 3
`b.Img3By2`	Force image ratio to 3 by 2
`b.Img5By3`	Force image ratio to 5 by 3
`b.Img16By9`	Force image ratio to 16 by 9
`b.Img2By1`	Force image ratio to 2 by 1
`b.Img3By1`	Force image ratio to 3 by 1
`b.Img4By5`	Force image ratio to 4 by 5
`b.Img3By4`	Force image ratio to 3 by 4
`b.Img2By3`	Force image ratio to 2 by 3
`b.Img3By5`	Force image ratio to 3 by 5
`b.Img9By16`	Force image ratio to 9 by 16
`b.Img1By2`	Force image ratio to 1 by 2
`b.Img1By3`	Force image ratio to 1 by 3
`b.FullWidth`	Make the image take the whole width of its container

Use e.ImgSrc to create an <img> element with the provided URL as its src attribute. Apply b.Rounded to the inner image to make it rounded, associated with an b.Img*By* modifier on the b.Image element. Apply b.Ratio to an inner element to apply the parent ratio to that element.

The b.ImageImg constructor creates a Bulma image element with an inner <img>. It accepts the same modifiers as b.Image.

Child	Action
`b.OnImg(...any)`	Apply children to the `<img>` element
`b.OnFigure(...any)`	Apply children to the `<figure>` element
`b.Rounded`	Make the image rounded (class applied to the `<img>` element)
`b.ImgAlt`	Define the image alt text
Anything else	Apply children to the `<figure>` element

Bulma examples

Bulma documentation

Example

Code

b.Image(
	b.ImgSq128,
	e.Img(e.Src("https://bulma.io/assets/images/placeholders/128x128.png")),
)

ResultHTML

<figure class="image is-128x128"><img src="https://bulma.io/assets/images/placeholders/128x128.png"></figure>

Example

Code

b.Image(
	b.ImgSq128,
	e.ImgSrc("https://bulma.io/assets/images/placeholders/128x128.png"),
)

ResultHTML

<figure class="image is-128x128"><img src="https://bulma.io/assets/images/placeholders/128x128.png"></figure>

Example

Code

b.ImageImg("https://bulma.io/assets/images/placeholders/128x128.png", b.ImgSq128)

ResultHTML

<figure class="image is-128x128"><img src="https://bulma.io/assets/images/placeholders/128x128.png"></figure>

Fixed square images

Bulma documentation

Example

Code

e.P("16x16px:"),
b.ImageImg("https://bulma.io/assets/images/placeholders/16x16.png", b.ImgSq16),
e.P("24x24px:"),
b.ImageImg("https://bulma.io/assets/images/placeholders/24x24.png", b.ImgSq24),
e.P("32x32px:"),
b.ImageImg("https://bulma.io/assets/images/placeholders/32x32.png", b.ImgSq32),
e.P("48x48px:"),
b.ImageImg("https://bulma.io/assets/images/placeholders/48x48.png", b.ImgSq48),
e.P("64x64px:"),
b.ImageImg("https://bulma.io/assets/images/placeholders/64x64.png", b.ImgSq64),
e.P("96x96px:"),
b.ImageImg("https://bulma.io/assets/images/placeholders/96x96.png", b.ImgSq96),
e.P("128x128px:"),
b.ImageImg("https://bulma.io/assets/images/placeholders/128x128.png", b.ImgSq128)

ResultHTML

16x16px:

24x24px:

32x32px:

48x48px:

64x64px:

96x96px:

128x128px:

<p>16x16px:</p>
<figure class="is-16x16 image"><img src="https://bulma.io/assets/images/placeholders/16x16.png"></figure>
<p>24x24px:</p>
<figure class="is-24x24 image"><img src="https://bulma.io/assets/images/placeholders/24x24.png"></figure>
<p>32x32px:</p>
<figure class="is-24x24 image"><img src="https://bulma.io/assets/images/placeholders/32x32.png"></figure>
<p>48x48px:</p>
<figure class="image is-48x48"><img src="https://bulma.io/assets/images/placeholders/48x48.png"></figure>
<p>64x64px:</p>
<figure class="image is-64x64"><img src="https://bulma.io/assets/images/placeholders/64x64.png"></figure>
<p>96x96px:</p>
<figure class="image is-96x96"><img src="https://bulma.io/assets/images/placeholders/96x96.png"></figure>
<p>128x128px:</p>
<figure class="image is-128x128"><img src="https://bulma.io/assets/images/placeholders/128x128.png"></figure>

Rounded images

Bulma documentation

Example

Code

b.Image(
			b.ImgSq128,
			e.ImgSrc(
				"https://bulma.io/assets/images/placeholders/128x128.png",
				b.Rounded,
			),
		)

ResultHTML

<figure class="image is-128x128"><img class="is-rounded" src="https://bulma.io/assets/images/placeholders/128x128.png"></figure>

Example

Code

b.ImageImg(
	"https://bulma.io/assets/images/placeholders/128x128.png",
	b.ImgSq128, b.Rounded,
)

ResultHTML

<figure class="image is-128x128"><img class="is-rounded" src="https://bulma.io/assets/images/placeholders/128x128.png"></figure>

Retina images

Bulma documentation

Example

Code

b.ImageImg(
	"https://bulma.io/assets/images/placeholders/256x256.png",
	b.ImgSq128,
)

ResultHTML

<figure class="image is-128x128"><img src="https://bulma.io/assets/images/placeholders/256x256.png"></figure>

Responsive images with ratios

Bulma documentation

Example

Code

e.Div(
	e.Styles{"width": "10rem"},
	e.P("Square (or 1 by 1):"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/480x480.png",
		b.ImgSquare,
	),
	e.P("1 by 1:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/480x480.png",
		b.Img1By1,
	),
	e.P("5 by 4:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/600x480.png",
		b.Img5By4,
	),
	e.P("4 by 3:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/640x480.png",
		b.Img4By3,
	),
	e.P("3 by 2:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/480x320.png",
		b.Img3By2,
	),
	e.P("5 by 3:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/800x480.png",
		b.Img5By3,
	),
	e.P("16 by 9:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/640x360.png",
		b.Img16By9,
	),
	e.P("2 by 1:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/640x320.png",
		b.Img2By1,
	),
	e.P("3 by 1:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/720x240.png",
		b.Img3By1,
	),
	e.P("4 by 5:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/480x600.png",
		b.Img4By5,
	),
	e.P("3 by 4:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/480x640.png",
		b.Img3By4,
	),
	e.P("2 by 3:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/320x480.png",
		b.Img2By3,
	),
	e.P("3 by 5:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/480x800.png",
		b.Img3By5,
	),
	e.P("9 by 16:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/360x640.png",
		b.Img9By16,
	),
	e.P("1 by 2:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/320x640.png",
		b.Img1By2,
	),
	e.P("1 by 3:"),
	b.ImageImg(
		"https://bulma.io/assets/images/placeholders/240x720.png",
		b.Img1By3,
	),
)

ResultHTML

Square (or 1 by 1):

1 by 1:

5 by 4:

4 by 3:

3 by 2:

5 by 3:

16 by 9:

2 by 1:

3 by 1:

4 by 5:

3 by 4:

2 by 3:

3 by 5:

9 by 16:

1 by 2:

1 by 3:

<div style="width:10rem;"><p>Square (or 1 by 1):</p><figure class="image is-square"><img src="https://bulma.io/assets/images/placeholders/480x480.png"></figure><p>1 by 1:</p><figure class="image is-1by1"><img src="https://bulma.io/assets/images/placeholders/480x480.png"></figure><p>5 by 4:</p><figure class="image is-5by4"><img src="https://bulma.io/assets/images/placeholders/600x480.png"></figure><p>4 by 3:</p><figure class="image is-4by3"><img src="https://bulma.io/assets/images/placeholders/640x480.png"></figure><p>3 by 2:</p><figure class="image is-3by2"><img src="https://bulma.io/assets/images/placeholders/480x320.png"></figure><p>5 by 3:</p><figure class="image is-5by3"><img src="https://bulma.io/assets/images/placeholders/800x480.png"></figure><p>16 by 9:</p><figure class="image is-16by9"><img src="https://bulma.io/assets/images/placeholders/640x360.png"></figure><p>2 by 1:</p><figure class="image is-2by1"><img src="https://bulma.io/assets/images/placeholders/640x320.png"></figure><p>3 by 1:</p><figure class="image is-3by1"><img src="https://bulma.io/assets/images/placeholders/720x240.png"></figure><p>4 by 5:</p><figure class="image is-4by5"><img src="https://bulma.io/assets/images/placeholders/480x600.png"></figure><p>3 by 4:</p><figure class="image is-3by4"><img src="https://bulma.io/assets/images/placeholders/480x640.png"></figure><p>2 by 3:</p><figure class="image is-2by3"><img src="https://bulma.io/assets/images/placeholders/320x480.png"></figure><p>3 by 5:</p><figure class="is-3by5 image"><img src="https://bulma.io/assets/images/placeholders/480x800.png"></figure><p>9 by 16:</p><figure class="image is-9by16"><img src="https://bulma.io/assets/images/placeholders/360x640.png"></figure><p>1 by 2:</p><figure class="image is-1by2"><img src="https://bulma.io/assets/images/placeholders/320x640.png"></figure><p>1 by 3:</p><figure class="image is-1by3"><img src="https://bulma.io/assets/images/placeholders/240x720.png"></figure></div>

Arbitrary ratios with any element

Bulma documentation

Example

Code

b.Image(
	b.Img16By9,
	e.IFrame(
		b.Ratio,
		e.Width("640"),
		e.Height("360"),
		e.Src("https://www.youtube.com/embed/YE7VzlLtp-4"),
		gomponents.Attr("frameborder", "0"),
		gomponents.Attr("allowfullscreen"),
	)
)

ResultHTML

<figure class="image is-16by9"><iframe class="has-ratio" width="640" height="360" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe></figure>