Inline Images

The Inline Image Component allows you to place an image within the body of the page text. On smaller devices, these images will adjust to fit the width of the screen.

Optimizing Images

Please refer to our image optimization guide before you upload inline images.

Fields

  • Image - the URL of the image to display
  • Caption - the caption to display beneath the image. This is required for accessibility standards.
  • Credit - if the image can be credited
  • Alignment - left or right (half-width), or full (full-width)

Notes

  • If the image is less than 200px wide, it will not go full-screen on mobile.
  • Maximum Dimensions - 800px wide x 600px tall
  • Maximum File Size - 100KB

Examples


Image: Friendly Kittens.
Friendly Kittens. Image Credit: placekitten.com.

"Sed ut inventore veritatis et quasi perspiciatis unde omnis iste architecto beatae vitae dicta sunt explicabo natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos quia voluptas sit aspernatur aut odit aut fugit, qui ratione voluptatem sequi nesciunt inventore veritatis et quasi.

Image: More Kittens.
More Kittens. Image Credit: placekitten.com.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"