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:
   • URL: https://www.adobe.com/express/feature/image/resize
     • 
   • Click "Upload your photo"
   • On the next screen, upload your photo by dragging/dropping or browsing on your device
     • 
   • Choose "Custom" from the "resize for" dropdown
     • 
   • Enter your image width, the height will be automatically adjusted to keep the ratio.
   • Click Download
     • You will be prompted to sign up or log in if you're not already logged in. You should have an adobe account through KSU already - just use your Flashline username and you'll be directed to SSO
       • 
     • Once logged in, name your image in the download prompt that appears, and click the "save"/"download" button.
     • Start your image's filename with your group name or abbreviation - this will make it easier for you and other editors to find the images in the future.
       • 
6. Embed the image into your text field with the instructions on adding an image to the WYSIWYG here.
7. To wrap text around the image, click on "Edit media" to choose left/right alignment
   1. Add padding
      1. If the image is left-aligned, add "padding-right: 10px;" into the "Data Styles" field.
      2. If the image is right-aligned, add "padding-left: 10px;" into the "Data Styles" field.
      3. 
8. Check to see how the image displays at different screen sizes
   1. Note: there will almost always be screen sizes where the content gets squished to a few words on one side of a text-wrapped image. 
9. If it doesn't look how you expected or wanted it to, repeat the steps above with a different image size.