Body Text Image Sizing Tutorial

Adding an image to a content editor works differently than it did in Drupal 7 - there is now no embedded option in the WYSIWYG editor to scale an image.

Here are the steps to follow for a properly-sized WYSIWYG image embed with wrapped text.

  1. Add all text content to your page, with relevant links/headers/formatting.
  2. Find the image you want to use
  3. Decide roughly how large you want the image to be.
    • 1/3 width of your section is usually a good size for an article context/decorative image, but smaller or larger (1/4 or 1/2, or even full-width) may be appropriate, depending on content.
  4. Calculate your new image width
    • based on the width of the text field. (the height will be automatic based on that)
    • Example desired image width: 1/3
    • Standard Drupal text section widths:
      • Homepage full width: 1200px wide
      • Basic Page standard layout: 720px wide
      • Basic Page full-width layout: 1170px wide
      • Article full-width: 1100px wide (currently, there's a bug for unlimited width, but that should be fixed soon)
    • Example: A 1/3 width image on a basic page standard layout would be
      • 720px / 3 = 240px
    • Example: A 1/2 width image on a full-width homepage layout would be
      • 1200px / 2 = 600px
  5. Use Adobe Express (or another image editing software) to resize the image: