We're excited to announce the BETA launch of allowing for image upload and video embed via the WYSIWYG editor for the admin blog, and all other feature posts (coupons, properties, classifieds, etc). This means uploading images and including them inside the "Details" section of feature posts is now a simple process for all users of your software, including you!

 

We've eliminated the long process requiring both access to the File Manager and the inserting of complex HTML code. Now any user can easily include images inside of the admin blog articles. 


How To Add The New Update To Your Website


Before adding the latest Froala Editor to your website it is critical that one point be fully understood. There are two versions of the Froala Editor that you can add to your website. You can add this update to ANY of your membership features, which means that your members will now be able to add images to any feature post, whether it be coupons, member blogs, properties, events, or even custom features. 

There are essentially two new Froala Editors to choose from: 
  • Admin Froala Editor
  • Public Froala Editor

The Admin Froala Editor allows users to retrieve images from the File Manager when editing an article:


PFX3BkV96ziS-QJhzI4WS7ihhuIWkkQqgw.png



The Public Froala Editor allows you upload images while editing the article, but does not allow them to be selected from the list of all uploaded images:


h8t5VTMCzSFdHry42KhCiCTnljjzwJ7zgg.png



If your members have access to the form, we strongly recommend setting up the Public Froala Editor rather than the Admin Froala Editor for security reasons (members would be able to see all images ever uploaded to your images folder). 


ADMIN FROALA EDITOR


To add the Admin Froala to one of your forms please follow these instructions:

  1. Go to TOOLBOX >> FORM MANAGER >> SELECT FORM YOU WISH TO ADD THE ADMIN FROALA TO
  2. Scroll down until you find the Froala widget and click on "Edit". Please note you may see the widget name as "[widget=Form - Froala Editor Javascript]", or you may find that it is calling an older WYSIWYG editor. 


    KhemRDEVEQcDAKJbgYjGee3vmX8uX7PYnA.png


  3. In the "Field Label" section add: [widget=Form - Froala Editor Javascript]
  4. In the "CSS CLASS" add: froala-editor-admin

    7HZ2UeBwLbUFyYzVtYf_v8CBIxiTGhbgOg.png




  5. Click on "save changes"
  6. You can confirm that it is working as it should by logging in as a member that has access to that specific feature and clicking on the "add image" icon. You should see a folder icon:


    PFX3BkV96ziS-QJhzI4WS7ihhuIWkkQqgw.png




  7. Click on the folder icon will open up all of your website images that have been uploaded inside of your website's FTP:

    s7AjiDc3KlJKZy5exS_xGcAmA5avlfHh0Q.png



PUBLIC FROALA EDITOR


To add the Public Froala to one of your forms please follow these instructions:


  1. Go to TOOLBOX >> FORM MANAGER >> SELECT FORM YOU WISH TO ADD THE ADMIN FROALA TO
  2. Scroll down until you find the Froala widget and click on "Edit". Please note you may see the widget name as "[widget=Form - Froala Editor Javascript]", or you may find that it is calling an older WYSIWYG editor. 


    KhemRDEVEQcDAKJbgYjGee3vmX8uX7PYnA.png


  3. In the "Field Label" section add: [widget=Form - Froala Editor Javascript]
  4. In the "CSS CLASS" add: froala-editor-user-upload


    AVFtRC2BsEjxNFYR9mAXg9dM4dbWI2Gktg.png




  5. Click on "save changes"
  6. You can confirm that it is working as it should by logging in as a member that has access to that specific feature and clicking on the "add image" icon. You should NOT see a folder icon:


    h8t5VTMCzSFdHry42KhCiCTnljjzwJ7zgg.png




How To Include Images in Admin Blog Articles


To add an image inside the body of a blog article please follow these instructions:


  1. Login as a member that has the ability to write admin blog articles. 
  2. Click on "Add New Blog"

    blob1476999416756.png



  3. Inside the WYSIWYG editor click on the image icon:


    blob1477000476720.png



  4. Click on "Drop Image"


    blob1476999505813.png




  5. Select image and click on "Open"

  6. The image will upload in your article  and display as following:


    blob1476999577119.png




Additional Image Options


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


    blob1476999756426.png




  • Insert Links
  • Add a Rounded Effect or Bordered Effect


    blob1476999860802.png




  • And much more!



How To Embed Youtube and Vimeo Videos


To embed a video in a blog article please follow these instructions:

  1. Login as a member that has the ability to write admin blog articles. 
  2. Click on "Add New Blog"
  3. Click on the "Video" icon:


    blob1476999984697.png




  4. Paste the link to the video. An acceptable format is: https://www.youtube.com/watch?v=eFKfoXLF2xk


    blob1477000044470.png



  5. Click on "Insert"

  6. The video will now display in your blog article:


    blob1477000125039.png




  7. To edit the size of the video and change the alignment click on the image inside of the WYSIWYG editor and select the appropriate options:


    blob1477000169473.png