Skip to content Skip to navigation

Getting Started on Sites: Inserting Images in Your Content

Welcome back! This is the fifth blog post in a series on how to create a Drupal 7 personal website* using Stanford Sites. Last time we looked at inserting an image on your webpage.

In this blog post, I'll show you how to have more control over how your images appear on your webpages. The Image insert button enables the site editor to insert an image and take advantage of image styles that you can preset. In this blog post I will use the Article Content type as an example.  You may also choose to manipulate another Content type that already exists or one that you've created for your site.

Adding the image insert button

  1. First, manage the Article image field. Go to Structure > Content type > Article > Manage fields
  2. Edit the Image field.
  3. Open the collapsed Insert section and check the Enable insert button.
  4. In the Enabled insert styles section, you can choose what Image styles you would like to use.
  5. You can also set the image Default insert style and add any Additional CSS classes.
  6. Click the Save settings button.

Adding image styles

  1. From the admin menu, go to Configuration > Media > Image styles
  2. Click the + Add style link.
  3. Give the image a Style name.
  4. Click the Select a new effect arrow add a new image size.

    Effect

  5. Assign Width and Height pixel dimensions, then click the Add effect button.

When you insert an image on an Article node, the new image style is also now available.

* Need a personal website? Claim yours on Stanford Sites.