Skip to content Skip to navigation


Posted by Rebecca Hong on Tuesday, December 3, 2019 - 10:30am

I am sure some of you have noticed that there is a Stanford Light sample image of Jane Smith's personal website and were wondering how to recreate the same page for yourself. 

In this blog post, I'll show you how you can put together an About page layout similar to the Jane Smith's personal website preview image seen on the Appearance page.

Before we get started, I do reocmmend checking out the following blog posts to familiarize yourself with some of the things that we will be using:

How to set your front page (*This is important if you would like to make this page your homepage!)

Stanford BEAN Types Module

Using Context to Add Blocks to a Region

Open Framwork Regions

Font Awesome Icons

Stanford Light Theme

Creating a Basic Page

This will be the About page that the sidebar blocks will sit on. 

1. Navigate to Content > Add Content > Basic Page.

2. Fill in the Title and Body text fields. 

3. Save!

Enabling the Stanford BEAN Types Module

1. Navigate to Modules from the admin toolbar.

2. Search for Stanford BEAN Types and turn the switch from OFF to ON.

3. Save configuration!

Creating the Profile Photo Block

1. Navigate to Content > Add Block > stanford_large_block

2. Add the label — I named mine Profile image.

3. Upload your profile image in the Image Insert section.

4. From the style dropdown, select large-square.

5. Insert the Image into the Body

6. Save!

Creating the Contact Information Block

1. Navigate to Content > Add Block > stanford_large_block

2. Add the label — I named mine Contact information.

3. Now at this point you can just input your contact information and Save.

However, if you are interested in incorporating Font Awesome icons and aren't afraid of a bit of HTML, continue onward!

Incorporating Font Awesome 4.7.0

4. We'll want to check and see which version of Font Awesome your theme is currently using. In order to do so, we'll want to navigate to Appearance > Settings > Stanford Light.

5. Locate the Packages accordion and expand it.

6. Make sure Font Awesome 4.7.0 is selected.

7. Save

8. Navigate back to the Contact information block that you had created.

9. Assuming that you had input your Contact information previously in step 3, you will want to change the Text format (located under the Body editor) from Context Editor Text Format to Full HTML from the dropdown. 

10. Now your Body should be displaying HTML! You can now select your Icons from Font Awesome 4.7.0 site. Once you've found the one you want to add, copy the HTML from the Font Awesome site and paste the HTML into the area where you would like the icon to appear.

You can get a preview of how it looks by switching back and forth Full HTML to Context Editor Text Format.

Alternatively, you can copy and paste the following HTML to get you started:

<p><i class="fa fa-building-o" aria-hidden="true">&nbsp;</i>&nbsp; &nbsp; <a href="[destination url]">[Your Team]</a><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[Location]<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[Address]<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[City and Zip]<br />
<i class="icon-envelope">&nbsp;</i>&nbsp; &nbsp;<a href="mailto:[your email]">[your email]</a></p>
You'll want to replace the text wrapped with square brackets accordingly with your own information. 
11. Before you save, make sure the Body Text format is set to Full HTML otherwise the Icons won't show up!

Creating a Context and placing the Blocks

1. Navigate to Structure > Context > Add from the admin toolbar:

2. On the new context page, input the necessary information:

3. On the same page, in the Conditions section, select Path from the dropdown (see image A) and input the path of the Basic Page you had previously created (see image B):



*You can find the node path of the page by editting the page and looking at the URL:

4. Next is the Reactions section. Select Blocks from the dropdown:

5. This is where reviewing the Open Framwork Regions come in handy. You'll want to select the Blocks you created earlier from the BEAN accordian located on the right handside. 

6. Navigate to the Second Sidebar Section (located towards the end, under Content: Bottom) and click +Add to add the Blocks to the section.

7. Save your changes.

The Final Results!

Now when you navigate to your About page, you should now be able to see the Blocks stacked ontop of one another on the right.

Posted in:
Anna Watt Posted by Anna Watt on Monday, November 26, 2018 - 4:40pm

Let’s say you want to make a cake but you don’t have a lot of time to make one from scratch. You already have a box of cake mix ready to go but this box is for chocolate cake with vanilla buttercream frosting. But you really wanted one with dark-chocolate ganache frosting —because you can never have too much chocolate.

gif of chocolate cake with buttercream frosting switching to chocolate ganache frosting

