This tutorial will explain how to upload an image and properly place it into one of the Pages. In this example we will replace the default image, (500 x 500) in the About page; however, the process used in this tutorial can be used for uploading an image into any of the Pages.
- Log into your account and select Administration from the MyDashboards drop down menu. Go to Pages and scroll down the About page and click on the Edit button.
- Click anywhere inside the text editor, (e.x. beside the “About Us” header text). You will now see that the text editor icons become active. Click on the Toggle HTML icon.
- It is always good to back up the original code . You can do this by copying all of the HTML code from the text box and pasting it into a separate text editor, (e.x. Sublime Text is free for download). Now name the text file that contains the HTML code, (e.x. about.html) and save it somewhere on your computer.
- Click on the Toggle HTML icon again and then click your mouse on the right side of the “About Us” heading in the text editor. Then click on the Upload Image icon and select an image from your computer. Important Note: if you are unable to upload a certain image then do the following to the file: Export > Save For Web (Legacy) > Set Preset to PNG-24 > Save and then try to upload the image again.
- The image will appear on the right side of the “About Us” heading, (at this point things will not appear as you want them but this will be fixed in a moment). Click on the Toggle HTML icon.
- Find the Image Tag for the file that you just uploaded. An easy way to locate the image tag is to press “Ctrl + F”, (“Command + F” for Mac) and type in “<img” into the Find window that appears. Once you have located the appropriate Image Tag highlight and cut the entire tag.
- Find the default Image Tag that you want to replace, (enter “<img” into the Find window again). Once you have located the appropriate default Image Tag then paste the new Image Tag on the left side of it. Below the new Image Tag is green and the default Image Tag is red.
<img src=”http://thrinacia-origin.grid2/static/images/portal/ec/f0/6f/85E72CFC-7288-11E5-9B80-7A445DF299F1-image-Bulb-500×500.png” style=”max-width:100%”> <img class=”about-us-img” src=”https://placehold.it/500×500″>
- Copy the Class Name from the default Image Tag, (class=”about-us-img”) and paste it on the right side of the “<img” in to new Image Tag. Then delete the default Image Tag.
<img class=”about-us-img” src=”http://thrinacia-origin.grid2/static/images/portal/ec/f0/6f/85E72CFC-7288-11E5-9B80-7A445DF299F1-image-Bulb-500×500.png” style=”max-width:100%”>
- Click on the Toggle HTLM icon to view the updated WYSIWYG layout. Click on the Save Page button. Navigate to the page you updated to ensure that the layout is correct.
