Skip to content Skip to navigation

Blog

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');
        break;
    }
  }
  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!

Acknowledgements

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:
Photo of John Bickar Posted by John Bickar on Monday, October 2, 2017 - 3:11pm

Today I learned about the -v flag for grep. The -v, or --invert-match, flag, returns all lines that do not match your regular expression.

Let's say you have a long list of items, and you want to narrow it down to the ones that are not orange. I have banged my head against trying to do this with sed multiple times (as my search history will attest), and it turns out to be so much easier with grep.

orange bicycle
orange sweater
green banana
orange basketball
blue bandana
orange you glad I stopped there?

If that list is in a file called list.txt, run:

grep -v "^orange" list.txt

and it will return:

green banana
blue bandana

Pretty spiffy!

Posted in:
Tags:
Posted by Caleb Jones on Friday, September 15, 2017 - 4:11pm

This summer, I had the opportunity to intern with the fantastic Stanford Web Services team. In doing so, I gained an understanding of the methodologies involved in the development of modern websites.

My role at SWS included building website architecture, migrating content, writing content tests, and attending project management sessions. Over the course of the summer I delved into the world of JIRA, Agile, Git, Github, Drupal, Slack, and many more industry tools. I assisted in multiple large-scale, ongoing projects for the Stanford community.

At the end of September, I will be going into my fourth year at UC Santa Cruz. My major is Technology and Information Management, a multidisciplinary major encompassing computer science, economics, and project management. Interning at Stanford Web Services gave me a great glimpse into the process of development and management that a web team undertakes.

The environment at Stanford Web Services is both engaging and enjoyable. The team is friendly, collaborative, and always willing to help one another. I have greatly enjoyed my time at SWS and am eager to see the work that they will go on to produce.

 

Posted in:
Tags:
Cynthia Mijares Posted by Cynthia Mijares on Wednesday, July 12, 2017 - 8:04pm

The Stanford WYSIWYG gives the content editor multiple style options to modify the look of their site's content.  Suppose you want the ability to float an image right or left in the content region but it's not in the list of Styles. You can create a CSS Injector rule to target that specific content then make this style available to the WYSIWYG Styles drop-down list. To tackle this example, let's go step-by-step to add the ability to float images right or left in the content region within the WYSIWYG.

Create a CSS Injector rule for your class name

In the Stanford Sites environment, we utilize the CSS Injector module to add CSS to a site.

  1. Ensure that the CSS Injector module is enabled
  2. From Configuration > Development > Select CSS Injector
  3. Click Create a new rule
  4. Add CSS rule(s)
.float-right {
   float: right;
   margin-bottom: 15px;
   margin-right: 0;
}

.float-left {
   float: left;
   margin-bottom: 15px;
   margin-right: 15px;
}

Add CSS styles to text formats

Text formats define how editor environments behave. We'll incorporate the CSS in the "Content Editor Text Format".

  1. From Configuration > Content authoring > Text formats > Select Content Editor Text Format
  2. In the Filter settings > WYSIWYG Filter horizontal tab > Rules for Class Names, add “float-right” and “float-left”
  3. Click Save configuration

Add CSS styles to the WYSIWYG

  1. From Configuration > Content authoring > Select Wysiwyg profiles
  2. Edit the Content Editor Text Format
  3. In the CSS section > CSS classes, add Image Right=p.float-right and Image Left=p.float-left on separate lines
  4. Click Save

Check out and use your new Styles in the WYSIWYG drop-down list!

Posted in:
Grace Kiburi profile photo Posted by Grace Kiburi on Tuesday, May 23, 2017 - 2:17pm

Websites on sites.stanford.edu and people.stanford.edu will be receiving updates from May 30 to June 1. University IT will be updating Drupal modules to maintain the security of all websites on Stanford Sites and ensure everyone continues to benefit from the latest community contributions. Updates start around 10PM Pacific and usually wrap up around 4AM, during which time your site may be unavailable for approximately 1 minute. If you have questions or experience issues with your Stanford Sites website, please contact us by submitting a request through University IT's Services Portal.

Schedule

  • May 30th (10PM to 4AM May 31st): Personal websites hosted on Stanford Sites (at people.stanford.edu)
  • May 31st (10PM to 4AM June 1st): Group and department sites hosted on Stanford Sites (at sites.stanford.edu)
  • June 1st (10PM to 4AM June 2nd): Group and department sites hosted on Stanford Sites (at sites.stanford.edu); Also, personal, group, and department development sites (at sites-dev.stanford.edu and people-dev.stanford.edu)

Included Updates

Security Updates

  • Metatag: Security update to better protect cached page titles, adds a new icon field related to mobile icons, and bug fixes related to workbench integration. (7.x-1.21)

  • Site_verify: Security update to better protect integration with external search engines. (7.x-1.2)

  • Views: Security update to better protect taxonomy terms not intended for public view. (7.x-3.16)