You’re not going to throw out the entire box of cake mix just because it doesn’t have the frosting you want, are you? You don’t have to reinvent the wheel and make a chocolate cake from scratch. You can still use the box of cake mix to save time preparing the cake and instead focus on making the perfect frosting you want. The end result is the same chocolate cake but with your own unique dark chocolate ganache frosting on top.

This experience is similar to the benefits of our open source software development approach for building websites at scale on a shared platform. We are able to share functionality and features for different units while also accommodating their unique needs or flavors. 
Last summer, the School of Humanities and Sciences (H&S) Web Team sponsored the design and development of an edge-to-edge image or video feature with other fun display options such as a curtain-reveal or scroll button. One example of this feature with the curtain reveal option is currently live (at the time of writing this blog post) on the Center for East Asian Studies website to showcase their 50 year anniversary.
We’ve also used this feature for the Woods Institute for the Environment website to feature videos on the research focal area landing pages.
So when the School of Engineering (SOE) communications team came to Stanford Web Services and asked for the ability to feature content on their homepage with a large image or video, we scratched our heads and thought...this is the same chocolate cake we’ve made before but they just want different frosting!
screenshot of soe homepage
We forked the existing code for the feature we made for H&S—which essentially means we took a copy of the code (like starting with our box of cake mix) and added new code to it—that allowed us to add new functionality and design on top of the existing code (our dark-chocolate ganache frosting) all with the specific needs of the School of Engineering website in mind.
We released the first version (or minimum viable product) of the new feature on SOE’s site within four weeks of forking the existing code from the H&S project. This would have taken far longer without the boxed cake mix (reusing an existing feature and adding customizations.)
Sharing features allows us to save time and money for our clients. This means we can focus on building more advanced features and improving our existing features for the platform benefiting even more people in the long run.


Alyssa Hislop portrait Posted by Alyssa Hislop on Thursday, August 16, 2018 - 5:28pm

You've put time into creating your Stanford Sites website, so you'll probably want Google (and other search engines) to know about it. One of the ways to get this done is by submitting your website sitemap. This blog post will walk you through how to claim ownership of your Stanford Sites website, then submit the website to Google for indexing. 

This process works best if you have two tabs or windows open. One for working with Google, the other for working on your website.

Part 1: Get your verification code from Google

Step 1: Go to Google Webmasters tools and click Search Console

Step 2: Click Add A Property

Step 3: Enter your URL

Step 4: Select the Alternate Methods tab (see below image)

Step 5: Click HTML tag

Step 6: Highlight and copy the ID inside content=" " (see below). In this example it's I0sOm_SqSBOzB_xEisS2NDkn7hCI0gSLERTRfTiK7LI. 


Part 2: Apply your verification code to your Stanford Sites website

Step 1: Log into your Stanford Sites website

Step 2: Enable the Site Verification module (more info on this Module)

Step 3: Go to Configuration > Search  > Verifications (or: admin/config/search/verifications in your URL)

Step 4: Click Add Verification

Step 5: Select Google from the dropdown menu, then Next

Step 6: Paste the verification code from Part 1 into the Verification META tag field

Part 3: Verify your site

Step 1: Return to Google Webmaster tools where you first copied the verification code

Step 2: Click Verify

Part 4: Submit your sitemap

The Search Console allows you to see which pages of your site have been indexed. You can also request that your site be indexed. Check out the Sitemaps report to learn more.

Did it work?

Good question! Hopefully? Check out the Index Status report to find out. 

How many people are visiting your website? Which pages are the most popular? 

Check out our blog posts on Google Analytics to find these answers:

Get more help on Google Search Console

Request a Stanford Sites website

Posted in:
Alyssa Hislop portrait Posted by Alyssa Hislop on Wednesday, August 8, 2018 - 12:02pm

Starting July 12, new group and department websites requested on Stanford Sites will live in the cloud. These websites have new modules available to them. What are they and what do they do?


New modules

For new group and department websites created on or after July 12, 2018:

  • bigmenu: Allows direct access to submenu sections of a big menu, so links within a section can be managed without loading the whole global menu.

  • always_visible: Administrators can use this to override the visibility of menu items.

  • chosen: Makes <select> elements more user-friendly. This is a jQuery plugin.

  • contextual_view_modes: Set view modes based off a context.

  • multiple_selects: Set up multiple select fields with an ‘Add another item button’.

  • switch: Add an iphone-like switch form element & widget.

  • video_embed_field and submodules: Embed videos and show a thumbnail preview using this new field.

  • view_unpublished: Allow specific user roles to view unpublished nodes of a specific type.

  • views_select_sort: Change the “weight” of each select list option and sort within the view.

