Blog: Adding images within body copy using HTML

To create HTML code for images, do the following:

  1. Upload the image via Content > Media > Add Media > Image
    1. Use ‘Choose File’ to select the file
    2. Fill in ‘Alternative text’ field
    3. ‘Save’
  2. The page will refresh, and you’ll end up on Content > Media
  3. Click the ‘Media Name’ for the image you just added
  4. Right click on the file name > ‘Copy Link Address’
  5. Paste the relative portion of the link into the HTML code (or paste in the whole link and then remove the https://www.omnipod.com portion):
    • <p><img src="/sites/default/files/2022-04/blog_podder-myrthe_living-on-my-own-with-type-1_setting-up-pod.jpg" width=""/></p>
    • Note: Be sure that you still have one double quote on each end of the link with no spaces between the quotes and the link.
To insert the HTML code for the image(s) into your blog post body copy, do the following:
  1. Go to the Edit tab of the blog post
  2. In the Body section click the ‘Source’ button in the top toolbar
  3. Find the paragraph that you want to add the picture beneath, add a line using return after the end of that paragraph
    • Note: Be sure that the paragraph keeps its </p> at the end of its code.
  4. Paste in the HTML code on this new line
  5. Click the ‘Source’ button again to exit source mode
    • Note: You must exit source mode before saving! If you save the page and your changes were not saved it is likely because this step was skipped.  
  6. Click ‘Save (this translation)’ at the bottom of the page
Image Sizing

If your image is too large or too small, you will need to add a width to the HTML code.

  1. Look for the width="" portion of the code
  2. Between the double quotes, add 1000px to get width="1000px"
  3. Then exit source mode to see what size that makes your image
    • Example: the screenshot image placed at the end of this page has width="1000px" in its code.
  4. If it is too large go back into source mode and change the 1000px to a lower number
  5. You may need to repeat steps 3-4 a few times before you find the best size

 

The example HTML code used above can be seen on the "Op jezelf wonen met diabetes type 1" blog post and in the below screenshot:

(Note that the code shown in the screenshot does not include the width= portion as these images did not need to be resized - but the width="" can remain in the code even when it is not needed, so just ignore that portion if you don't need it.)