Bug fixes

  • Stanford_capx: CAPx sometimes imports a lot of data.  This update should reduce the chances of hitting an "out of memory error." (7.x-2.2-alpha2-php54)

  • Better_exposed_filters: Allows for filters to take effect without having to click submit, along with a number of bug fixes and test improvements. (7.x-3.4)

  • Jw_player: Fix bug so that JW Player can now be used with MySQL 5.7. (Patch)

  • Token: Fix bug so that token can now be used with PHP 7.1. (7.x-1.7)

Feature improvements

  • Colorbox: Image title and alt attributes can now be added to popup images, in addition to bug fixes that should not affect functionality. (7.x-2.13)

  • Field_collection: New support for field translations, and a bug fix that now deletes the path alias associated with deleted content. (7.x-1.0-beta12)

  • Social_share: Backend improvements related to settings options and module listing page. (7.x-2.5)

  • Stanford_events_importer: Added dedicated past-events importer, added a speaker field, and additional checks for better data integrity. (7.x-3.6)

  • Stanford_feeds_helper: When setting up mapping, you should now see the actual field name for target string. (7.x-1.2+5-dev)

  • Stanford_sites_helper: Update links for additional support to Stanford's new ServiceNow portal. (7.x-1.7)

  • Stanford-Drupal-Profile: We use this profile to install new sites and now enable by default modules like stanford_date_formats. (7.x-2.5)

  • Stanford_image_styles: Default images styles will now include hires options for clearer display on retina screens.

New modules

  • Paragraphs: Paragraphs is a relatively new (and much beloved) page building tool that allows editors to stack different design elements on a page. (7.x-1.0-rc5)

  • Hires_images: You can now upload an image of dramatically higher quality (or larger size) for retina screens and this module will still display smaller versions of the same image for non-retina screens. (7.x-1.10)

 

Posted in:
Anna Watt Posted by Anna Watt on Friday, March 31, 2017 - 8:45am

Do you have a collection of ongoing related events? Try the Event Series module to collect events onto a single page and display upcoming and past events.

Stanford Event Series joined Stanford Sites during the Summer 2016 Updates. Previously it was only available to our Jumpstart clients, but high demand for this functionality on Stanford Sites, combined with our commitment to contributing back to the greater community brought this module to sites created on Stanford Sites.

Stanford Event Series requires the Stanford Events module. It uses the Context module to place event blocks on the event series nodes to display upcoming and past events. You can provide details and background information about the event series, such as the topics covered, speakers to expect, when the events are usually held (e.g. every third Thursday of the month), and other helpful information that applies to all of the events hosted in that series (like if there will be donuts provided at every event. Everyone loves donuts.)

Add Stanford Event Series to your site

  1. Log into your Stanford Sites site.

  2. In the Admin toolbar, select Modules.

  3. Filter by ‘event series’.

  4. Select the following modules:

  • Stanford Event Series

  • Stanford Event Series Administration

  • Stanford Event Series Context

  • Stanford Event Series Event List View

  • Stanford Event Series Event Short list View

  • Stanford Event Series List View

 

  5. Click the Save configuration button.

  6. Your site will prompt you to enable other required modules, if they have not already been enabled.

  7. In the Admin toolbar, go to People > Permissions.

  8. Make sure everyone that needs access to event series actions has them.

Create an Event Series

  1. In the Admin toolbar, select Content > Add Content > Stanford Event Series.

  2. In the Menu Settings tab you can add this event series to the menu structure of your site, or not. For example, sometimes it is helpful to nest under /events.

  3. Click the Save button.

That was easy. Now what?

Now, we need to select which events belong together in an event series

  1. In the Admin toolbar, select Content.

  2. Filter by type: ‘Stanford Event’ and click Apply.

  3. Click edit on an event.

  4. Select the event series title from the checkbox list titled “Event Series” (toward the bottom of the edit node form.)

EventSeriesTag.png

  5. Click the Save button.

What if I want to see a list of all my event series on one page?

We have a view for that! You can use the event series list view by going to yoursite.stanford.edu/events/series.

Check out an example event series list view here »

Posted in:
Grace Kiburi profile photo Posted by Grace Kiburi on Friday, March 24, 2017 - 10:48am

Want to create a news item for your Stanford Sites? Stanford News feature provides an out of the box solution for displaying news content on your website. This feature contains a content type, fields, a news page layout, and taxonomy. This module is a great replacement for the default Article content type.

Enable Stanford News module for your site

  1. Login to your Stanford Sites website

  2. From the Admin toolbar, click Modules

  3. Filter list by stanford_news

  4. Activate the following modules:

  • Stanford News

  • Stanford News Views (stanford_news_views)

  • Stanford News Administration

