Drupal 8 has a great AJAX Form API which includes some tools to create modal dialogs using the jQuery modal library. The Examples module even demonstrates how to create a custom form and display it in a modal window. But what if what you want to do is display an already created form in a modal? How do we do that? Let's see how to do it with an example. Let's display the node add form in a modal window.

The first thing that we need to do is create a link which will trigger the modal when the user clicks it. The only special things that this link needs to have are a few attributes that will let Drupal know to display the contents of the link in a dialog:

 
<a href="/node/add/article"
  class="use-ajax"
  data-dialog-type="modal"
  data-dialog-options="{'width':800,'height':500}">
    Create Node
</a>
 

Drupal also needs to include the JavaScript libraries which will read these attributes and make them work, so let's add the following libraries to your module's dependencies (in your equivalent to this example's modal_form_example.libraries.yml file).

  
  dependencies:
     'core/drupal.dialog.ajax',
     'core/jquery.form',
  

If you are unsure about how to add libraries on Drupal 8 you can consult the documentation to either add it in a theme or add it in a custom module. At the end of the post I will provide a repository with the code where I added the libraries in a block.

And that's it! If you click the link, the form will be displayed in a modal dialog! Drupal will automatically detect that you are sending an AJAX request and will display just the form so you won't need to worry about removing the rest of the blocks or hiding undesired markup.

The last thing missing, is what will happen if the user creates a node? By default, the node will redirect the user to another page but if we want to just close the modal dialog and leave the user on the same page we need to tell the form to do that. For this we are going to alter the form and add an AJAX command letting Drupal know that we want to close the dialog as soon as the node is created. In the .module file of a custom module we will add this code:

  
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\CloseModalDialogCommand;
use Drupal\Core\Ajax\RedirectCommand;

/**
 * Implements hook_form_alter().
 */
function modal_form_example_form_node_article_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  $form['actions']['submit']['#submit'][] = '_modal_form_example_ajax_submit';
  $form['actions']['submit']['#attributes']['class'][] = 'use-ajax-submit';
}

/**
 * Close the Modal and redirect the user to the homepage.
 *
 * @param array $form
 *   The form that will be altered.
 * @param \Drupal\Core\Form\FormStateInterface $form_state
 *   FormState Object.
 */
function _modal_form_example_ajax_submit(array $form, FormStateInterface &$form_state) {
  $response = new AjaxResponse();
  $response->addCommand(new CloseModalDialogCommand());
  $form_state->setResponse($response);
}
 

The first function adds an extra submit function (which will be executed after Drupal finishes processing the node) and the second function adds the command to close the Dialog when the node has been created.

We can do this with practically any form in Drupal and you can add extra commands to do more complex things. Here are two resources:

• List of all the possible commands available in core (you can also create your own)
• Agaric's Modal Form Example module

Blog posts can be a valuable way for a variety of authors to post reflections, experiences and opinions.

At a minimum every blog post should have an image (which will be associated with the blog and display in different sizes in different displays), a summary field and a text paragraph in the body field.

All Drutopia content types are built using the Paragraphs module which lets you add a variety of types of content and arrange them in the order you wish. When creating a blog post you can add standard text paragraphs in the body paragraph field, but also add images or files (such as a PDF).

The Challenge

MASS Design’s brand identity needed an update to match their new architecture work and expanding impact, with a website to match. They wanted a suite of tools that their staff could employ to flexibly assert their updated identity and tell stories in ways that could keep pace with their evolution.

At the same time, they knew that part of design is accessibility. With a large audience across Africa, it was critical that the design not compromise performance, ensuring visitors on low bandwidth devices could read their stories just as easily as their US counterparts.

The Approach

Flexible Content Creation with Paragraphs

Todd Linkner took MASS Design’s new visual identity and translated it into components that could be assembled into myriad formats, giving wide creative control to content editors.  We took on the site built the site with MASS's regular involvement and approval.

To achieve this component-driven design, Todd, as a remarkably Drupal-savvy designer, had the Paragraph module in mind, and it is what we chose to implement the functionality (this was before the two-year period where every third talk at Drupal camps was about the Paragraphs module). Rather than building content types with fixed fields always in the same order, Paragraphs allowed us to define a variety of media formats (carousel, image grid, text, etc.) that could be added and rearranged at will.

Editors can customize the arrangement of different content elements with the Paragraphs module.

Site Performance is Design Justice

Previously, MASS Design’s website loaded multi-megabyte images on the front page, loading slowly for all visitors, particularly those with limited bandwidth.  (It also cost hundreds of dollars a month in bandwidth from their cloud services provider.)

Performance is part of design and when we prioritize our lower resourced audiences we stay true to our values of access and inclusion. We did this for MASS Design by keeping performance at the front of conversations from the beginning.

Drupal is a powerful CMS which, out of the box, will resize images and do internal caching. We ensured the new MASS site would load quickly with strategic configuration and the use of key third party tools.

We started with aggressive, yet sensible caching. We turned to a content delivery network (CDN) with locations close to Kigali, Rwanda to make this happen.  (Closest we could get was, Mombusa, Kenya). Using WebPageTest.org's API, we scripted performance tests to regularly, repeatedly see page load speeds of the site from Johannesburg, South Africa, the closest (not very close) offered at the time.

Two entry points to the site were configured. One for the public utilizing CDN caching, and a separate entry point for editors with a sub domain. This structure kept the CDN working properly. Features relying on cookies, in particular logging in as an authenticated user, don’t work with a low-cost CDN.

The Results

Since updating their website, MASS is now telling compelling stories of their work, resulting in 84% more page views, more pages per session, and more returning users. Site traffic from Rwanda is up ten times thanks in part to the improved performance of the site.

Since the initial site upgrade, we have also added on-site donation forms, a email sign up feature for their key resource documents and expanded their Paragraphs-driven storytelling toolset.