Skip to content Skip to navigation

Caryl J Westerberg's Blog Posts

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:
Caryl Westerberg Posted by Caryl J Westerberg on Tuesday, May 31, 2016 - 4:54pm

DrupalCon (Drupal Conference) 2016 marked the 3rd DrupalCon that I attended. With Drupal 8 released, I felt it was time to go to the conference and kick the tires.

Held in historic New Orleans, I not only learned more about Drupal 8, but I learned about the beignets, cemeteries, and handgrenades. But that’s for another story.

Drupal 8 brings a greater emphasis on “headless” architectures where the front-end that the user sees may be decoupled from a Drupal back-end. At this conference I focused on learning what we can do with a decoupled Drupal front-end. Here are my highlights from Drupalcon 2016:

Presentation Framework: Reveal.js

Want to ditch PowerPoint slides and move to something online and mobile responsive? Reveal.js  is a presentation framework used deliver many DrupalCon presentations. This was not a presentation itself, but rather, a technology, where, using HTML presentors can deliver rich presentations with lots of features and flexibility. If you want to try the fully-featured visual editor check it out at

Amazing User Experiences with Drupal and Ember

by Edward Faulkner

Link to session

Want a richer experience for your site? It turns out that Ember provides a software development kit (SDK) to help you build out ambitious applications. In this session Faulkner first demonstrated how to integrate Drupal with Ember then demonstrated some amazing inter-page animations, Service Worker-driven offline capabilities, and in-site authoring tools with instant preview across multiple device sizes.

Offline-capable, decoupled Drupal 8 with React.js and React Native

By Mikkel Høgh and Dick Olsson

Link to session

People such as doctors travelling to remote areas without internet still need access to website data. To address this, they need websites to be available offline on their devices.  In this session Høgh and Olsson show us how they used React.js, PouchDB, and RELAXed to load an entire website onto a device such as a phone and make it fully capable offline.

Related links

Demystifying AJAX Callback Commands in Drupal 8

By Michael Miles at Genuine Interactive

Link to session

Suppose you want to use existing data to provide more functionality on an existing page on your site. In this session Miles dove into the internals of Drupal’s Ajax framework and demonstrated how you can extend an existing Drupal page, replace links with Ajax calls. Then when you click on the link, instead of navigating to the linked page, the current page expands to display the data from the linked page.

Related links - Slides

Debugging, Profiling, & Rocking Out with Browser-Based Developer Tools!

By Mike Herchel at Lullabot

Link to session

Chrome’s Developer Tools has an amazing number of tools, options, and shortcuts for exploring the underpinnings of a website. In this session Herchel took us on a tour of these clever and timesaving tools. If you do any serious front-end development, learning these tools this is a must.

Related links:


By Wim Leers and Fabian Franz

Link to session

In this session Leers and Franz explore the question: How can Drupal start sending page data early? To give the perception of improved performance, users will see the page beginning to render earlier rather than seeing a blank white screen. Using caching, BigPipe sends page information early, and begin displaying the page before Drupal has completely finished rendered the page.

Related Link

JSON Powered Forms in Drupal

By Travis Tidwell and Randall Knutson

Link to session

As we support more devices, interfaces become more diverse. We cannot expect Drupal to support these interfaces. Travis Tidwell and Randall Knutson explained their approach to providing forms that are dynamic JavaScript renderings of JSON based schemas. With this JSON, the client can render the form for specific devices.

Related links:

Looking forward

The idea of decoupling Drupal from the front end is not new in Drupal 8. In fact many of these technologies will work on your Drupal 7 site, albeit less support from Drupal and more work for you. To learn more about decoupling Drupal, check out this post by Dries BuytaertI encourage you to keep an eye on the decoupled or headless Drupal conversation, and check out the videos for these sessions!

Caryl Westerberg Posted by Caryl J Westerberg on Friday, March 4, 2016 - 3:55pm

We are excited to announce that registration and session proposals are now open for Stanford Drupal Camp 2016!