enable-stanford-news.png

  5. Click Save configuration button

  6. From the Admin toolbar, navigate to People and click Permissions

  7. Set News Item permissions for each role

  8. Click Save permissions button

permissions.png

Create Stanford News block for your page

  1. In the admin toolbar, select Structure > Blocks

  2. Search block by View: News  

  3. Select a view, for example: View: News: 2 Item Recent News List Block

  4. Drag the view to assign it to a region

  5. Click on Save blocks

  6. Click on Configure link next to each block to configure the block’s title and visibility settings

  7. Set visibility settings to specify where the news block will appear on your site

  8. Click Save

Create a News item

  1. Login to your site

  2. From the Admin toolbar, navigate to Content > Add content and click News Item

  3. Enter the Title of the news item

  4. Click Add/ Edit External Article Information

  • Enter the Date

  • If available, enter the Source of news item and URL

  5. Select the category to tag the news items with

  6. Add News Image by clicking Add/Edit Image

  7. Upload the Image:

  • Enter optional Credits

  • Enter optional Source Info

  • Enter optional Caption

  8. Enter other news details as needed

  9. Click Save

This is how your news page will look when you're done:

List of news items

The Stanford News module includes a view which displays a list of news items at http://yoursite.stanford.edu/news/recent-news.

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

You have created a page that is restricted to Stanford only users logged in with their SUNet ID and placed that page in the menu. After logging out of your site, you noticed that the link is gone! Would you like to make your menu links visible to all users even though the content is restricted? Always Visible module can help you do that!

Always Visible module allows users with a site administrator or site owner role to override menu item visibility. Always visible allows the menu items to always show up even though the content is restricted. This means that the menu items that would normally be inaccessible, are made visible to anonymous users. When an anonymous visitor tries to access the link, they are prompted to login via WebAuth to see the content.

Enable Always Visible module

  1. Log in as administrator

  2. From the admin menu bar, go to Modules

  3. Filter the modules list by entering always_visible

  4. Enable the module

  activate-av-2.png 

   5. Click the Save configurations button

Making menu items visible

  1. Navigate to Site Actions

  2. Select Main menu

  3. Select the menu item you want to make visible and click edit

list-links-av-module.png

  4. Check Always show this menu

edit-menu-link.png


  5. Click Save

Want to learn more about menus?

We have more tricks for you!

Not a Jumpstart client?

You can get this module from Drupal.org.

Posted in:
Photo of John Bickar Posted by John Bickar on Sunday, March 12, 2017 - 10:39am

At the 2017 Stanford Drupal Camp, I facilitated a conversation about "Lessons Learned from 2+ Years Using Behat".

Thanks to Kellie Brownell, Caryl Westerberg, and many others in SWS for their work that made this possible, and to Shawn DeArmond from UC Davis for his contributions to the conversation.

(Slides and associated links are available here.)

Alyssa Hislop portrait Posted by Alyssa Hislop on Monday, December 5, 2016 - 12:06pm

Want to display a group of photos on your site? Stanford Sites now offers a solution for creating your own galleries.

Stanford Gallery joined Stanford Sites during the Summer 2016 Updates. Previously it was only available to our Jumpstart clients, but high demand for this functionality on Stanford Sites, combined with our commitment to contributing back to the greater community brought this module to sites created on Stanford Sites. 

You can create a gallery page or a block to use gallery content types through the Stanford Gallery Bean. The gallery images on this post are generated from the Stanford Gallery Bean placed using the Context module. (Not using Context yet? Learn more about this powerful tool now!)

Add Stanford Gallery to your site

  1. Log into your Stanford Sites site.
  2. In the Admin toolbar, select Modules.
  3. Filter by the word gallery.
  4. Select all the Stanford Gallery modules.
  5. Click the Save configuration button.
  6. In the Admin toolbar, go to People > Permissions.
  7. Make sure everyone that needs access to gallery actions has them.

Create a gallery

  1. In the Admin toolbar, select Content > Add Content > Gallery.
  2. In the Menu Settings tab you can add this gallery to the menu structure of your site, or not. 
  3. Click the Save button and admire your new gallery!

Use Stanford Gallery in a Block

Now that you've created a gallery, it can be placed as a block on your site. You will need Administrator privileges on your site.

  1. In the Admin toolbar, select Content > Add Block > Stanford Gallery.
  2. If you want a Title to display, provide one.
  3. Select your desired gallery from the gallery dropdown menu.
  4. Choose the View Mode (aka what size will the thumbnails be).
  5. Save.
  6. Place block (it's in the list of Beans) in Context.

What do the different sizes look like? 

You can compare the different preview thumbnail sizes in our Jumpstart Feature Demos page for Gallery.

But what's the code look like? 

If you're interested in how this module creates a responsive image gallery using the jQuery colorbox plugin, check out our Stanford Gallery code on GitHub

Posted in:

Pages

Subscribe to Stanford Web Services Blog