HTML Drupal Tutorial 3: How to Embed Images

This is the third in a series of tutorials I’ll be writing on using the Drupal HTML text editor to format web content.

The first tutorial covered:

  • Visual vs. text editors
  • Making paragraphs
  • Bolding text
  • Italicizing text
  • Underlining text

The second tutorial covered:

  • Creating headers
  • Paragraph alignment
  • Creating hyperlinks
  • Making numbered and bulleted lists

In this tutorial, I’ll cover how to embed images in your Drupal content.

Why Visuals?

I’ve already talked about ways to improve your post’s written content visually, but the most impactful way to captivate readers is to include images or videos in your content. Sites like Buzzfeed have capitalized on the trend of incorporating visually stimulating material to increase readership and ad revenue. Since this trend isn’t going away any time soon, it’s wise to start incorporating it into your site’s content, too.

Getting Started

image 1

Image by Mat Lucas • http://www.89a.co.uk/

Embedding pictures using Drupal is super simple, requiring only one caret (instead of the usual opening and closing carets). Take a look at the image below:

image 2

To embed your desired image, first replace the “URL” in the image with the link to the image you want to embed. For example, if I want to embed the image found at this URL  (h/t Matthew DiVito), my caret element will look like this:

image 3

Including Alternate Text

You should also include alternate text in your caret element. This text will appear if the image doesn’t load for some reason.

image 4

You’ll end up with something that looks like this:

image 5

Playing with Size

HTML also lets you play around with the size of the images you use. You can alter the height and width attributes of the image in two ways:

  1. using specific pixels; or
  2. specifying percentages

If you want to play around with the image’s size using pixels, your HTML caret will look like this:

image 6

For percentages, your HTML caret will look virtually the same, but instead of using the “px” suffix, you’ll use the “%” symbol:

image 7

Playing around with your image’s aspect ratio using HTML carets won’t automatically resize the image itself — only how it displays on your page. Since larger images can increase page load time, it’s worthwhile to resize the actual image instead of only altering its height and width attributes in HTML.

Giving Credit

If you didn’t buy the image you’re using or didn’t create it yourself, remember to give credit to the person who created it. It’s good manners, good Internet etiquette, and the proper thing to do.

What would the Dowager Countess do?

What would the Dowager Countess do?

Check back soon for the fourth HTML Drupal tutorial in this series, where I’ll cover how to use different font typefaces in your posts.

You may also like

Leave a comment