Register now for the seventh Annual Stanford Drupal Camp April 1-2, 2016 at the Stanford Law School.

Drupal Camp is a great opportunity for the Stanford Drupal community to come together and share new approaches, best practices for the web, and love of Drupal. The schedule includes great sessions for those new to the web and Drupal all the way to advanced users and plenty of opportunities to network with colleagues.

We will have tracks for web content strategy, user experience and design, operations and development (DevOps), and building sites for research and academia.

As always, it’s free!

Once you've registered, you are invited to propose a session. In the right sidebar, click on Propose a Session!

If you have any questions, please contact

Happy Drupalling, and look forward to seeing you in April!

Posted in:
Caryl Westerberg Posted by Caryl J Westerberg on Tuesday, November 10, 2015 - 9:00am

Over four days in October, I found myself once again, wandering the campus of UC Berkeley and attending BADCamp. I've lost count of how many times I've attended BADCamp. I think I attended the first camp and have just kept coming. 

What keeps me coming? I suppose it's to connect with the Drupal community, learn how to do something, and find out what's up and coming.

Connect with community

Sure, you can watch their presentations on YouTube, but there's nothing like meeting the people responsible for building the module or developing the technology that you're using. 
On Friday I attended Jesus Manuel Olivas' training on how to build a module in Drupal 8.  After an introduction to Drupal 8, Composer, and the The Request/Response Flow with Symfony2, we jumped into Drupal Console. This tool developed in large part by Jesus, helps to automate module development for Drupal 8. Not only will it download and install a Drupal site, i.e., $ drupal site:new and $ drupal site:install, it will create, install, and generate many parts of a Drupal module , i.e., $ drupal generate:module, $ drupal module:install my_module, and more! As we explored using Drupal Console, Jesus listened to our comments and suggestions, promising to consider them for the next version of Drupal Console. Check out his slides! Just participating in this training provided a great opportunity to connect with the Drupal Community.

Learn how to do something

BADCamp is a great place to learn how to do something else. Git is a tool I use on a daily basis. Frequently, you can find me cloning a repository, pulling the latest changes, or committing my changes back to a repository. Presented by Mark Ferree and Brad Erickson, the session on Next Level Git highlighted some unfamiliar and new commands in Git. I was reminded for example, that when have a small mistake like a spelling error that doesn't really need to be a separate commit, using $ git commit --amend allows you to tack that change on to that last commit.  I also learned more about using $ git rebase. With this command I can package all my little commits into one big commit with a succinct message describing the real purpose for all the changes. 

Find out what's up and coming 

The Drupal world is constantly changing and growing to meet the needs of our community. For example, there were many sessions referencing REST and "Headless Drupal." One way Drupal is growing is that people in the community are beginning to view a Drupal site as a way to provide content for other services. That is, rather than going directly to a website for information, you  use an external application to get the content from the website. Then your application can use that information in new ways. Your application circumvents the user interface on the Drupal site and accesses the content typically through a REST API. When bypassing the front end we get the name "Headless Drupal." 
Once again, I had a chance to learn and grow at BADCamp, and  I'm already looking forward to next year when I can again rekindle my connections, learn, and grow with the Drupal community.
Posted in:
Caryl Westerberg Posted by Caryl J Westerberg on Wednesday, September 9, 2015 - 9:00am

Stanford Events is Stanford University's central calendar. It's widely used by departments, organizations, and student groups to promote events to the public and members of our campus community, and it provides a valuable resource for planning and scheduling. The challenge is cross-promoting events. In the past, sharing events content across multiple websites required re-typing. Ouch! We'll show you how to use the Stanford Events Importer module to save time and cross-promote events from multiple organizations.

The Stanford Events Importer module was designed to help organizations import their public events from Stanford Events into their Drupal website. Recently Stanford Events was updated with two new types of events feeds

  • unlisted
  • bookmarked

