Test: Image alignment

This is not a standard blog post. This entry is more akin to the good old test pattern. Consequently, it does not appear in the post list view:

build:
  render: always
  list: never

And it should not be indexed by search engines.

noindex: true
sitemap:
  disable: true

It is a post by me, for me, to test how my website displays media and text.

01. Small image, centered#

This text must appear below the image.

02. Small image, left-aligned#

This text must appear to the right of the image. The image must be positioned at the left margin.

03. Small image, right-aligned#

This text must appear to the left of the image. The image must be positioned at the right margin.

04. Large image, centered and scaled#

The image must not exceed the boundaries of the text area. —

05. Large image, left-aligned#

There needs to be room for text to the right of the image.

06. Large image, right-aligned#

There needs to be room for text to the left of the image.

07. Two consecutive images#

The image borders must not touch each other.

08. Broken image link#

I expect to see the image’s alternative text here.

09. Image with caption and attribution#

Image displayed on the right with a title. Text wrapping must work: multiple lines instead of an overly wide frame.

10. Image and bullet points#

• The bullet points appear to the right of the image.
• There is no collision or overlap.
• The list display remains consistent,
• even where the image ends on the left.

11. Image between headings#

This heading must not overlap or interfere with the image.#

The centered image does not have text wrapping around it. Headings should not appear next to the image either.

12. Image before a quote#

This quote has border lines at the top and bottom that must not collide with the image.

13. Image before a citation#

This test citation must not encroach upon the image. Does the text wrapping work correctly?¹

14. Image next to a long block of text#

With this paragraph, I am checking whether the text flow around the image works correctly. In the desktop view, I expect the image to take up 60% of the width, leaving the remainder for the surrounding text. In the mobile view, images are always centered, so issues shouldn’t arise there in the first place.

15. Centered video#

The video is displayed correctly without being cropped. If it is too wide, it is scaled down to fit the maximum width of the text area.

16. Audio with title#