Skip to content
Sitemason - Build on Us

New Image and Media Options for WYSIWYG Editor

Sitemason WYSIWYG Editor

Today Sitemason released some significant upgrades to the WYSIWYG Editor. The image uploader now supports captions and drag-and-drop resizing. We also added a new Media Embed button, amongst other changes. Continue reading for a full list of updates to the editor!

New Image Uploader

Sitemason WYSIWYG Image Uploader The image uploader added a few features! First and foremost, the process for uploading an image is identical. Go to the Upload tab, browse your computer for a file, and select "Send it to the Server" to upload a file. The improvements really apply to what happens after an image is uploaded.

 

 

 

 

 

Add Caption

Add CaptionThe biggest change to the uploader is the ability to easily add a caption to an image. In the Image Info tab, check "Captioned Image" and the resulting image in the WYSIWYG will have a field beneath the image for a caption with some placeholder text. Simple as that!

 

 

 

 

 

Drag and Drop Resizing

Drag and Drop Resize Another great new feature for images is the ability to grab a corner of the image to resize by dragging and dropping. With the image selected, grab the black square in the bottom right hand corner of the image and drag to the desired size.

 

 

 

 

Center Alignment

Center ImageYou can also now Center images from the image uploader! Select Center from the align options, and you’re all set! Previously centering was only allowed at the paragraph level, but can now be set on the image directly. A small change, but rather helpful.

 

 

 

 

 

Link Images using the Link Button

Finally, some astute users may notice that the Image Uploader is missing the Link tab. We saw the uploader’s Link tab as redundant with the existing and separate Link button. To link images in the future, simply use the existing Link button.

New Media Button

Media Button We’re excited to announce a new feature in the WYSIWYG editor. We’ve added a Media button! Using the fantastic OEmbed technology, the Media Button supports hundreds of common services like YouTube, Twitter, Facebook, Instagram, etc. See below for a couple of examples.

YouTube Example

YouTube URL

Copy a YouTube video URL. You only need the URL, no need to go hunting for the embed code. OEmbed allows you to simply pass a URL, and the technology does the rest.

YouTube Media Button Example

Select the Media button, and paste the URL into the corresponding field. Set your Resize Type and Alignment.

YouTube Video Embedded Using the Media Button

And voilà! The video is added to the content without so much as looking at a line of code!

Twitter Example

Copy a Tweet’s URL.

Twitter Tweet URL

Select the Media button, and paste the URL into the corresponding field. Set your Resize Type and Alignment.

Twitter Tweet Media Button Example

The WYSIWYG will display a placeholder for the Tweet. The full Tweet is drawn once it displays on your website in all its Twitterrific glory.

Twitter Tweet Video Embedded in WYSIWYG

 

Twitter Tweet Video Embedded in Site

Remove Format Button

Remove Format Button We also added a new button to remove unwanted formatting from a web page. While the Paste as Plain Text button will strip out any formatting when you’re first working with copy in a WYSIWYG, unwanted stylings have a way of sneaking into your content. The Remove Format button will zap those styles into oblivion.

Remove Format Example

Highlight the text for which you wish to remove formatting. Then click the Remove Format button highlighted in the image above.

Remove Format Example Result

The results speak for themselves! Clean content, once and for all.

Other Changes

Two smaller changes worth mentioning are the removal of the Underline button and truncating the Source button to exclude the actual word "Source." We found the Underline button was rarely used by users, and those who do use it regularly, know underlining has a common keyboard shortcut (Command + u on Mac, Control + u on PC).

Source Button We also think users around the web are now comfortable with the ubiquitous open-close arrows <> representing code, so we removed the word "Source" to the right of the icon to free up some breathing room in the toolbar. The functionality remains the same.

Billy White headshot thumbnail

Billy is a web developer and Chief Product Officer (CPO) at Sitemason, and has been with the company since 2006.  Read more about Billy White.

Contact Billy: