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


Before starting, first add images to the Media Manager by following one of the two methods below:



Method 1: Upload Images  


Navigate to My Content → Media Manager → Click on “Upload Image”




In this section, there are two options to upload an image. 


Click to Upload / Drag the Files to Upload




Method 2: Download Photos by Pexels  


Navigate to My Content → Media Manager → Click on “Photos by Pexels”




Search by Keyword using the designated field:




Select the preferred orientation and image size here, then click "Search Photos":




Select the size for download and click the download button:




Click on Back to return to the Media Manager again, right-click on the preferred image, and click “Copy Image URL”





The images FULL URL path should look like this:


http://YOURDOMAIN/images/background-pricing1-(1).jpg


The URL path that will be used to post on WYSIWYG Editor looks like this:


/images/background-pricing1-(1).jpg


Now that the images have been uploaded and the URL path has been copied it's possible to insert these images on preferred WYSIWYG Editors.


For this instance, an example Blog Article will be presented.


Adding Images on WYSIWYG Editors


1) Adding Images on Blog Articles


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" >



2) Adding Images on Static Pages


Navigate to My Content --> Web Page Builder --> Click on "New Web Page"




On WYSIWYG Editor, click on "Insert Image".




There are 4 available options:




1. Drag and Drop the image:




2. Paste the FULL URL path and click "Insert"




3. Click "Browse" to choose the image manually from the Media Manager




4. Click "Pexels" to open up the following Image Search Menu:



Additional Image Options


  • Replace Image:




  • Align Image "left", "Centered" or "right"



  • Image Caption: 



  • Insert Link:



  • Add Alternative Text:



  • Change Image Size:



  • Choose different styles, including the ability to hide the image on mobile:






This is an example of how a "Circle" styled image looks like:


  • Remove: