Skip to main content

Images and text

Floating images rely on the text height exceeding that of the image to produce solid results. The img-text shortcode deals with the opposite situation. Note the following:

  • Images will displayed at full width on smaller screens (< 768px wide).
  • On larger screens, images are displayed to the right of text.
  • At this size, images have a width of 18.5 rem (296px). Due to this narrow width, use the attribution shortcode to handle image attribution.
  • Using img-text vertically aligns image and text content to the centre.
  • If a large amount of text is used, dead space under the image is created. Consider using floating the image instead.

Overall structure of an essay showing the introduction introducing the argument, a series of body paragraphs with the conclusion at the end.
An essay has a beginning (introduction) that:

  • introduces topic/context
  • states argument
  • outlines main points

It has a middle (body) that:

  • has a series of paragraphs that develop the argument
  • each paragraph contains one main idea
  • each topic sentence links directly to the argument

It has an end (conclusion) that:

  • restates argument
  • sums up
  • relates to broader context
[img-text url="https://path.to/image.jpg" alt="An example image" attribution-id="my-attribution"]
<p>html content here</p>
[/img-text]

Aligning items to the top

It's possible to align items to the top. This may be useful if the text is only slightly taller than the image. In this situation, the float alternative may lead to ugly text formatting. Just add align-top="true" to the shortcode.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed. Fusce gravida, turpis at pulvinar feugiat, elit tortor convallis urna, sit amet sollicitudin augue ex a velit. Curabitur varius sapien ligula, sit amet porta sapien cursus ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed. Fusce gravida, turpis at pulvinar feugiat, elit tortor convallis urna, sit amet sollicitudin augue ex a velit. Curabitur varius sapien ligula, sit amet porta sapien.

[img-text url="https://path.to/image.jpg" align-top="true" alt="An example image" attribution-id="my-attribution"]
<p>html content here</p>
[/img-text]

Icon and text

Adding icon=true places the image to the left of the text and reduces the imafge size to 48px and 80px on larger screens (≥768px). Images and text are displayed side by side at all screen sizes.

Example title

A short line of text for this layout.

[img-text url="https://path.to/image.jpg" icon="true" attribution-id="my-attribution"]
<p>html content here</p>
[/img-text]

Again, it's possible to align items to the top. Just add align-top="true" to the shortcode.

Example title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed. Fusce gravida, turpis at pulvinar feugiat, elit tortor convallis urna, sit amet sollicitudin augue ex a velit. Curabitur varius sapien ligula, sit amet porta sapien cursus ac.

[img-text url="https://path.to/image.jpg" align-top="true" icon="true" attribution-id="my-attribution"]
<p>html content here</p>
[/img-text]

Keywords