These great new feeds make it easier for organizations to post their own events on the Stanford Events website and share them with via their website, or to hand-select others' events from the calendar to cross-promote on their website.

Next, the Stanford Events Importer module was updated to support the new event feeds, making it even easier to import and display events on a Drupal website.

As an event administrator you can: 

  • post all your events on Stanford Events as either public or unlisted
  • use the planning calendar to identify upcoming events and potentially any events that may interfere with your event
  • import events for your website filtered by type, subject, organization, etc. through your organization's unlisted and bookmarked feeds

Here's how it works:

Adding Events to Stanford Events

To create a feed and add your events to Stanford Events you'll need to request an account at Once you have an account, login and select Add New Event on the Calendar Admin - Main Page.

How to add a new event

Types of events on Stanford Events

When you add an event to Stanford Events you choose the status of an event, and that influences whether the event will be visible on the main calendar and which feeds you use to import them into your website.

Published events

A published event displays on the central event calendar and will belong to the published feeds for your organization and any sponsor organizations.

How to select a published event

Unlisted events

Unlisted events do not display on the central event calendar.  This allows organizations to create events on Stanford Events that are not exposed to the public, but are still available:

  • on the planning calendar
  • to sponsors
  • on the organizations's Unlisted feed

To add your event to your organization's unlisted feed, select Unlisted as the status of your feed.

Bookmarking events

Bookmarks allow you to select any event on Stanford Events and add them to your Bookmarks feed. When you want an event to appear in your bookmarked feed, you would copy the URL and add it to the bookmarks for your organization.

Importing Stanford Events

Stanford Web Services (SWS) developed the Stanford Events Importer module to support importing published, unlisted, and bookmarked events. Special thanks to our colleagues in University Communications, VPGE, and the Department of Classics for their help in implementing and testing this module.

To import Stanford Events into your Drupal website:

  1. Log into your site
  2. Enable Events Importer on the Modules page
  3. Navigate to the add Stanford Event Importer page at

    Content > Add Content > Stanford Event Importer

  4. Give your Importer a title such as "Stanford Toastmasters Published"
  5. Select your organization, i.e. "Stanford Toastmasters"

  6. Select the Event Type for this feed, i.e. "Published"

    Select published Event Type

  7. Save your new event importer. When first saving your event importer, it will automatically import the events from Stanford Events. 
  8. Navigate to the events page, and you should have events!

Look we have events!


Embedding a Stanford Event RSS Feed

To embed an RSS Feed onto your site, you can follow this guide from the Stanford Events site.

Tip of the day

If you just added events to your feed, you may need to wait a day for Stanford Events to update.

Our goal is to connect systems in smart ways and make content maintenance just a little easier for website owners. Let us know what you think about the new events calendar and module changes!

Posted in:
Caryl Westerberg Posted by Caryl J Westerberg on Tuesday, September 8, 2015 - 9:30am

Would you like to display courses on your website? How about events or links to people profiles? The Stanford community provides a variety of web feeds which provide data or content that your Drupal website can leverage. 

Frequently the content you need on your website is already published on another website. Rather than adding this content manually to your website, you can use a web feed to import this published content from the source website and display it on your website. 

What is a web feed?

A web feed, such as an RSS or Atom feed, is content that is published on a website in a machine-readable format that can be downloaded by an application such as a feed-reader or another website. These feeds use EXtensible Markup Language (XML) to encode the data. You can identify a page with a web feed when it displays the following icon:

Example of an RSS feed icon

What Stanford feeds can I use on my site?

The Stanford community produces numerous feeds. At Stanford Web Services we are supporting the import of data from three feeds in particular:

  • Stanford Event Calendar
  • Explore Courses
  • CAP (Community Academic Profiles)

Stanford Event Calendar

Located at, Stanford Event Calendar is Stanford University's central source for event information.  

Visit the Events Calendar on Stanford's English Department website to see the Stanford Events Importer in action. Learn all about using Stanford Events feeds at Using Stanford Events on your Drupal Site

