Recently We got an interesting requirement to implement very smooth image zoom functionality. Really it was very smooth zoom behavior when they show it in the demo.

We searched a lot of jquery plugins to match the behaviors and finally found the plugin called Magnific Popup. It has the exact same zooming effect and behaviors. And one more interesting part is this there is available a Drupal module that is implemented in this library for drupal.

For immediate release.

Washington DC, 11 October 2022 - The Board of Directors of the Drupal Association has appointed Tim Doyle as the Association’s new leader and its first Chief Executive Officer (CEO). This appointment reflects the Board’s desire to build upon the Association’s excellent work over the past 13 years and expand its activities into product innovation and marketing.

The Drupal Association Board of Directors has an energizing vision for the future of the Drupal Association to address the long-term needs of the Drupal Project and the Drupal Community and we are excited to bring Tim on board to help implement this vision,” said Baddý Sonja Breidert, Chair of the Drupal Association Board. “I believe he is the right person at the right moment in the Association’s life.”

I am excited to become a part of the Drupal Association with its strong community and its public mission of advancing and expanding the Open Web,” said Tim Doyle, CEO, Drupal Association. “I hope to bring my experience in building systems and building communities to the great work that the Association has been doing to support a project that has thrived for more than 2 decades.”

In the Spring of 2022, the Drupal Association Board met to consider the future of the Association and what was needed for Drupal to continue to thrive as an Open Source technology and to become an even stronger champion of the Open Web. The conclusion was that the Drupal Association needed to continue its good work in infrastructure, programming, and fundraising but to expand its activities to support product marketing and product innovation by investing in ways to grow contributions to the Drupal project. The Board believes this expanded work is crucial for Drupal to thrive and to have a bigger impact in strengthening the Open Web. In dialogue with the Drupal Community, the Association will undertake a series of initiatives and will invite partners and end-users to be key stakeholders in this expanded mission.

To achieve these ends, the Board decided to create the CEO position for the Association and search for candidates with track records in strategic planning, product growth, and who had the ability to work with technical platforms and a strong Association staff. The role of the CEO is to lead the Drupal Association as a US-based 501c3 non-profit, which serves a global community. Dries Buytaert remains the Project lead for Drupal, and both the Association and the project will continue to be in close collaboration.

After a thorough search of qualified candidates, we are excited to welcome Tim Doyle to the Drupal Association as our new Chief Executive Officer. Tim is a seasoned technology leader with an impressive track record and passion for growing nonprofits. I believe that the combination of Tim's skills and experience will help lead the Drupal Association through its next strategic phase. I look forward to working closely with Tim to grow Drupal's impact," says Dries Buytaert, Founder and Project Lead of the Drupal Project.

Tim Doyle previously worked for the Conference of State Bank Supervisors, a U.S.-based 501(c)d3 nonprofit association where he led the visioning, development, implementation, and expansion of collaborative “SupTech” systems that serve 67 state regulatory agencies, 5 federal agencies, over 30,000 banks and nonbank financial services companies, and 600,000 individuals. Tim has over 25 years of experience in nonprofit and government program administration. Having previously grown an organization from a public sector start-up to an ongoing concern with an annual budget of $85 million, Tim is poised to help the Drupal Association reach its next level of impact.

It’s been a pleasure getting to know Tim throughout the interview process. It was clear from our culture interview and following conversations that he is a collaborative, balanced, and thoughtful leader that believes in empowering the experience of the team. I especially appreciate that he has a sense of humor! I look forward to working with Tim!” –Angie Sabin, Acting Executive Director, and CFO

Tim Doyle’s role with the Drupal Association begins Monday, 17 October 2022.

Before introducing you to our new CEO, we’d first like to share a bit about our CEO search process. In this post, we’ll outline the steps we took to ensure that the CEO we hired is the ideal fit for the Drupal Association.

Because we wanted to reimagine the role, the DA Board decided to conduct the search without bringing in an executive search firm. We've moved from the title of Executive Director to CEO to map the role to the rest of the C-level titles at the Drupal Association, as well as to reflect the vision for accelerating Drupal's future. Members of the board formed a search team made up of the members of the Executive Committee (Owen Lansbury, Dries Buytaert, Tiffany Farriss, Baddý Breidart) as well as our Acting Executive Director (ED), Angie Sabin. The CEO hiring process was managed internally by the search team members with support from the Drupal Association staff.

