The WYSIWYG Editor
Last updated:
1:30pm Nov 27, 2017

How to Embed an Image in your post

In the WYSIWYG Editor, the Media Browser Button, , will allow you to embed a media file, in this case an image, in your post.

Clicking on this button brings up an pane that allows you to either upload a file, or specify a URL for the Media file:

alt text test

We're doing an Upload. So click the 'Browse' Button and locate the media file you wish to upload,  then click on the Upload button and your image will be uploaded.

You'll then see this screen:

Under Options, pick Original for the Display as value. 

Scroll down in this pane to see these additional fields:

Write a short description of the image and enter it into the Alt Text field and a descriptive title for the Title Text.  This allows screen readers to read out these texts for the visually impaired.

Clicking Submit, will embed the image in your page. To refine your image a bit more, double click on it to bring back up the image edit pane:

Landscape Images wider than 800px should be sized down to a width of 800px. Portrait images whose height is greater than 500px should be resized to a height of 500px. The Border should be set to '1', and the HSpace and VSpace to '15'. Make sure that the little lock icon is locked. That keeps the image's proportions correct when you resize it.

If needed, you can copy the URL, click on the 'Link' tab, and enter the URL for the uploaded image.

This will allow the reader to click on the image and bring up a full sized version. The images above are set up this way. Click on one of the above two images and see.

For a link to an external website, you can pick a Target of  New Window or '_blank'.  But for an uploaded image, leave it as not set.

Click here for a video demo of inserting an image in a post.


How to Embed a Video in your post

The Media Browser Button, , also can embed the URL links used for embedding YouTube and Vimeo Videos.

In this post, we're going to embed two videos. One from YouTube and one from Vimeo:

https://vimeo.com/108860552
https://youtu.be/PniJM5IwXfE

Clicking on the Media Browser Button, brings up a pane that allows you to specify a URL for the Media file:

alt text test

For Videos, Click on the WEB tab. You'll then see:

Here, we'll enter the URL for your video, Change the https to http. And take the defaults to any other prompt.

When you've inserted both videos, giving each of them a title, you'll see the following in the editor window:

And here are the actual embedded videos:

YouTube

Vimeo

 


Using Tables

In the WYSIWYG, the Table Button helps you construct tables, their rows and cells, and other attributes as well.

Attachments

AttachmentSize
File recording_39.mp49.75 MB
File recording_41.mp48.03 MB