Screenshot of the Stanford Events homepage.

Explore Courses

Located at, the Explore Courses site displays course information for the current year. These courses are from the Stanford Bulletin, the official statement of degree programs and courses of instruction for Stanford University.

Visit the Current Courses page on Stanford's English Department website to see the Stanford Courses feed importer in action. To learn more about importing Stanford Courses see Importing Courses from ExploreCourses

Screenshot of a search on ExploreCourses website.

CAP (Community Academic Profiles)

The Community Academic Profile (CAP) directory features detailed profiles for faculty, students, postdocs, and staff. Along with education and work experience, these profiles can contain detailed information including publications, presentations, and courses taught.

Learn how link to your CAP profile at Linking to a Profile on

Screenshot of the author's profile

Keep your content up-to-date

As you populate your Stanford website, remember that you may be able to import that content and let your feeds keep your data up-to-date.

Caryl Westerberg Posted by Caryl J Westerberg on Thursday, August 27, 2015 - 1:00pm

Frequently, at Stanford Web Services we receive requests to build an intranet as part of a website. What exactly do people mean by "intranet?" Each department, lab, and institute might have different requirements an "intranet." Let's look at some different ways you might want to use an intranet and the tools available at Stanford that can help make your intranet possible.

What is an intranet?

According to our old friend Wikipedia, an intranet is:

“...a private network, accessible only to an organization's staff....[and] can constitute an important focal point of internal communication and collaboration, and provide a single starting point to access internal and external resources.”

From our experience we've met with a range of intranet requirements.  An organization may simply need a section of private pages that are protected under a login to keep more sensitive information limited to specific audiences. In other cases we see requirements for collaboration, interaction, and notifications. – a much more complex set of requirements. With such a diversity of needs for an "intranet," we are fortunate that Stanford offers several solutions addressing these intranet needs. Let's look at some intranet requirements and point out some tools that meet those requirements.

Support for communication and collaboration

If your organization needs support for communication and collaboration, Stanford provides a variety of productivity and collaboration tools including Google Talk, Adium, and Pidgin for instant messaging, and Confluence as a collaborative wiki and for update notifications. Here’s a list of productivity and collaboration tools available at Stanford, which include tools such as Wikis, Google Apps, Video Conferencing, and so forth.

Access to resources


If your organization needs a portal or a “one stop shop” for links and resources, you could be acheive this by using either a wiki such as Confluence, Google Docs, or, yes, by creating a section of private pages on your organization’s website. 

Document management

If your organization needs document management such as providing research papers or resumes for download, Stanford gives you several options including Box for Stanford, Google Drive for Stanford, and AFSHere’s a handy comparison of Stanford’s document management solutions.


The typical target audience for an intranet is not the general population. Instead the audience consists of people that are known to the organization and need to login before accessing resources. For a department this may include faculty, students, and staff; for a conference, this may include the organizers, speakers, and attendees. 

If your organization needs to use authentication to manage access to internal resources, Stanford supports this with tools such as WebAuth and Workgroups. These authentication tools integrate with most of the tools listed above.


WebAuth provides a login to access many Stanford web sites with a single sign-on. If your organization needs to limit access to tools and services, you will be able to use WebAuth to provide authentication for accessing Stanford resources such as pages on your website, Box, AFS, and Google Drive,


Workgroups allow you to define groups of Stanford people and grant access privileges based on these groups. If your organization needs to povide access to resources based on groups such as faculty or students, you may find that using workgroups will make it easier for you to manage that access. 


So, if you feel that your organization needs an intranet, think through the specific requirements you might need – collaboration? privacy? ... etc. – and before investing your time and resources into building something custom, try out the existing tools. Who knows, maybe you'll find a great fit!

If you have a favorite intranet tool that you use at Stanford, please share. We'd love to hear more about what you use and love!

Caryl Westerberg Posted by Caryl J Westerberg on Friday, November 21, 2014 - 8:18am

