As the text editor allows you to edit the HTML source there are many options for what you can do within the text. A popular option is to add images inside the text. You'll need to learn a bit about writing HTML code but the results are worthwhile. These instructions work for Microsoft Internet Explorer; the process is the same for other browsers but some of the menu options will be different. The same instructions work when adding images to any HTML code that you intend to use on a webpage within the CMS or in a newsletter.
Step One - Find an image's URL
We need to find the URL the image you want to add to text.
-
Open the Album containing the image and click the Link option for the image which opens the image in new tab
-
Copy the URL displayed in the Address Bar
Step Two - Add the image to text
Once you have the image URL, the next step is to add it a text box.
-
Enter all the content you want in the text box
-
Click the Source button on the text edit's toolbar to display the HTML source; you may also need to click the Maximise button to display the content in a full screen window
-
Add the following HTML code to the source in the position where you want the image to be displayed - <img src="your_image_url" />, exchanging your_image_url for the URL you copied in the previous stage. The best placement is usually after a <p> tag before any text. Make sure the link starts with http:// not https://.
-
Once you've added the image, click the Source button again to return to the normal edit mode. The image will be displayed. If the image is the wrong size, check out the different size options below.
-
To make other changes to the text editor you can right-click the image and select Image Properties. This will allow you to add Alternative Text, which is displayed when you hover your mouse over an image. You can also set the image alignment, add a hyperlink to the image plus other options.
Step Three- Change the image size
It's possible to change the size of the image in the text. All you need to do is change the image type in the URL to either Data (largest) to LargeThumbnail, Thumbnail to MicroThumbnail (smallest).
Here are some examples;
Data - http://hammerheadstorage.blob.core.windows.net/ysd-public-image/A28CD9E6-3607-4003-B0C1-B0FCB8A4B10D_Data.jpg
LargeThumbnail - http://hammerheadstorage.blob.core.windows.net/ysd-public-image/A28CD9E6-3607-4003-B0C1-B0FCB8A4B10D_LargeThumbnail.jpg
Thumbnail - http://hammerheadstorage.blob.core.windows.net/ysd-public-image/A28CD9E6-3607-4003-B0C1-B0FCB8A4B10D_Thumbnail.jpg
MicroThumbail - http://hammerheadstorage.blob.core.windows.net/ysd-public-image/A28CD9E6-3607-4003-B0C1-B0FCB8A4B10D_MicroThumbnail.jpg
Here is an example of what is possible. The image below is inserted into a text box using an <img> tag.