As a reminder, the role of the CEO is to lead the Drupal Association as a US-based 501c3 non-profit, which serves a global community. Dries Buytaert remains the Project lead for Drupal, and both the Association and the project will continue to be in close collaboration.

What we looked for in a CEO

At the DrupalCon Portland retreat in April 2022, the Board focused on how the Drupal Association might better support the Drupal project. As an organization that has demonstrated resilience and financial stability, this leadership transition was a good opportunity to consider what comes next.

What emerged was a vision of a thriving Drupal project and community as a champion of the Open Web. To execute this vision, the Drupal Association must accelerate product marketing and product innovation. As a non-profit community-focused organization, we have deep experience in supporting the project through Drupal.org and DrupalCons. This direction will see us continue to provide that support as we develop these new capabilities. As one of the largest open source projects for over 20 years, Drupal has been a public good that delivers tremendous public benefit. It is vital that we tell the story of Drupal: its capabilities as well as the impact it has on the organizations that use it and the people who build it. Connecting that story to Drupal’s public good legacy is part of how we will secure its future as a cornerstone of the Open Web. We see opportunities to pursue new channels of philanthropic support that will help us scale how we support Drupal’s continued impact and innovation for the next 20 years (and beyond).

All of this takes solid strategic planning, proven growth experience, a proven ability to work with technical platforms, and the ability to work with an already strong C-level team. This person must also have the humility and good humor required to serve in the role.

Our new CEO will be tasked with taking the Drupal Association to the next level, developing a strategy and plan to support the board’s vision. We wanted to be sure that any candidate we considered would have a personal commitment to Diversity, Equity, and Inclusion, so we included questions to assess their competency and commitment in our initial screenings and phone interview. Our CTO, Tim Lehnen, and CFO, Angie Sabin, also made sure candidates would be comfortable working in a facilitative leadership setting. We are confident that these steps and processes led us to hire a candidate that will be a great fit for our team and the Drupal community.

Job posting and the application period

With a strong vision for what we want the role of the CEO to accomplish, it was equally important to us that the search process reach a diverse pool of candidates. We cast a wide net to raise awareness for the opening and followed a process optimized for bias reduction. Our job posting disclosed the salary range and benefits, encouraged historically underrepresented candidates to apply, and did not specify any educational requirements. The Board and staff reached out to potential candidates via our networks, and our Acting ED used the LinkedIn recruiter tool to identify qualified individuals of historically underrepresented identities and reached out to individuals to invite them to apply.

Applications were open for 4 weeks on our website, and submissions were managed through an applicant tracking tool. Candidates were asked to submit a cover letter and resume and complete a short list of questions:

• Do you identify as a member of a historically underrepresented community? (Optional)
• What are your pronouns? (Optional, open text field).
• Do you have a personal commitment to diversity, equity, and inclusion?

Initial Screening

We received 120 applications for the post. An external consultant with experience in equitable screening used our applicant tracking system to identify candidates that should not be considered by the search team. This screening eliminated 25 potential candidates who lacked a relatable background and who did not meet any of the necessary criteria.

Our search team then screened the remaining pool of 95 applicants. If any two members of the search team expressed interest in a candidate, that candidate moved forward to the next round. This narrowed the field of candidates to 10 candidates:

• Each had experience in technology and/or non-profits that were relevant to the board's vision for the future of the Drupal Association.
• Each candidate was looked at with an eye to their capacity for working in a community-driven environment, and their compatibility with our Values & Principles.
• 50% used 'she/her' pronouns. 
• 40% used 'he/him' pronouns.
• 10% did not provide pronouns.
• 30% identified as members of a historically underrepresented community.
• 100% answered yes to having a personal commitment to diversity, equity, and inclusion.

Phone Interview

The acting Executive Director (who has a background in human resources) performed phone interviews with the top 10 candidates. Each candidate was asked the same questions, and detailed notes were taken and shared with the search team. The search team reviewed the phone interview notes. If any two members of the search team expressed interest in a candidate, that candidate moved forward to the next round. Eight candidates were invited to the Zoom interview round:

• Candidates who moved through this round expressed a clear excitement to work with the Drupal Association and to fulfill the board's vision.
• Candidates were also screened at this point for their comfort level with the Drupal Association's current size and budget level.
• 62.5% used 'she/her' pronouns.
• 37.5% used 'he/him' pronouns.
• 25% identified as members of a historically underrepresented community.

Round 2: Zoom Interview

This round focused on the candidate's experience with open source, and understanding of the Drupal Association and Drupal project. We were curious about their leadership styles, and their ability to translate a vision into an actionable plan. Each Zoom Interview candidate was invited to participate in a recorded call with two search team members. Again, all candidates were asked the same questions which were provided to them in advance. Non-participating search team members reviewed each recording. Search team members recorded their thoughts about each candidate using a scored ranking comparison sheet. This structure helped avoid personal bias.

Round 3: Culture-fit Interview with C-level staff

The Zoom Interview candidates were invited to participate in a culture-fit conversation with the Acting ED and CTO. We focused on candidates’ individual leadership and communication styles. All candidates were asked a standard set of questions, provided in advance, to begin their conversation. Notes were taken and shared with the search team.

During the interview rounds, two candidates withdrew from the process, leaving five candidates who were invited to one-on-one meetings with Dries and other members of the search committee.

Final presentation round- strategy and vision

The search team determined who they wanted to invite to move forward to the final round, including recommendations from the Acting ED and CTO, who were able to watch the Round 2 Zoom interviews.

Two candidates were invited to develop a presentation and pitch based on a specific brief as a way to demonstrate their understanding of the Drupal ecosystem. Search team members met with the candidates to provide additional context about the organization, project, and community. The candidates had one week to prepare and record their presentations.

From here, the search team reviewed the presentations, had follow-up conversations with each candidate, and made their final, unanimous decision.

Reference check

After the search team determined their preferred candidate, we asked for a list of references. The acting-ED checked 3 references; one supervisor, one subordinate, and one peer. All of the references had excellent things to say about the preferred candidate.

We've made our choice

After executing the rigorous search process described above, we are thrilled to announce that we've hired Tim Doyle as the new CEO of the Drupal Association. Read our blog to learn more about Tim and how he'll be leading us into the future. Tim impressed us immensely in each round of the long interview process and we are excited to introduce him to the Drupal community.

Last but not least, we want to thank the Drupal Association leadership team and staff for their dedicated support of Drupal Association programs and the community during this search process. We especially want to thank Angie Sabin for serving as our Acting Executive Director. Angie did a fantastic job leading the Drupal Association through this transition.

Commerce Core includes a Promotion module that supports various types of offers, conditions, and coupon configurations - with both limited use coupons and bulk coupon code generation. Any user role can be granted access to configure new promotions, disable old promotions, or add coupons to existing promotions.

The promotion architecture shown in the form above consists of four primary parts:

Before we get to the “How”, let’s talk a little bit about the “Why” of implementing React in Drupal. React, as you know, is a very developer-friendly, component-based JavaScript library that lets developers build high-quality, complex front-end interfaces. Drupal is a robust and powerful content management framework that enables content-driven and flexible web experiences. Combining React’s superior front-end theming capabilities with Drupal’s powerful back-end framework can let you deliver performant and exceptional digital experiences. Let’s take a closer look at creating React components in Drupal 9.

But first, what is React?

By definition: “React is a declarative, efficient, and flexible JavaScript library for building frontend user interfaces. It lets you compose complex UIs from small and isolated pieces of code called components.”

If you are familiar with Pattern lab, it should be easy for you to understand React’s basic building blocks. We start with the basic building blocks or atoms of a page and work our way up to create designs.

A lot of developers prefer to use JSX to write HTML code in React. Read on to find out why.

Why JSX for React

React’s coding style and syntax can get complex and is not very developer-friendly. As you see below, this is how an HTML element is created in React.

And this is how you write the same function in React using JSX:

Using JSX you can specify the name of the class as mentioned below using the predefined “className” XML syntax. As you can see, it is much easier, intuitive and less verbose to write the same code in JSX. Hence, almost the entire React community uses JSX to write React code.

What is JSX? JSX stands for JavaScript XML. XML is a very user-friendly syntax for developers. JSX makes it easier to write and add HTML in React.

Take a look at the difference between creating elements in React vs Javascript. You will notice how React gives you more flexibility to write and access code, making it easy to develop and debug.