Have you ever wanted to put a border on an image or highlight a link for more information in a text field? It is possible to configure the  Styles dropdown menu in your WYSIWYG editor to allow you to add styles to the content in a text field. If you don't know how to configure your Styles dropdown, here's how you can add multiple classes to an element using the HTML editor pane of the WYSIWYG.

Disable the WYSIWYG

To edit the HTML in a text area:

  1. Navigate to the page you'd like to edit

  2. Click the Edit button

  3. Scroll to just below the Body or other WYSIWYG text area

  4. Click on Disable-rich text

You should see the WYSIWYG disappear, and if any content was in the field you’ll see the HTML. To go back the WYSIWYG, click on Enable rich-text.

Adding classes to HTML elements

At Stanford Web Services, our themes support a variety of CSS classes which you can use in a text area. Some of these classes such as float-right are available through the WYSIWYG Styles dropdown menu. Other classes that are available in the theme, but not currently present in the Styles dropdown, such as border-simple must be applied directly to the HTML. 

Suppose you have an image that you want to have both a simple border and to have it float to the right. Here’s how to make that happen:

Add the float-right through the WYSIWYG

Taking advantage of the WYSIWYG, let’s start with the WYSIWYG enabled.

  1. Add the image to the text area

  2. Click on the image to select it

  3. From the Styles dropdown menu, select Image Right

Image of the styles dropdown menu

Add the border directly to the HTML

1.  Disable the WYSIWYG by clicking the Disable rich-text link below the field.

2.  Look for the line with your image. It’ll probably look something like:

<p class="float-right"><img src=""/></p>

3.  Add the border class, border-simple, to this line. The result should be something like:

<p class="float-right border-simple"><img src=""/></p>

4. Enable rich-text then scroll to the bottom and click Save.

Check out the results

You can see that the image has floated to the right, and if you look, you'll see a border around the image.

More CSS classes from Open Framework Style Guide

You can learn about our CSS classes such as float-right and border-simple  from our Open Framework style guide.

Posted in:
Caryl Westerberg Posted by Caryl J Westerberg on Tuesday, November 18, 2014 - 9:00am

BADCamp is one of the highlights in my Drupal world. It’s like a Drupalcon (Drupal Convention) with lots of people and sessions, but more low key. It’s a great way to meet people and to learn more about Drupal. Here are some of my highlights:

Higher Ed Summit

This was a great chance to learn about the issues facing many of our colleagues at other universities.

How and Why to Patch a Module

Presented by Joshua Turton from Phase2. Delivering a well-organized presentation, Joshua gave great introduction to what patches are and how they are used. A patch is a small bit of code that  can remove and add code in a file. It is through the patching system much of Drupal code development happens.

Drupal 8 Module Development

With Drupal 8 release just on the horizon, this session, presented by Mark Ferree, was a great introduction to new aspects of Drupal 8. My takeaway from this session -- with the integration of Symfony, we’re going to learn a whole new set of terms and concepts including:

  • Routing for things like menus items,

  • MVC (model, view, controller) where:

    • Models represent the objects, or pieces of data

    • Views are the visual representations of models(not like the Drupal module).

    • Controllers do most of the logic, heavy lifting and returning HTML

  • YAML (YAML Ain't Markup Language) for configuration,

  • Services and dependency injection to provide re-usable functionality,  

  • Plugins to provide reusable code components

  • Annotations in the comment blocks for registering plugins

Links for Mark Ferree's presentation

An Overview of the Drupal 8 Plugin System

This session delved more deeply into the plugin system for Drupal 8. Presented by the always dynamic and well-spoken Joe Shindelar, plugins, according to Joe are used ‘Anytime you need to allow modules to provide additional "things" that implement the same interface but provide distinctly different functionality.‘ One of those things might be providing a new block type.  This session follows Joe’s blog post at:

What were some of your take-aways from BADCamp?


Subscribe to Caryl J Westerberg's Blog Posts