Home » Drupal

Category Archives: Drupal

How do I add an image to the top right corner of a webpage?

Note: These instructions apply to the “Basic Content” content type on our Drupal content management system. This article also assumes that you’ve already uploaded your image(s) to the appropriate “Files (hidden)” webpages and optimized the photo to these dimensions: 238 x 180 pixles.

  1. Make sure you are logged on and in the editing interface for the content you wish to edit.
  2. Scroll down to the “Image” menu.
  3. Select the menu, and being typing in the name of your image (Ex. “peter_shaw_thumbnail”)
  4. Select the image.
  5. Optional: Please also set the “Image Alt Text” field, a short description of the image, including relevant keywords.
  6. “Save” your changes. The image will automatically be pulled into the top right corner of your webpage.

How do I transfer web content from a Word document to a webpage?

1) First go to your word document and copy the section you would like on your web page:

 

 

 

 

 

 

 

 

 

 

 

2) Next open up the editing interface of the webpage you have created and select the Paste from Word Button and paste the material you would like to use into this screen:

 

 

 

 

 

 

 

 

 

 

 

 

 

3) Click Insert, and your content will automatically be pasted into the body of your web page:

 

 

 

 

 

 

 

 

 

 

 

4) You may have to change the adjust the “Format” of the headers to Heading 2.  Also, please double check that your links are not broken after you save the new draft of your webpage.

In order to add a new link, select the text you would like to be made into a link, and then select the “Insert/Edit link” button to add the link to the “Link URL” field. You don’t need to worry about completing the other fields in the “Insert/Edit Link” window.

 

 

How do I resize and/or crop a photo with Photoshop?

If you’re adding a photo to the top right corner of your webpage,  you’ll want to set the width at 238 pixels and the height at 180 pixels.

1) In order to resize your photo, open the photo with Photoshop, then select “Image,” and select “Image Size.”

 

 

 

 

 

 

 

2) This will pull up  a new window and allow you to designate the width and/or height of photo in pixels. At this time, since the width value is larger than the height value, set the height to 180 pixels.

Existing Dimensions:

 

 

 

 

 

 

 

 

 

 

 

 

Edited Dimensions:

 

 

 

 

 

 

 

 

 

 

 

 

Please note: If the height value is larger than the width value, you will adjust the width to 238 pixels in this step and then crop the image to 180 pixels.

2) We’re now going to crop the width of the photo to 238 pixels. Select the crop tool from the Photoshop tools menu on the left side of your screen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3) Set the crop dimensions:

  • Width: 238 pixels.
  • Height: 180 pixels.


4) Select the region of the photo you would like to include in your crop dimensions:

This will automatically crop the unwanted area out of your photo.  All you need to do is press “Return,” “Save As,” and add it to your webpage!

How do I add a Facebook Like Box to a webpage?

You can add Facebook Like Boxes to the bottom of a standard webpage or to the right hand sidebar area, like Student Services. To get started follow these steps:

  1. Click on “Add” in the “Edit Console.”
  2. Select “Facebook Element” from the list of content types.
  3. Enter the URL of the Facebook page you want to “Like.”
  4. Under “Type,” select “Like Box” from the drop down menu.
  5. Choose the “Layout” option: “Box with Count Above.”
  6. If you would like to show the faces of the people who like you on Facebook, check the “Show Faces” option.
  7. If you would like to show the updates from your Facebook page, check the “Show Stream” option. With the “Number of Posts” field, you can also choose how many updates appear within the box.
  8. “Save.”

How do I tag URLs for online marketing campaigns so that we can track their success with Google Analytics?

There are several tags you can add to the end of our www.miis.edu URLs so that we can track online marketing campaigns via Google Analytics, whether these campaigns focus on email, Facebook, LinkedIn, or external websites (grist.org, gradschools.com, princetonreview.com, etc.). You can use the Google URL Builder Tool to guide you through the process.

Please follow the step by step instructions below:

  1. In the “Website URL” field, enter the web address of the page you would like people to visit after they click on the link or ad.
  2. In the “Campaign Source” field, enter the source of the campaign such as Facebook, Linkedin, Google, Grist, Gradschools.com, Email (our MIIS Constant Contact account) etc.
  3. In the “Campaign Medium” field, enter the type of the campaign such as CPC, Email, Banner, Directory, etc.
  4. In the “Campaign Name” field, name your promotion. Be as specific as possible. Here are some examples…
    • Google AdWords: “G:India Search-MBA (English)” OR “G:USA Display-Peace Corps (English)”
    • Facebook Campaign: “F:YellowRibbon-MBA USA(English)”
    • LinkedIn Campaign: “L: TISP – USA (English)”
    • Banner Ads: “FP:Banner-IPS-Sept2011” Note: FP= Foreign Policy
    • Email Campaigns: External: “FP:Email-IPS-Dec2011” or Internal (via Constant Contact): “Email:TI-Scholarships-Feb2012”
  5. Click “Generate URL.”

Here’s a helpful screenshot of the toolbuilder:


You can also use the “Campaign Term” field to differentiate between paid keywords (You would use this feature when tagging URLs on a Google AdWords account.) And you can use the “Campaign Content” field to differentiate between the content of your ads (i.e. the text and photos), if your running two or more ads concurrently about the same product or promo. Imagine two ads about the IEP program on Grist with different photos, or two ads about the Yellow Ribbon program on Facebook with different headline text.

How do I edit photos in less than 5 minutes with Picnik?

Photos intended for the top right media space of www.miis.edu webpages should be vertically-oriented: the height should be greater than the width. Photos cropped and resized to about 238×260 pixels fit the space best. You can crop photos online with Picnik in under 5 minutes by following the instructions below.

  1. In Flickr or Picasa, choose the photo you would like to edit with Picnik.
  2. Click “Crop.”
  3. Drag the grid over the portion of the photo you would like to keep, usually to reduce the width of the photo.
  4. Click “Resize” to adjust the height and width of the photo. Change the width to 238 pixels.
  5. Save your photo.

  6. Congratulations, you’ve just edited a photo in less than five minutes!

How do I edit photos in less than 5 minutes with Preview?

Photos intended for the top right media space of www.miis.edu webpages should be vertically-oriented: the height should be greater than the width. Photos cropped and resized to about 238×260 pixels fit the space best. You can crop photos in Preview in under 5 minutes by following the instructions below.

  1. Open the photo you would like to edit in Preview.
  2. Choose the select tool.
  3. Highlight the part of the photo you would like to keep.
  4. Click “Edit,” then “Copy.” (Or Command “C.”)
  5. Click “File,” then “New From Clipboard.”
  6. Save your edited photo.


Congratulations, you’ve just edited a photo in less than 5 minutes!

How do I enable a 301 redirect?

301 redirects help you change the URL of a www.miis.edu webpage without breaking the link. All people accessing the old link will automatically be taken to the new URL.

Please follow these steps to enable a 301 redirect:

  1. Navigate to the page with the old URL. (Ex. http://www.miis.edu/academics/language/diplomat)
  2. Take note of the Monster Menu # in the Edit Console. (Ex. 242454)

  3. Navigate to the webpage’s new URL. (Ex. http://www.miis.edu/academics/language/diplomats)
  4. Scroll down to the bottom of the page and click “Edit.”
  5. Within the editing interface, scroll down to the menu at the bottom of the page. Click “URL redirects.”

  6. Click “Add a redirect to this location,” which takes you to the 301 redirect module on the Drupal CMS admin panel.

  7. Complete the “From” URL field by adding this line of code mm/(Monster Menu #) (Ex. mm/242454)

  8. Don’t forget to click “Save.”

How do I add a meta-description to my webpage?

Meta-descriptions are text that appears under your title tag in a Google search and, therefore, provide another area to use the keywords identified in your SEO strategies. Meta-descriptions consist of well-written ad copy not exceeding 155 characters. To add a meta-description to one of your webpages, follow these quick steps:

  1. Navigate to the webpage you would like to add a meta-description to.
  2. Click “Edit” at the bottom of the webpage.”
  3. Within the editing interface, scroll down to the bottom menu and click “Meta tags.”
  4. After the menu opens, add your text under “Desciption.” Don’t forget to “Save” your edits.

How do I add a search box to a FAQs page?

To add a search box to your Frequently Asked Questions webpage in the style of the Admissions FAQs, you will need to use the “Quick Access” content type and also create a Drupal View of your FAQs list.

  1. Create a new subpage under your FAQs webpage entitled “List of FAQs” or something similar.

  2. Move your FAQ nodes (i.e. the individual Questions and Answers) to this new subpage.
  3. Delete any remaining content on your original FAQs webpage.
  4. Under “Edit Console” in the top left corner of your screen, click “Add,” and choose the “Quick Access” content type.
  5. Within the editing interface, add your “Title” (i.e. Frequently Asked Questions), “Label” (i.e. Start typing to search the FAQs.), and “Selector.” (The “Selector” for the FAQs Quick Access will always be ‘.question’)
  6. At this time, you can also add “Opening Paragraph” text and an “Image” so that one appears in the top right media space.
  7. Save the changes you’ve made.
  8. Return to the “Edit Console,” click “Add,” and choose “Basic Content.” Within the editing interface, add a “Title” for the content type in brackets [ ] so that it does not appear on the webpage i.e. [FAQs View]
  9. Here’s the tricky part. In order for the FAQ nodes to appear in one uninterrupted list (i.e. the Drupal View), you will need to add the following line of code in the “Body” text: [view:faqs==(tag)] To create the Admissions FAQs webpage, the tag used in the code was “admissions.” Therefore, this line of code was added to the webpage: [view:faqs==admissions]
  10. For your FAQs webpage, you will need to chose a tag relevant to your content to generate the Drupal View. Substitute your tag for “admissions” and add the line above of code to the “Body” text.
  11. Before you’re finished, you will now need to double check all of your FAQ nodes to make sure they have the tag you’ve chosen. If the FAQ nodes are not properly tagged, they will not appear on your new FAQs webpage.
Sites DOT MIISThe Middlebury Institute site network.