const Button = Click Me

HTML FILE

Click Me

JS FILE

function onClick() {
 console.log('clicked!');
};
const button = document.getElementById('my-button');
button.addEventListener('click', onClick);

Although JSX makes it easy for developers to write code, it is not the best format for browsers to understand. For this reason, we will be compiling it into a regular JavaScript format that will be served to the browser.

React Data Forms

React components have two forms of data:

    • Props
        ◦ Props are properties received from ancestors in the component hierarchy. They cannot be changed, or mutated. For example, to pass a variable from a parent to a child component, you can pass it as a prop.
    • State
        ◦ State is local to a component, and can be changed by events. For example, if you have a state variable (state.text), the text can be changed according to different actions. 

NOTE: Child components can receive both the values of that state and events to update that state through props

How to Integrate React with Drupal

We’ll first start by creating a custom module and then the JSX file.
Now let’s create the Drupal custom module as shown below: 
Create modules/react/react.info.yml

Next, let’s create the React file as shown below. We’re creating an HTML markup with an H1 tag that will be printed in the react-app id. 

Create modules/react/js/src/index.jsx

Accessing the JSX file by Drupal

Now, for Drupal to be able to access and use the JSX file that we just created, you will need to set up a JavaScript toolchain with Webpack.

At a high level, we're configuring a process that'll take our source JavaScript files, like index.jsx, and pass them through different build steps that will ultimately output a single, optimized, .js file. This build step allows us to take advantage of the entire React/JavaScript ecosystem while working on our Drupal module or theme.

The basic steps are:

• Set up a toolchain that'll process your JavaScript assets into one or more "bundled" JavaScript files with a known location that doesn't change
• Create a Drupal asset library that points to the bundled assets from your build toolchain

Step 1: Install React, Webpack, and Babel

Before installing these, you will need to ensure you have node and nmp ready in your development environment. React is the Javascript library. Babel and webpack are compilers you need to convert the .jsx to javascript for the browser. Babel is one of the best community compilers to compile .jsx files. To install React, Webpack and Babel, run the following commands from the root directory of your theme modules/react/, in your terminal

Step 2: Configure Webpack with a webpack.config.js file

Create a webpack.config.js file in the root of your module: modules/react/webpack.config.js

Step 3: Configure Babel with a .babelrc file

Provide some configuration for Babel by creating a .babelrc file with the following readily available presets (which will be used while compiling the React code) in the root directory of the module: modules/react/.babelrc

Step 4: Add some helper scripts to package.json

This is necessary to run your nmp package as it always refers to the base file package.json before any action.

Step 5: Run build to compile the jsx files to the single js file

Now we are ready to compile the JSX file.

  npm run build  (OR) npm run build:dev

Basically this compiles the file as per the config in the webpack.config file and now it creates the compiled js file to the mentioned repository js/src/dist.

Step 6: Define a Drupal asset library

You can now add the compiled JavaScript file as a Drupal asset in the library (libraries.yml).

Now you are all set and ready to create some cool React components in your Drupal website.

Here’s how my end result looked like (below). You can see the React block I created with an H1 tag “Hello Specbee”.

Final Thoughts

Wasn’t that easy? When creating React components in Drupal, make sure you have the React dom element created in Drupal (‘react-app’) and always attach the Javascript file (that we compiled from the React JSX file) to the Drupal library. Liked what you just read? We strive to publish valuable content for you every week. Subscribe to our weekly newsletter to stay updated with all our latest insights.

Author: Santhosh Kumar

Meet Santhosh Kumar, an Acquia certified Drupal 9 Frontend specialist. While he’s not turning complex problems into simple interface designs, you can find him either binge-watching Jackie chan movies or dancing. His best-kept secret (well, not anymore)? He sleeps with his eyes open! 

Leave us a Comment

Recent Blogs

How to React Quickly in Drupal

Configuring the Drupal 9 Metatag Module - A Brief Guide

What Search Engines want and why Drupal is better for SEO

Featured Success Stories

Upgrading and consolidating multiple web properties to offer a coherent digital experience for Physicians Insurance

Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology

Great Southern Homes, one of the fastest growing home builders in the United States, sees greater results with Drupal 9

There were so many great things that happened at this year’s DrupalCon in Prague, but these are the ones that the Annertech team will remember for years to come.