View all included Drupal modules for group and department websites

New module highlights

There is one module in particular that brings some pretty neat functionality to the Stanford Sites platform:

view_unpublished: Use this when you have unpublished content that other people with editing powers need to review.

Why is this a big deal? The unpublished node's default allows only the author of that page to view in its unpublished state. By using view_unpublished, we can override that default.

For example: I have administrator privileges on my website and I write a blog post. My intern has a smaller set of privileges and is assigned a different role. I need her to proofread and add images. Enabling the view_unpublished module and adding that permission to her role will allow her to view the unpublished item.

Removed modules

  • stanford_metatag_nobots: We retired this service in Fall 2016. Read more about this change on our blog.

  • mollom: Mollom was used to help prevent spam submissions on forms, but it's come to its end of life. We recommend using Honeypot now for your spam prevention needs.

Learn more about the move to the cloud

Posted in:
Alyssa Hislop portrait Posted by Alyssa Hislop on Friday, August 3, 2018 - 11:23am

The inaugural 2018 Stanford Global Energy Forum website stands out as a Stanford Sites superstar. The forum is coming up in November 2018 and will gather thought leaders and decision makers from the private sector, government, academia, non-profits and media to engage in strategic and balanced dialogue about the Future of Energy.

I think this is a such an eye-catching website. It features rich imagery, colorful accents, and a modern design to spread the excitement and inform potential attendees.


Check out the subtle transition as you hover over the host’s pictures on the homepage.

This is achieved through styling on the host photos using the CSS injector:

.honorary-hosts-photo img { border-radius: 50%; transition-duration: .9s; transition-property: transform; }

.honorary-hosts-photo img:hover { transform: scale(.95); -webkit-transform: scale(.95); }


Learn more about CSS injector on our blog and the transform property on W3Schools.

To make the whole website shine they’re leveraging the Stanford Framework theme, CSS injector, block views of custom content types, and so much more.  This website is a great example of how to use Stanford Sites for events, like forums and conferences. Well done!!


Visit the Stanford Global Energy Forum website

Learn more about Stanford Sites

Posted in:
Sara Worrell-Berg Posted by Sara Worrell Berg on Thursday, April 5, 2018 - 3:41pm

Stanford Drupal Camp 2018 is already upon us!

The ninth annual Stanford Drupal Camp will be hosted at the  Stanford Law School on April 6-7, 2018.

Our Stanford Drupal Camp emphasizes introductory sessions for beginners, as well as use cases of Drupal in higher education. Those new to Drupal will be particularly interested in the events on Friday, whereas experienced Drupallers (yes, we spell it with two "L"s at Stanford) may be more interested in Saturday's program. Learn more about the sessions and log in to start your schedule planning.

As always, it’s free and open to the public.

If you have any questions, please contact

Hope to see you there!

Posted in:
Sara Worrell-Berg Posted by Sara Worrell Berg on Thursday, December 21, 2017 - 4:04pm

As 2017 draws to a close, the Stanford Web Services team is closing sprints, cleaning our desks (mostly), emptying inboxes, submitting our final timesheets, and hoping no one reports a bug in the next 24 hours. Goodbye 2017, hello winter break! 

It was a big year, and we have so much for which to be grateful. We said hello and welcome to our new teammates Andy, Dena, and Bhavika, and we celebrated the birth of new babies and puppies. (So. Many. Babies.) We said farewell and best wishes to our teammates Grace, Claus, Kevin, and Jamie as they moved on to new adventures.

In 2017, we hosted a successful Stanford DrupalCamp and launched dozens of new websites, including Stanford Earth and Stanford School of Engineering, with the help of their talented communications and web teams. We kept millions of lines of code secure and accessible, and we kicked off Drupal 8 development and a move to the cloud. We even got our own website refreshed, thanks to our awesome communications friends in University IT. Best of all was the experience of working with our many talented and friendly colleagues from all over Stanford.

In short, we're as busy as ever and fortunate to be a part of this world-class university, and we look forward to all of the exciting changes coming up in 2018. 

Happy holidays to you all and best wishes for a healthy and happy new year!

