How to Post Images On WYSIWYG Editors

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000050864

What is WYSIWYG Editor?

WYSIWYG is an acronym for "what you see is what you get". The WYSIWYG Editor enables rich text editing capabilities for post types, about me sections, creating emails and even landing pages.

For more information regarding WYSIWYG Editors, please visit the master article shared down below.

Everything About WYSIWYG Editors

Adding Images in Admin Text Editors

The text editors in the admin area (for example, in the Web Page Builder) add images from the Insert Image button of the toolbar.

Click in the text where the image should go, then click Insert Image in the toolbar. The Insert Image menu offers four ways to add an image:

1. Upload Image: drag an image onto Drop image, or click it and select a file from the computer.
2. By URL: paste the full address of an image and click Insert.
3. Browse: opens the image picker on My Library, which lists the files in the Media Manager. Click an image to place it in the text.
4. Library (Stock Photo Library): opens the image picker on Free Stock Photos. Search for a photo and click Use This Image; the photo is saved to the Media Manager and placed in the text.

Save the page as usual (for example, Save Changes) to keep the image. More about the image picker, including uploading from inside it: Choosing an Image with the Image Picker.

Replace an Image

Click the image in the text, then click Replace (1 in the screenshot below). The Insert Image menu opens with the same four choices; picking an image with Browse or Library swaps the selected image for the new one.

Additional Image Options

Clicking an image in the text opens its options:

1. Replace: swap the image for another one (see above).
2. Align: align the image left, center or right.
3. Image Caption: add a description or caption under the image.
4. Insert Link: turn the image into a clickable link.
5. Alternative Text: add alt text for SEO and screen readers.
6. Change Size: set the width and height of the image.
7. Style: choose a style, such as a circle, or hide the image on mobile.
8. Remove: delete the image from the text.

Adding Images in Member Blog Articles

Members add images to the text editors of their own posts from their Member Dashboard. One way is to paste an image's address into the editor's code. To get the address of an image in the Media Manager, open My Content » Media Manager (upload the image or save a stock image there first if needed), hover over the image and click Copy Link.

Then, as the member:

Login as preferred member who is also allowed to post “Blog Articles”

On the Member's Dashboard, navigate to Blog Articles → Add Blog Articles

On the “Article Content” section, click on “Code View”

On a new line, paste the code specified down below:

<img src="PASTE YOUR URL PATH" >

The image will be rendered on the fly.

IMPORTANT NOTE #1: In this example, the URL path is “/images/test.jpg”

IMPORTANT NOTE #2: In this example, the full code with the URL path is:

<img src="/images/test.jpg" >