How to resize images without distorting them

You might think that no one will notice when you accidentally stretch my face to look like a pancake, but that’s not true and here’s how to prevent pancake face from happening to your images.

Method 1: Use the corners

When you select an image, there are hot points on all corners and edges of an image. An image can be resized by clicking and dragging those hot points. Make sure that you are only using the corners since using the edges will distort the image.

Dragging the hot points on the corners keeps the image in proportion.

Question: What if I accidentally distort an image? How do I bring it back to its normal proportions?

Answer: In the Image Properties, click the blue padlock so that it’s locked. This will restore its original proportions. (See Method 2 for details)

Please note: Hot points are not available in Chrome, so if Method 1 is for you, use Firefox instead.


Method 2: Adjust the Image properties

a) Select the image, b) Select the Image tool in the WYSIWYG toolbar, c) Make sure that the blue padlock is locked (next to the height and width properties). If the padlock is unlocked, click on it to lock it.

Make sure the padlock is always locked to keep the proportions in tact. If you accidentally distort an image, relock the padlock to restore it to its original proportions.

d) Adjust either the height or width. If you adjust the height, the width will automatically change in order to retain proportions and vice versa.


Avoiding Punctuation in a Webpage Title

It is important to avoid using punctuation in a Webpage title. Examples of punctuation to avoid are commas, colons, expression marks, and every other type of punctuation mark you can think of.

 Here’s why:

When creating a Webpage, one of the first steps is to enter a Page Title. The Page Title not only becomes the main heading for your content, but it also defines the URL of the Webpage you are creating.

For example, in the Future Students section, for the Webpage titled “Why UNBC”, the URL is

future student's url

The title of the page determines the URL, so if this page was titled “Why is UNBC Awesome” then the URL would be

However, if the title was “Why is UNBC Awesome?” with a question mark, this would cause problems with the URL because URL’s don’t use punctuation, and Drupal doesn’t know what to do with them when it wants to convert the title into a URL. This title “Why is UNBC Awesome?” with a question mark would make a URL like, that is with some strange code trying to make up for the punctuation.

Here is an example of a real URL in the website with this problem:

Take note of the % marks appearing in this URL. Now click on the link and look at the url and the Page Title of the actual webpage. Notice that the URL has punctuation marks in it.

And so, don’t ever use punctuation in the Page Title field.



Microsoft Word is Bad

Never copy and paste content directly into a web page from Microsoft Word.

UNBC Uses Web Style Sheets

All content on the UNBC website is designed with specific styles for text in terms of font, sizes, colours and more. This helps all content share a common look and feel so that it is distinctly recognizable as being UNBC branded. It’s not just about branding, however; it’s also about creating a strong user experience.

The use of common styles across the website means that a web user can easily browse the UNBC website and scan content without having to relearn how content is presented.

Microsoft Word also uses Styles

And they are not the same as the UNBC web styles.

Microsoft Word is a word processing tool and is not meant for publishing web content. Fonts in Word may not be accessible online; text sizes are defined by styles and code meant for printing, not for the web; etc. The coding used by Microsoft Word to define styles of content for word processing just does not work online.

Copy/Paste from Word Corrupts Web Code

When you copy content directly from a Word document, the styles defined in Word will attach to that content and be pasted into the web code along with your text.

Code that has carried over MSO (Microsoft Office) code is easily identifiable:

What Goes Wrong


It is nearly impossible to style content with MSO code attached using UNBC’s web styles. The web code will have a very hard time resolving what should display. And not just about what text to make Header 3, but it can break the entire layout of the webpage.

When the UNBC website migrated into Drupal, we encountered many pages with MSO code. As the old content management system used outdated HTML standards, these pages would

often display fine. Now that we are using current web standards, this is no longer the case.

Here are some screenshots of some worst case examples of how MSO code broke UNBC webpages:


Recognizing the Problem

You might have an MSO code problem if you find that you are having difficulty editing a webpage, even when following simple, step-by-step editing directions.

MSO code has caused problems ranging from not being able to apply UNBC web styles, to content disappearing or shifting on the page, to not even being able to edit/select text on the page.

Fixing the Problem

There are two options:

  1. Review and repair the code on the page, line by line.
  2. Start from scratch.

Most often, we will delete all content and code from a page that has MSO code embedded within it as repairing the code manually is simply too time consuming and prone to error.

Preventing the Problem

Preventing this problem is easy peasy.

Simply past your content from MS Word using the “Paste as Plain Text” button within the Drupal WYSIWYG editor.

This will remove all formatting and MSO styles and paste your content into the page as plain text. It’s just like copy and pasting your content through Notepad before pasting in the web page.

From there, you can add appropriate styles as selected from the UNBC web styles.

Tip: Don’t waste your time formatting your content in Word if it will be displayed online. You’ll just end up doing it again in Drupal. 

In Conclusion

  • MS Word is excellent word processing software.
  • MS Word is not meant for web publishing.
  • Editing pages that have MSO code embedded within them is a nightmare.
  • Never copy and paste into a web page directly from MS Word.
  • Always use the “Paste as Plain Text” when copying content from MS Word into a web page.