How to Place an Image on a Webpage

Have you uploaded an image file and now you need to know how to place it on a webpage in the WEO Platform? Follow the instructions below to learn how!

1. Login to the WEO Platform. If you've already logged in and navigated away from the Main Page, navigate back to the Main Page.

2. You will now see the Main Page in the Platform. On this page, front and center, is a section called Your Services. Click on the icon link labeled Website.

3. The View & Edit Website page will load. On this page you will see a list of all of the live (Visible) and not currently live (Hidden) webpages that make up your website. The page will be separated into two main sections, the first with all of the pages that are linked in the navigation with the heading Website Pages in Navigation, and the second with pages not linked in navigation with the heading Other Pages. Scroll down to the page you would like to edit and click the Edit button under Actions on the right-hand side of the screen.

4. The Edit Webpage page will load and from here you can select which article you want to use. Most webpages have up to 5 articles available but only use 1 article, called Article #1. Typically, the only webpage that uses more than 1 article is the Homepage. Scroll down to the article you would like to edit and click the edit article button. For this example, it will be for Article #1.

5. The Edit Article page will load and this is where you will add your image. On the left-hand side of the screen is the Article body field where the editable code/text is located. Find where you would like to add your image, then place your image name inside a WEO Pic key: [[[Pic: PictureName| optional width | optional link to ext URL| optional alignment | optional style/class| optional alt text| opt Frame pic| opt frame width| opt frame height| opt frame class/style]]]. For more information on keys, see the help article WEO Keys and Basic HTML. For our example, we'll set the  PictureName to WEO-Media-Patient-After-Regular-Cleaning.jpg. We'll set the optional width to 400 (which is in pixels), leave the link parameter blank (but leave the vertical pipes in the key), and set the alignment to right. It is important to always add the class of TPimg-responsive to the optional style/class parameter. You can add other inline CSS properties here as well. You will also always want to fill in the alt text for screen readers to read. For our example, we'll use "Woman smiling in a dental chair after a cleaning." You can leave off the rest of the parameters for the border frame. So our finished key looks like: [[[Pic:Patient-After-Regular-Cleaning.jpg|400||right|TPimg-responsive|Woman smiling in a dental chair after a cleaning.]]].

6. Next, to save your changes, scroll down the page and click the Save & Preview button.

7. Important Note: Never click on the Publish Article button. It is for the blogging feature in the WEO Platform and not to be used on regular articles.

8. Once you have made your edit and saved it, you have to force cache the page or the site in order for the edit to show up on the webpage.

9. That's it, you're all done and can go edit another page! Also, remember you have up to an hour of monthly Support edits included with your Web Hosting package, so you can always reach out to us to make any changes for you. After all, we're here to help!