Sara, Linnea, John, Shea, David, Anna, Greg, Dena, Kerri, Alyssa, Kellie, Andy, Caryl, Mike, Cynthia, Joe, Bhavika, and (St.) Nick

Group photo of Stanford Web Services staff members with Happy Holidays in white text on red background

Posted in:
Grace Kiburi profile photo Posted by Grace Kiburi on Friday, November 17, 2017 - 11:23am

Stanford Drupal Camp is a two-day annual event that connects people in the South Bay who work with websites. The Camp started in 2009 to discuss the many facets of web design and development, as well as learn about Drupal, an open source content management system. The camp places an emphasis on introductory sessions for beginners, as well as use cases of Drupal in higher education. Beginners sessions take place on Fridays, while Saturday's sessions are designed for more experienced Drupal users.

What happened at this year’s camp?


This year’s Drupal Camp took place on March 10th and11th at Stanford University’s Law School. The sessions kicked off with a keynote about how technology is impacting legal practice and the law more broadly, with practical examples on how technology is automating monotonous law processes and how this is just the beginning of legal tech boom. The keynote speaker was Dr. Roland Vogl, the Executive Director at Stanford School of Law and Executive of CodeX, The Stanford Center for Legal Informatics. He also shared how some of the tech startups like LegalZoom and Clear Access are disrupting the law profession.

Keynote speaker Dr. Roland Vogl talking about how tech is disrupting the law profession.

To make it easier for attendants to select which sessions to participate in, the sessions were split into 6 main categories dubbed tracks:

  • Site building

  • UX/ Design

  • Dev/ DevOps

  • Content Strategy

  • Research / Academia

  • Project Management / Business

Day one sessions were mostly attended by Stanford University site builders and content editors. The sessions focused on content strategy, user experience, and site building through the hands-on use of Drupal tools.

Shea talks about CAP and how to integrate it with Drupal Site.

Learn how to use CAPx to get your Stanford profiles looking nice and pretty on your site @sherakama #SUDrupalCamp

— SU Web Services (@SUWebServices) March 10, 2017

Zach Chandler and Pui Shiau present How To Make a Snowflake with a Cookie Cutter: Innovative Site Building on Stanford Sites.

Joe Knox and Alex Wilson presenting Stanford Page 3.0

Day two sessions were tailored for intermediate to advanced Drupal developers and site builders and the main track was Dev/ DevOps. The sessions were mostly attended by the off-campus community. The developers shared their latest developments and how they have managed to solve various Drupal challenges.

Another huge thanks to the @FFWglobal crew for their part in making this year's #SUDrupalCamp a big success.

— SU Web Services (@SUWebServices) March 11, 2017

The lunch that brought the attendees together:

Hey #SUDrupalCamp join us for lunch in the Student Lounge at 12pm!

— SU Web Services (@SUWebServices) March 11, 2017

Who can attend?

  • Stanford staff/faculty/students who need to learn Drupal or are working with a Drupal site

  • Stanford Drupallers community (developers, themers, site builders, site admins)

  • The larger Drupal-interested community

  • Those working in the web (or wanting to): project managers, designers, content writers

Shout out to our Sponsors

Stanford Drupal Camp is made possible by our sponsors. We would like to thank this year’s sponsors:

  • Stanford Web Services

  • FFW Agency

  • Stanford University Open Source Lab

  • Pantheon

Thank you, Stanford Law School for providing the space to host 2017 Drupal Camp and for all the folks who showed up and made it a success. See you next year! 

Posted in:
Caryl Westerberg Posted by Caryl J Westerberg on Thursday, November 9, 2017 - 10:14am

BADCamp is a delightful mix of networking and educational opportunities. Along with connecting with former acquaintances and meeting new people, I attended two really informative trainings. Here’s my recap:

Component Based Development

On the first day of BADCamp I attended the Component Based Development training delivered by Mario Hernandez. Mario presented his training through a handy set of exercises documented in his Component Based Development GitHub repo. I particularly liked this approach since it allowed Mario to immediately update and fix any issues discovered in the exercises, and class members could easily access the changes.

The purpose of the training was to explore...

“ of the latest trends in development, components. Building a website using the component-based approach can dramatically improve collaboration among teams, making code more reusable, flexibility and long term maintenance of your website.”

We approached this by first building up a style guide and adding components. Mediacurrent made it easy with their Drupal 8  theme generator. After installing the theme generator, we used it to create our new theme and style guide. Then we added a simple component (eyebrow), a more complex component (social media icons), and finally an advanced component (speaker) which pulled the previous two components.

