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
  options:
    opacity: 1
    rounded: null
    margin:
      top: null
      bottom: null
    dimensions:
      max:
        width: null
        height: null
      min:
        width: null
        height: null
      base:
        width: null
        height: null
    horizontal_position: center
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Properties

srcstring

The local or external path to the image

altstring

The alternative text for the image

optionsobject

Configuration options for the Image

opacitynumeric

Sets the level of transparency of the image

horizontal_positionenum

start
center
end

roundedenum

Adds the ability to add rounded corners to the image

none
xs
s
m
l
xl
2xl
3xl

dimensionsobject

Sets the width and height for the image

baseobject

Set a base dimensions for the image

widthnumber

Set a base width for the image

heightnumber

Set a base height for the image

maxobject

Set a max dimensions for the image

widthnumber

Set a max width for the image

heightnumber

Set a max height for the image

minobject

Set a min dimensions for the image

widthnumber

Set a min width for the image

heightnumber

Set a min height for the image

marginobject

The margin around the image.

topenum

The top margin size.

none
xs
s
m
l
xl
2xl

bottomenum

The bottom margin size.

none
xs
s
m
l
xl
2xl

Examples

Corners

---
block:
  _bookshop_name: elements/image
  src: /assets/images/bg.jpg
  alt: Forest
  options:
    opacity: 1
    rounded: xl
    margin:
      top: null
      bottom: null
    dimensions:
      max:
        width: null
        height: null
      min:
        width: null
        height: null
      base:
        width: null
        height: null
    horizontal_position: center
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Opacity

---
block:
  _bookshop_name: elements/image
  src: /assets/images/bg.jpg
  alt: Forest
  options:
    opacity: 0.5
    rounded: null
    margin:
      top: null
      bottom: null
    dimensions:
      max:
        width: null
        height: null
      min:
        width: null
        height: null
      base:
        width: null
        height: null
    horizontal_position: center
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Dimensions

---
block:
  _bookshop_name: elements/image
  src: /assets/images/furniture.jpg
  alt: Furniture
  options:
    opacity: 1
    rounded: null
    horizontal_position: center
    margin:
      top: null
      bottom: null
    dimensions:
      max:
        width: null
        height: null
      min:
        width: null
        height: null
      base:
        width: 500
        height: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

---
block:
  _bookshop_name: elements/image
  src: /assets/images/furniture.jpg
  alt: Furniture
  options:
    opacity: 1
    rounded: null
    horizontal_position: center
    margin:
      top: null
      bottom: null
    dimensions:
      max:
        width: null
        height: null
      min:
        width: 1000
        height: null
      base:
        width: null
        height: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

---
block:
  _bookshop_name: elements/image
  src: /assets/images/furniture.jpg
  alt: Furniture
  options:
    opacity: 1
    rounded: null
    margin:
      top: null
      bottom: null
    dimensions:
      max:
        width: 200
        height: null
      min:
        width: null
        height: null
      base:
        width: null
        height: null
    horizontal_position: center
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Horizontal Position

---
block:
  _bookshop_name: elements/image
  src: /assets/images/furniture.jpg
  alt: Furniture
  options:
    opacity: 1
    rounded: null
    horizontal_position: start
    margin:
      top: null
      bottom: null
    dimensions:
      max:
        width: null
        height: null
      min:
        width: null
        height: null
      base:
        width: 500
        height: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

---
block:
  _bookshop_name: elements/image
  src: /assets/images/furniture.jpg
  alt: Furniture
  options:
    opacity: 1
    rounded: null
    horizontal_position: center
    margin:
      top: null
      bottom: null
    dimensions:
      max:
        width: null
        height: null
      min:
        width: null
        height: null
      base:
        width: 500
        height: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

---
block:
  _bookshop_name: elements/image
  src: /assets/images/furniture.jpg
  alt: Furniture
  options:
    opacity: 1
    rounded: null
    horizontal_position: end
    margin:
      top: null
      bottom: null
    dimensions:
      max:
        width: null
        height: null
      min:
        width: null
        height: null
      base:
        width: 500
        height: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}