Cynthia Mijares's Blog Posts

Welcome back! This is the seventh blog post in a series on how to create a Drupal 7 personal website using Stanford Sites. Last time we learned how to insert a Google map into your webpage. In this post, we'll walk through creating Image Styles.

By default, your Drupal site gives you the option to change the look of an uploaded image to thumbnail, medium, or large. These size presets are called image styles. You can create your own image styles to have custom-sized options for your images that you can use anywhere on your site. In this blog post I will use the Article content type as an example.  You may also use image styles on other content types and views that already exist or one that you've created for your site.

Creating an image style

1. Log in to your Drupal site as an administrator.
2. Navigate to Configuration > Media > Image styles.
3. Click the + Add style link.
4. Give the image a Style name then click the Create new style button.
   

   

5. On this screen you can compare the original image to the new image size you just created.  At first they are identical. You will need to add an effect.
   

   

6. I'm going to choose to Scale my image and set my width to 100 pixels. This will resize the image based on the width I have specified (100px). If you leave the height blank, it will be calculated automatically to preserve the aspect ratio of the image. Click the Allow Upscaling checkbox if you want smaller images to expand to meet the 100 pixel width setting.  I usually do not use upscaling because images tend to get blurry, pixelated, and just don't look as good. When done, click the Add effect button.
   

   

7. The preview now reflects the new image effect.
   

   

Also, you may want to explore the scale and crop effect – we use this regularly in many of our image styles, as it allows you to have a custom width and height (like a square for example) and a scaled image. This is helpful for creating thumbnails of particular dimensions to have a uniform effect in a list or grid view.

Next we'll look at how to update, delete, and use our image styles.

Updating an image style

1. Navigate to Configuration > Media > Image styles.
2. Under the Operations column, click edit for the image style you want to update.
3. There are several options you can do: change the Image style name; edit or delete the existing effect; or Select a new effect.
4. After making changes, click the Update style button.

Deleting an image style

1. Navigate to Configuration > Media > Image styles.
2. Under the Operations column, click delete for the image style you want to remove.

Using an image style in Content types

1. Navigate to Structure > Content types > Article > Manage display.
2. Click on the gear next to the image field where you want to change the image style.
   

   

3. Under the Format settings, click the image style arrow and select a new image style (e.g., small-flexheight).
4. Click the Save button.

Using an Image style in Views

1. Add your image field to the view.
2. Configure the field settings by clicking on the image style arrow and selecting the image style (e.g., small-flexheight).
3. Click the Save button.

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.
   

   

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.

Welcome back! This is the fourth blog post in a series on how to create a Drupal 7 personal website using Stanford Sites. Last time we looked at attaching documents to our Sites website.

Now that you've got a few pages in your new website, let's make it visually more appealing by adding a featured image. You can either edit an existing page that you've already made, or you can create a new page, which is what I'll do in the following instructions.

1. First, add a new page (or edit one you already have made). To add a new page, from the Admin menu, Go to Content > Add content > Article

   

2. In the Image field, browse your local hard drive for the image you want to use.  Once you have selected the image, press Open then click the Upload button.

   

3. For accessibility reasons, be sure to include Alternative text. This text will be used by screen readers, search engines, or when the image cannot be loaded.
4. Fill in the rest of the required fields to create an Article, then click the Save button.

By default, the image will automatically be placed above the main content or Body of the Article.  In my next blog post, I'll show you how to add an image insert button to include images in the body of your article and add a few image styles to customize your site.

This is the second post in a series on creating your personal Drupal 7 site using Stanford Sites, a free service provided by Stanford Web Services.  In the last post, we talked about how to request your Drupal site on Stanford Sites.

After you request your site, you will receive an email letting you know your site is ready.  Click on the link provided in the email to complete the installation and begin to configure your website.

When the website loads in your browser window, you will see a "Welcome to Your Stanford Sites Website" screen.  First thing you'll need to do is log in as "admin" using the password you created during the initial request.  Once you've logged in as admin, you'll be able to go through the Quick Steps, a block with a set of getting started tasks that will appear on your homepage. The Quick Steps give you shortcuts and initial instructions for getting oriented with Drupal.

1. For some instant gratification, you can create a few pages and get a quick navigation menu started. Look for the "Create a new page on your site" step. When you create a new page, you can add it to the Main Menu navigation in the settings at the bottom of your post.
   

   

2. Put your stamp on your new site by changing the site's name and information. Look for the "Change your site's name and information" step.
   

   

3. Drupal has the many more features that allow you to make your site as basic or complex as you need it to be. Look for the "Edit your navigation menus" step in order to change your navigation and menus. Look for "Add functionality and features" to change which modules are enabled on your Drupal site. Look for the "Edit the look and feel" step in order to edit your theme settings (check out Megan's post about how to style your Sites site!).
   

   

4. If you are satisfied with your site's progress and want to hide the Quick Steps from your homepage, look for step "Get rid of this 'Quick Steps' content."

   

In the next blog post, I'll show you how to attach a document file to your content.