Next we created a template library for speakers. This library allows us to add CSS and JavaScript for our components to pages in Drupal 8.

With the speaker library built, we integrated it into our Drupal site by first creating a content type or in this case a paragraph type attached to an existing content type with matching fields as in our component. Then using Kint and Twig debugging, we identified variables and corresponding Twig templates for our speaker component. After building out the Twig templates, the components could access the Drupal data, and display speakers using the components.

More resources:

Building Components: Breaking it down by Mario Hernandez

BEM, Block, Element, Modifier naming convention by Robin Rendle

Theming Drupal 8

The second day of BADCamp I attended the Theming Drupal 8 training delivered by Amber Matz and Joe Shindelar from Drupalize.Me.

Drupal 8 subtheme

In this training we leveraged the demo theme to create a Drupal 8 subtheme from an existing base theme such as Stable or Classy. Then, we incorporated Bootstrap as an asset library, and touched on topics such as regions, and .info.yml and .library.yml files. Next, we turned our focus to how to use theme hook suggestions to create Twig template files and how to use Twig debugging.

Render arrays and the Twig templating language

Once we had our subtheme we extended it with the power of render arrays (think {{ content }} ) and the Twig template language including:

Printing variables:

<div class="name">{{ }}</div>

Finding variable to print:

{{ dump() }}
{{ dump(variable_name) }}


{% for item in items %}
<li> {{ item.content }} </li>
{% endfor %}

Logical expressions:

<div class="xyz">
{% if xyz.status == ‘ok’ %}
  xyz ok
{% elseif xyz.status == ‘bad’ %}
  xyz bad
{% else %}
  Status is {{ xyz.status }}
{% endif %}


<p>{{ "Hello World" | upper }}</p>

.theme file

Finally, we looked at the .theme file. We looked at how to use and add theme hook suggestions for further customizations:


And, how to add more logic to the theme through the theme preprocessing hook:

function THEMENAME _preprocess_HOOK (&$variables)

This included adding, changing, and using the variables in the $variables array and the Twig templates.

More resources:

Twig Documentation

Twig Templating series

Theme Guide on

Twig Home


My thanks to all the folks involved in developing and presenting these trainings. Both trainings will help me as I delve into Drupal 8. I'm eagerly awaiting trainings at next year's BADCamp!

Posted in:
Caryl Westerberg Posted by Caryl J Westerberg on Monday, October 23, 2017 - 1:46pm

Drupal provides a powerful framework for creating custom elements for use in forms. One example of a custom element is the Link field. Suppose you want to change the default label on a Link field to read "Link text." How do you alter it?

 In his blogpost Custom Drupal Elements for Forms, Silvio J. Gutierrez provides a great explanation how to define a custom form element. Altering a custom form element follows in a similar manner.

To alter a custom form element:

  1. Register a process callback

  2. Create a process callback.

What’s a callback?

In Drupal a callback is a function that allows you to define how some type of processing happens. You pass this function name as a parameter to a Drupal API function and this function is then called at the appropriate time.

How do I register my callback?

When creating a custom form element you would use the #process attribute in hook_element_info() to register a callback. Similarly, when altering a custom form element you use the #process attribute in hook_element_info_alter() to register your callback. In this example, I want to make changes to Link fields. My code is as follows: 

* Implements hook_element_info_alter().
function my_module_element_info_alter(&$type) {
  if (isset($type['link_field'])) {
    $type['link_field']['#process'][] = 'my_module_link_field_process';

How do I create my process callback?

The signature for a callback function for altering a custom form element is the same as if you were creating the element. See hook_element_info() for more information. In this case want to change the label for the Link field title. My code is as follows:


* Process Callback Function
* Callback to process the My Module link field.
function my_module_link_field_process($element, $form_state, $complete_form) {
  if (isset($element['#field_name'])) {
    switch ($element['#field_name']) {
      case 'field_s_my_link':
        $element['title']['#title'] = t('Link text');
  return $element;


Using these steps I was able to add help text and alter all sorts of custom form elements. Next time you have a custom element that needs even more customizing, give this a try, and let me know how it goes!


My thanks to my colleague Greg Garvey who pointed me to this solution!

Other resources:

See this discussion from the Link issue queue.


Posted in:


Subscribe to Stanford Web Services Blog