Image
Renders an image with options for automatic sizing, positioning, and alternative text.
---
block:
_bookshop_name: elements/image
src: /assets/images/bg.jpg
alt: Forest
style:
opacity: 1
rounded: null
background:
enabled: null
horizontal_position: null
vertical_position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Properties
srcstring
The local or external path to the image
stylesobject
Contains ways of styling the image
opacitynumeric
Sets the level of transparency of the image
roundedenum
Adds the ability to add rounded corners to the image
none |
|
xs |
|
s |
|
m |
|
l |
|
xl |
|
2xl |
|
3xl |
backgroundobject
Sets the image as a background image. This is only used for a section background image.
enabledboolean
Whether to treat this as a background image
horizontal_positionenum
How to position the image horizontally inside its container
left |
|
center |
|
right |
vertical_positionenum
How to position the image vertically inside its container
top |
|
center |
|
bottom |
repeatboolean
Repeats the background image (useful for patterns) rather than trying to cover the element.
fixedboolean
If true, the background image stays stationary while the page scrolls.
Examples
Corners
---
block:
_bookshop_name: elements/image
src: /assets/images/bg.jpg
alt: Forest
style:
opacity: 1
rounded: xl
background:
enabled: null
horizontal_position: null
vertical_position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Opacity
---
block:
_bookshop_name: elements/image
src: /assets/images/bg.jpg
alt: Forest
style:
opacity: 0.5
rounded: null
background:
enabled: null
horizontal_position: null
vertical_position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Background
---
block:
_bookshop_name: layouts/section
label: null
margin:
top: null
bottom: null
shape:
type: diagonal-bottom
size: large
reverse: false
padding:
vertical: 3xl
horizontal: 3xl
max_content_width: xl
border:
border_width: null
border_type: null
border_color: null
background:
color: null
scheme: dark
shadow: null
transforms:
scale: null
scale_x: null
scale_y: null
rotate: null
skew_x: null
skew_y: null
translate_x: null
translate_y: null
blur: null
opacity: null
image:
src: /assets/images/bg.jpg
alt: Furniture
style:
opacity: 1
rounded: null
background:
enabled: true
horizontal_position: right
vertical_position: center
repeat: false
fixed: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: >-
Here's some content to push down the page so you can see how the
background image behaves
level: h1
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: null
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: layouts/section
label: null
margin:
top: null
bottom: null
shape:
type: diagonal-bottom
size: large
reverse: false
padding:
vertical: 3xl
horizontal: 3xl
max_content_width: xl
border:
border_width: null
border_type: null
border_color: null
background:
color: null
scheme: dark
shadow: null
transforms:
scale: null
scale_x: null
scale_y: null
rotate: null
skew_x: null
skew_y: null
translate_x: null
translate_y: null
blur: null
opacity: null
image:
src: /assets/images/bg.jpg
alt: Furniture
style:
opacity: 1
rounded: null
background:
enabled: true
horizontal_position: right
vertical_position: center
repeat: false
fixed: true
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: >-
Here's some content to push down the page so you can see how the
background image behaves
level: h1
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: null
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: layouts/section
label: null
margin:
top: null
bottom: null
shape:
type: diagonal-bottom
size: large
reverse: false
padding:
vertical: 3xl
horizontal: 3xl
max_content_width: xl
border:
border_width: null
border_type: null
border_color: null
background:
color: null
scheme: dark
shadow: null
transforms:
scale: null
scale_x: null
scale_y: null
rotate: null
skew_x: null
skew_y: null
translate_x: null
translate_y: null
blur: null
opacity: null
image:
src: /assets/images/pattern.svg
alt: Diagonal Pattern
style:
opacity: 1
rounded: null
background:
enabled: true
horizontal_position: right
vertical_position: center
repeat: true
fixed: true
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: >-
Here's some content to push down the page so you can see how the
background image behaves
level: h1
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: null
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Sizing
---
block:
_bookshop_name: layouts/section
label: null
shape:
type: null
size: null
reverse: null
margin:
top: null
bottom: null
border:
border_width: null
border_type: null
border_color: null
padding:
vertical: null
horizontal: null
max_content_width: xs
background:
color: null
scheme: light
shadow: null
transforms:
scale: null
scale_x: null
scale_y: null
rotate: null
skew_x: null
skew_y: null
translate_x: null
translate_y: null
blur: null
opacity: null
image:
src: null
alt: null
style:
opacity: 1
rounded: null
background:
enabled: false
horizontal_position: right
vertical_position: center
repeat: false
fixed: null
content_blocks:
- _bookshop_name: elements/image
src: /assets/images/furniture.jpg
alt: Furniture
style:
opacity: 1
rounded: null
background:
enabled: null
horizontal_position: null
vertical_position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}