Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Mar 20 2024
Mar 20

Join us THURSDAY, March 21 at 1pm ET / 10am PT, for our regularly scheduled call to chat about all things Drupal and nonprofits. (Convert to your local time zone.)

This month we'll be giving a recap of last week's NTC, and an update on our plans for DrupalCon Portland, including the Nonprofit Summit and the recently announced discount for nonprofit attendees!

And we'll of course also have time to discuss anything else that's on our minds at the intersection of Drupal and nonprofits.  Got something specific you want to talk about? Feel free to share ahead of time in our collaborative Google doc: https://nten.org/drupal/notes!

All nonprofit Drupal devs and users, regardless of experience level, are always welcome on this call.

This free call is sponsored by NTEN.org and open to everyone. 

  • Join the call: https://us02web.zoom.us/j/81817469653

    • Meeting ID: 818 1746 9653
      Passcode: 551681

    • One tap mobile:
      +16699006833,,81817469653# US (San Jose)
      +13462487799,,81817469653# US (Houston)

    • Dial by your location:
      +1 669 900 6833 US (San Jose)
      +1 346 248 7799 US (Houston)
      +1 253 215 8782 US (Tacoma)
      +1 929 205 6099 US (New York)
      +1 301 715 8592 US (Washington DC)
      +1 312 626 6799 US (Chicago)

    • Find your local number: https://us02web.zoom.us/u/kpV1o65N

  • Follow along on Google Docs: https://nten.org/drupal/notes

View notes of previous months' calls.

Mar 20 2024
Mar 20

Welcome back to “Skills Upgrade” a Talking Drupal mini-series following the journey of a D7 developer learning D10. This is episode 3.

Topics

  • Review Chad's goals for the previous week

    • DDEV performance improvements
    • Install Drupal 10
    • Install drupal/core-dev
    • Configure and test phpcs
    • Test phpstan
    • settings.local.php
    • Install Devel module
  • Review Chad's questions

    • Rancher Desktop appears to be holding on to port 443 after I installed it. Although I changed the port to something else, do you have any suggestions to update the setup to use ports 443 and 80 instead?
    • How are tools like phpcs and PHPStan used by the Drupal community for contrib? Are they a part of drupal.org's testing automation?
    • Starting a new D10 website from scratch in DDEV is one thing How would I typically work with an existing D10 website? Do I start with the community config, then overwrite the code, database, and files? Is there a better approach?
  • Tasks for the upcoming week

    • Install Drush using Composer

    • Examples module

    • routes/controllers/forms

    • Check back for "docker context use rancher-desktop" stuff.

    • Create a new Git repository for your D10 site with Composer dependencies not committed to the repository.

      • .gitignore stuff
      • cp web/example.gitignore web/.gitignore
      • Create ./.gitignore with:
        /vendor         /web/core         /web/modules/contrib/         /web/themes/contrib/         /web/profiles/contrib/         /web/libraries/         *.sql.gz 

Resources

Chad's Drupal 10 Learning Curriclum & Journal
Chad's Drupal 10 Learning Notes

The Linux Foundation is offering a discount of 30% off e-learning courses, certifications and bundles with the code, all uppercase DRUPAL24 and that is good until June 5th
https://training.linuxfoundation.org/certification-catalog/

Hosts

AmyJune Hineline - @volkswagenchick

Guests

Chad Hester - chadkhester.com @chadkhest
Mike Anello - DrupalEasy.com @ultimike

Mar 19 2024
Mar 19

Like every month, we prepared an overview of the top Drupal news & articles from the previous month. We hope you enjoy our selection for February 2024!

What’s new on Drupal.org - Q2 to Q4 2023

Let’s start with Alex Moreno’s overview of all the major things happening in Drupal between Q2 and Q4 of 2023, who kicks it off with DrupalConEurope 2023 in Lille, France together with Dries’s keynote (Driesnote) from the DrupalCon.

Next, Alex mentions the MVP organisation and MVP individual of the month before moving on to specific areas and initiatives such as Project Browser, Automatic Updates, Supply chain security and Security Audit.

Other key initiatives and priorities for Drupal last year and currently include the GitLab acceleration initiative, GitLab CI, the coming Drupal 7 end of life, Contribution Health Dashboards, and more.

Read more about what’s new on drupal.org between Q2 and Q4 2023

Contribution Health Dashboards: A Conversation with Alex Moreno

Next on our February selection is an interview with Alex Moreno by The Drop TimesAlka Elizabeth, in which Alex further breaks down and discusses the just mentioned Contribution Health Dashboards. As he highlights, these new dashboards will help uncover barriers to contribution and remedy the issues found this way.

Alex first talks about his beginnings with technology and his journey with Drupal which led to his current role as Drupal Innovation Coordinator at the Drupal Association. Then he talks in depth about the conception and development of the Contribution Health Dashboards, focusing on the technical challenges the team faced during development, as well as potential future possibilities of this new resource.

Read more about Contribution Health Dashboards

Next-Drupal 2.0: Making a Good Thing Even Better

We continue with the announcement of the release of the Next.js & Drupal integration, Next-Drupal 2.0, from Chapter Three’s John Faber. The main new feature of and the major reason for this release is the recent introduction of App Router to Next.js, which makes the already fast rendering even faster.

On top of the performance improvements with App Router, Next-Drupal 2.0 also boasts a streamlined developer experience, with the old Preview Mode getting replaced by a new feature called Draft Mode, which allows small changes to be made without having to do a full site rebuild for each one.

Read more about Next-Drupal 2.0

How Drupal Can Deliver Scalability and Flexibility for the Public Sector

Moving on with this month’s overview, we have an article from Pantheon’s Josh Koenig about the scalability and flexibility benefits of Drupal for public sector digital experiences. Straight away Josh highlights the main challenges of public sector websites, e.g. high-level security and accessibility, and points to Drupal as the ideal solution for these as well as for the fast evolving expectations people have from digital experiences.

According to Josh, one of Drupal’s core strengths is its composable nature, which allows organizations to build a more robust technology stack that better responds to their needs. Moreover, this composability also transforms work dynamics and streamlines architectural governance.

Read more about the benefits of Drupal for the public sector

Why you should care about using settings.local.php

Next up, this blog post by Michael Anello / ultimike of DrupalEasy breaks down why it’s so important for Drupal developers to make use of a settings.local.php when setting up their development environments. 

Namely, it allows developers to configure their local development environment in such a way that it fits the particular project they’re working on.

As Mike points out, the set up is quick and easy, with just two simple steps, and it’s wise to take care of it in the initial stages of setting up a new website.

Read more about using settings.local.php

Crafting A Winning Content Strategy for Your Drupal Site

In the next article from February, Greg O’Toole of Acquia takes a deep dive into creating a successful content strategy for a Drupal website on the Acquia Developer Portal blog.

He starts off with the basics of a robust content strategy, breaking down the essential elements of understanding your target audience and setting your goals accordingly, making use of the S.M.A.R.T. approach.

The rest of Greg’s guide is specific to Drupal, emphasizing its optimized SEO and accessibility capabilities, as well as its vast ecosystem of helpful modules, and resources for gauging the performance of your content strategy.

Read more about crafting a winning content strategy with Drupal

Drupal means innovation: Introducing the innovation hub

For the third time on this month’s list, we’re featuring Alex Moreno of the Drupal Association. In this post, he introduces the Drupal Innovation hub, which has three main goals: exploring innovation, providing inspiration and ideas, and contributing to the progress of the Drupal project.

While Drupal’s status of mature software makes it seem “boring” to newcomers and younger developers, Alex points out that “boring” actually means stable, proven, and reliable, with plenty of room for innovation thanks to this stability, combining the best of both worlds.

Read more about the Innovation hub

Satoshi Nakamoto's Drupal adventure

We’re concluding this month’s selection with a fun post by Dries about Satoshi Nakamoto, the mysterious figure behind the creation of Bitcoin, actually choosing Drupal as the CMS of choice for the relaunch of the Bitcoin website. This information comes from the private email conversations of Martti Malmi, an early contributor to the Bitcoin project, which he recently shared publicly.

Read more about Satoshi Nakamoto's Drupal adventure

Lightbulb lit up with a brain inside and ideas/connections coming out of it like tiny lights

If you enjoyed this recap, follow us on X and stay tuned so you don’t miss any new articles or podcast episodes.

Mar 19 2024
Mar 19

The most impactful customer experiences are data-driven. CDPs help organizations collect, unify, manage, and analyze customer data. This allows businesses to understand their customers better and deliver personalized experiences.

But selecting and implementing a CDP is not a straightforward journey. It’s a digital transformation that begins with organizations understanding what a CDP can do for them and how they can utilize the platform to their advantage.

Evaluating If You Need A CDP

Every organization likes to think they know their customers, but most are missing out. According to a study conducted by Mapp, an international provider of insight-led customer engagement, lack of customer insight is the biggest challenge in providing personalized experiences.

Successfully implementing a CDP can help fix this challenge. Submit this form to find out if your organization needs a CDP.

New call-to-action

The CDP Implementation Framework: Everything From Discovery To Implementation & Enablement

Implementing a Customer Data Platform (CDP) involves a structured approach encompassing discovery, strategy, implementation, and enablement.

Stage 1: Discovery

During the discovery phase, it's essential to gain a clear understanding of your organization's data landscape, business goals, and available resources. Key aspects include:

1. Data Maturity And Business Goals

To assess data maturity, consider the following:

  • Volume: How much data does your organization generate and collect?
  • Variety: What types of data are available (e.g., customer demographics, transaction history)?
  • Velocity: How quickly is data generated and updated?
  • Veracity: How reliable and accurate is the data?
  • Value: What insights can be derived from the data to drive business decisions?

For example, a retail company may have vast amounts of transaction data but lack comprehensive customer profiles.

2. Data Inventory And Quality Assessment

Cataloging existing data sources involves identifying where data resides, such as:

  • Customer Relationship Management (CRM) systems
  • Enterprise Resource Planning (ERP) systems
  • Web analytics platforms

Assessing data quality entails evaluating data accuracy, completeness, and consistency. For instance, organizations may discover inconsistencies in customer information across different databases, impacting marketing campaigns' effectiveness.

3. Stakeholder Engagement And Workflow

Engage stakeholders from various departments (e.g., marketing, sales, IT) to understand their data needs and ensure alignment with business objectives. Establish clear roles and responsibilities, such as:

  • Data stewards responsible for data governance
  • Analysts tasked with generating insights from customer data

Define workflows to streamline data collection, processing, and analysis. For example, establish protocols for updating customer profiles and sharing insights across teams.

Key Questions To Ask

Ask relevant questions to guide the discovery process.

Project & Business Objectives

  • What are the specific goals for this CDP implementation?
  • What problem are you trying to solve with the CDP?
  • What are your business goals and how does the CDP align with them?
  • What would be considered a success for the CDP implementation?
  • What are the current solutions and how can CDP improve them?​

Budget & Timelines

  • What is the budget for the CDP implementation?
  • Is there a fixed deadline or time constraints for the project?
  • Are there any financial limitations that need to be considered?​

Identify Stakeholders

  • Who are the primary stakeholders in this CDP project?
  • What are the needs and expectations of each stakeholder?
  • How will different stakeholders be involved in the project?​

Data Sources & Quality

  • What are the sources of your customer data?
  • What is the quality and maturity of the data you currently have?
  • Who owns the data and where does it come from?​

Segmentation & Identification Strategy

  • How will you segment your customer data?
  • What is your strategy for identifying and resolving customer identities?​

The Action Plan & Expectations

  • What are the most impactful outcomes you expect from the CDP?
  • How do you plan to monitor, measure, and capture the value of the CDP?​

Ensure answers to all of these questions to develop an effective CDP implementation strategy.

Stage 2: Strategy

The strategy phase focuses on developing a comprehensive plan to leverage the CDP effectively. Key considerations include:

1. Data Strategy Development

Define a data strategy aligned with business objectives and use cases. For example:

  • Personalization: Use customer data to deliver personalized experiences and targeted marketing campaigns.
  • Customer Retention: Identify at-risk customers and implement strategies to improve retention rates.

Plan implementation phases in a "crawl, walk, run" approach to prioritize high-impact use cases and ensure gradual adoption across the organization.

2. Customer Data Landscape Assessment

Assess the customer data landscape by identifying all data sources and their integration capabilities. Consider:

  • Online & Offline Data: Integrate data from online sources (e.g., website interactions, social media) and offline sources (e.g., in-store purchases, call center interactions).
  • Identity Resolution: Develop a strategy for resolving customer identities across different data sources to create unified customer profiles.

Define the universal data layer, including data points and naming conventions, to ensure consistency in data collection and storage.

3. Stakeholder Engagement & Collaboration

Ensure alignment across departments and stakeholders by:

  • Hosting workshops and collaborative sessions to gather input from various teams.
  • Establishing a governance structure to manage data access, usage, and privacy.
  • Define workflows and data ownership responsibilities to streamline collaboration and decision-making processes.

Stage 3: Implementation

During the implementation phase, the focus shifts to executing the plan and mapping data to the CDP effectively. Key steps include:

1. Data Mapping & Integration

Map data from various sources to the CDP to create a unified view of customer data. For example:

  • Integrate CRM data to track customer interactions and purchase history.
  • Combine website analytics data to understand customer behavior and preferences.
  • Implement identity resolution to merge duplicate customer records and create accurate customer profiles.

2. Identity Resolution

An important part of data implementation is identity resolution (IR). When there's a surge of customer data coming in from various channels, it can be quite challenging to filter through everything. An easy solution is if you have a Customer Data Platform (CDP).

Imagine records like this: 

Draco Malfoy

Draco

D. Malfoy

[      ]

Malfoy Manor

[      ]

[      ]

[      ]

Wiltshire, England

[email protected]

[      ]

[      ]

These three records are of the same person only. But more basic systems might mix the data up and create three separate Dracos. A CDP will use its IR powers to consolidate an example like this into a single customer profile. The resolved record would complete Mr. Malfoy’s profile.

Draco Malfoy

Malfoy Manor

Wiltshire, England

[email protected]

Stage 4: Enablement

The enablement phase involves preparing for operational deployment and deriving value from the CDP. Key activities include:

1. Provisioning & Training

Set up the production environment and train users on CDP functionalities, including:

  • Data ingestion and integration processes
  • Segmentation and targeting capabilities
  • Reporting and analytics features

Build segments, reports, and personalized campaigns to leverage customer data effectively in marketing initiatives.

2. Iteration & Scaling

Start with small, manageable goals for quick wins and iterate based on feedback and insights from the CDP. For example, test different segmentation strategies to identify high-value customer segments.

Users can also analyze campaign performance metrics to optimize targeting and messaging. Scale up over time by expanding the use of the CDP across departments and incorporating additional data sources and use cases.

Conclusion

Do you need more help in building a strategic roadmpa for a CDP implementation? Or are you not even sure if opting for a CDP is the right solution?

Submit the form to get personalized recommendations from our CDP experts.

New call-to-action

Mar 18 2024
Mar 18

Today we are talking about Mercury Editor, What it does, and how it could change your editorial life with guest Justin Toupin. We’ll also cover Webform Protected Downloads as our module of the week.

For show notes visit:
www.talkingDrupal.com/442

Topics

  • What is Mercury Editor
  • What is powering Mercury Editor
  • Do you see any risk building on top of Paragraphs
  • Does Mercury Editor cost anything
  • Can companies hire Aten to add features
  • What are some key features
  • What makes Mercury Editor unique
  • How stable is the content
  • What happens if Paragraphs stops being supported
  • How can the community help

Resources

Guests

Justin Toupin - atendesigngroup.com justin2pin

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan
John Picozzi - epam.com johnpicozzi
Anna Mykhailova - kalamuna.com amykhailova

MOTW

Correspondent

Martin Anderson-Clutz - mandclu

  • Brief description:
    • Have you ever wanted to have downloadable content on your website, only available to visitors who have filled out a webform? There’s a module for that.
  • Module name/project name:
  • Brief history
    • How old: created in Sep 2010 by berliner, but the most recent releases are by james.williams of Computer Minds
    • Versions available: 7.x-1.1 and 8.x-1.0-alpha2 versions available, the latter of which works with Drupal 9 and 10
  • Maintainership
    • Actively maintained, the latest release was a week ago
    • Security coverage
    • Introductory blog linked on the project page
    • Number of open issues: 18 open issues, none of which are bugs against the current branch
  • Usage stats:
  • Module features and usage
    • Having thought leadership content like white papers or reports gated behind a lead capture form is a common pattern for websites, and this module is designed to make that easy to set up
    • You use the module by adding a handler to your webform, similar to triggering an email send
    • In the configuration for your webform protected download handler you have options for how much verification you want for the download link, whether or not the link should expire after a period of time, and so on, in addition to uploading one or more files that can be downloaded by people who submit the webform
    • The module provides tokens for the download URLs, so you can easily include them in a submission confirmation message or email
Mar 18 2024
Mar 18

Wow, what an event!

We would like to thank you for contributing to the magic of Drupal Mountain Camp 2024 and making it tremendous success!

From the snow-capped peaks of learning to the comfy fireside chats of networking, the event was a one-of-a-kind experience that left a lasting imprint on all of us.

As I look back on the laughter-filled evenings and the insightful discussions that echoed through the venue to the fondue evening, I'm reminded of the incredible sense of community that defines us.

We are immensely grateful for the insightful presentations by our honoured speakers, the generous support from our valuable sponsors, and the dedication and hard work of our volunteers to ensure the event's success.

Together, we explored new ideas, shared knowledge, and forged meaningful connections within the Drupal community.

As we reflect on the success of this year's conference, we're already looking forward to what lies ahead for the next Drupal Mountain Camp.

Group Photo

We implore everyone to submit their feedback to each session they attended by going to the schedule and clicking on each session, then giving a quick anonymous feedback.

The schedule should still be available via the custom domain:
https://event.drupalmountaincamp.ch/drupal-mountain-camp-2024/schedule/

Furthermore, we would greatly appreciate all feedback regarding the conference as a whole to be submitted on the "Closing Session".

Here's some of the statistics that we calculated from the event.

  • 77 participants
  • 350+ coffees consumed
  • 63 Fondues eaten at Schatzalp
  • 39 People took the sled down Schatzalp
  • 0 Injuries
  • 11 Sponsors
  • 12 Team members
  • 6 Volunteers
  • 17.65% Diverse Speakers
  • 58 Posts in LinkedIn, Instagram Twitter and Mastodon
  • 236 Unique Visitors on LinkedIn since Nov 11
  • 25 issues worked on #MountainCamp2024

Participants per Country

  • 46    Switzerland (CH)
  • 6    Belgium (BE)
  • 5    United Kingdom (GB)
  • 4    Germany (DE)
  • 3    Finland (FI)
  • 3    France (FR)
  • 2    Slovenia (SI)
  • 2    United States (US)
  • 1    Australia (AU)
  • 1    Austria (AT)
  • 1    Bulgaria (BG)
  • 1    Portugal (PT)
  • 1    Spain (ES)
  • 1    Suriname (SR)

We're very grateful to have such an awesome media team to capture every single moment.

Official photos by Patrick Itten
https://foto.patrickitten.ch/drupal-mountain-camp-2024

Photos by Josef Kruckenberg
https://www.flickr.com/photos/185226958@N05/albums/72177720315270848/

Relive the recap here by Dan Lemon
https://youtu.be/Z6AX_gexOg0

Extended fondue and sledding with the little happy birthday surprise
https://youtu.be/BgBzHbveSdE

We were able to record all the keynote sessions along with all sessions that took place in the Pischa room.

You can find the session videos on our YouTube Channel, under the playlist title "Sessions - Drupal Mountain Camp 2024"

https://www.youtube.com/playlist?list=PL6C9y4dEueZhksow0hSYFsPKGIo2c735C

This is a reminder that the Aaron Winborn award nominations are open until Friday, March 29, 2024

This annual award recognizes an individual who demonstrates personal integrity, kindness, and above-and-beyond commitment to the Drupal community.
It includes a scholarship and travel stipend for the winner to attend DrupalCon North America and recognition in a plenary session at the event.

https://www.drupal.org/community/cwg/blog/nominations-are-now-open-for-the-2024-aaron-winborn-award

Drupal Switzerland Association plans to host further in-person events throughout the year, such as gatherings in Zurich, Bern, and hopefully somewhere in the Swiss Romandie area.

We will post new events to our meetup.com account, as well as cross-posting to our Drupal Switzerland Slack and also to Drupal Groups:
https://www.meetup.com/zurich-drupal-meetup/
https://groups.drupal.org/switzerland

Furthermore, we'd like to highlight these two upcoming events for the Drupal community.

Drupal Developer Days is an annual gathering of people loving, learning, and discussing all things relating to Drupal. This year it'll be hosted by Drupal Bulgaria in Burgas, by the seaside.

The event is planned to take place between June 26-28, 2024 at Burgas Free University in Burgas, Bulgaria.

Drupal Dev Days 2024 is going to be a 3-day event full of amazing sessions, workshops and discussions as well as various social events and other surprises. 

Find out more on their website
https://ddd2024.drupalcamp.bg/

You may have seen Mercè in Davos, the mascot for DrupalCon Barcelona. Kuoni-Tumlare will calculate out who won the contest for a free ticket to DrupalCon Barcelona 2024.

This year's DrupalCon takes place from September 24-27, 2024 at the stunning Centre de convencions internacional de Barcelona (CCIB).

Barcelona's accessibility ensures that this event is within reach for all Drupal enthusiasts.

https://events.drupal.org/barcelona2024

We'd like to extend our deepest gratitude to our valuable sponsors, whose generous support made Drupal Mountain Camp 2024 possible.

To our esteemed speakers, thank you for sharing your expertise and insights, enriching the experience for all attendees.

A heartfelt thank you to our dedicated volunteers, whose hard work and enthusiasm ensured the smooth execution of every detail.

And last but certainly not least, to all our participants, thank you for bringing your passion and energy, making Drupal Mountain Camp a vibrant and unforgettable gathering.

Your contributions have truly made a difference and have left a lasting impact on our community.

Until we meet again, let's continue to collaborate, learn, and grow together in the spirit of Drupal.

On behalf of the Drupal Mountain Camp organisation team,
Dan Lemon

Mar 18 2024
Mar 18

Creating user-friendly and stylish web pages can sometimes make you nervous, and maybe you want to turn off your computer - does that sound familiar? Even using popular CMSs, including Drupal, sometimes it is difficult to understand this issue and create a functional, modern website. Drupal can offer several effective solutions, and today, we will look at one of them - the Drupal Paragraphs module.
Creating a home page, or even a regular page on a website, requires much effort and time unless you're a professional web developer. Many people with initial design skills face similar problems and spend much time searching for solutions. Often, everything comes with experience. Through trial and error, reading various articles, and watching videos on YouTube, we are looking for an opportunity to achieve the goal.

What is the Paragraphs module for in Drupal?

The capabilities of the Paragraphs module in Drupal are quite wide; it includes all the necessary functions. The module will enable you to develop and structure various content blocks on the page. Each block can be a gallery of images, text, or other types of content that can be added, deleted, or moved. This is very convenient and saves a lot of time. So, even a novice developer can quickly create a website with different types of content. But, for some options, you need a basic understanding of CSS.
Various methods are used to simplify and speed up the creation of web pages as much as possible. What is surprising is that these methods are common. The developers applied familiar functions and got amazing results.
For example, it uses the principle of templates and copy-paste. You don't have to create each block or paragraph separately. You can create templates that you can use when it's necessary. If you change the template to the settings, these changes are reflected wherever you use it. We can say that this is an advanced version of smart copy-paste.
At the same time, the module has flexible and wide settings, which make it possible to create paragraphs for specific projects. Each of the blocks you have created can be edited. After editing, for example, changing the text order, location, etc., you can move on to more detailed settings.

Adaptability by default

Sometimes, page design that automatically adapts to different types of mobile devices is a problem for those who design websites on a computer.
Some modules, similar in purpose to the Drupal Paragraphs module, may have some difficulties with responsive design. For example, if we are talking about Drupal Layout Builder, everything is more complex, and in our article, we will look at this issue in more detail. No additional solutions are required if you are using the Drupal Paragraphs module. The module initially has this functionality and adapts to smartphones and tablets independently. You just need to specify responsive layouts for paragraphs.

How to utilize Paragraphs to create complex page layouts?

  1. First, we need to add a content type (Home-Administration-Structure-Content types). It would be best to give it a unique name, which will appear on the Add content page. At this stage, you will also have access to basic settings and the ability to add a short description. Next, click "save."
  2. Going to Home-Administration-Structure-Paragraph types in the "Label" field, we need to enter the name we gave on the first step. Here, you can also add an icon and description.
  3. Now, we need to add fields to the paragraph type (Home-Administration-Structure-Paragraph types-Image overlay-Manage fields). The drop-down menu gives us various options and the ability to customize the settings. You can create a paragraph with multiple fields, for example - question/answer for an FAQ page. The names of the fields will be displayed; please keep this in mind.
  4. Next, you need to return to "Content types" again, click "Manage fields" next to the name that we came up with earlier, and add it to Paragraph using the drop-down menu (Reference revisions menu subsection). In the Field Settings tab, we also see additional settings.
  5. For each content type, you can select paragraph types. In "Paragraph types," this is displayed as a list. This will allow us to add one or more paragraphs to the content types. If you don't select anything, all types will be available.
  6. Also, you can create one type of paragraph "within" another. For example, this could be several pictures with descriptions located horizontally within one gallery.

Regardless of whether you need to add an image gallery or text, the steps are pretty much the same. The only difference is that when creating a gallery, you will add images.

Adding your own classes

If necessary, you can add your own classes to CSS that extend the capabilities. To do this, go to Manage fields, and in the “Add a new field” menu, select Reference/Other. Next, in the Field settings tab, open the Type of item in the Reference menu and select Classy paragraphs style.
Next, we define the classes (Home-Administration-Structure, Add classy paragraph style). Now, you can bind a class to a paragraph. The class can be, for example, a background image or color. Now, you can add classes to your code and use them on the page.

Drupal Layout Builder vs. Paragraphs

Of course, other modules in Drupal have such capabilities. An example is Drupal Layout Builder. Both modules have similar goals but differ in functionality. You can achieve approximately the same goals using both of these modules, but the approach is different. Without going into details, we can say that the Drupal Paragraphs module is simpler. This module allows you to create web pages without having deep knowledge of Drupal; it is intuitive.
In addition, there is the problem of adaptive design. There are more differences, but we will not describe them all in this article; that is not our goal. Responsive design is what every modern web developer wants, and this is not an exaggeration. If you use the Drupal Paragraphs module, this feature is available to you by default. Drupal Layout Builder to create a responsive design will require additional Bootstrap installation; in some cases, more is needed.
The ease with which you can create pages at first is surprising, especially for people who don’t have much experience. After all, many people believe that creating successful websites with various types of content is complex and requires a professional. If you want to learn more about the features of working with the Drupal Layout Builder module, read our material on this topic. On the other hand, each module has its pros and cons, but each allows complex page layouts. Each user will give his or her own answer to the question of which of the two modules is better.

The compatibility of the Paragraphs module with other Drupal modules

Another huge plus is the ability to work generally with other useful Drupal modules:

  • DrupalView;
  • Drupal Panels;
  • Drupal Reference;
  • Drupal Display Suite;

And some others.

3 Actionable tips for maintaining a well-performing Drupal site with Paragraphs

Here are some content management best practices:
Tip #1. The translation feature can be pretty useful, but it needs to be used correctly. The module will automatically translate most text content on the page. However, some types of content are not supported. In particular, you may see a “not supported” label next to the Paragraphs field, and you should not enable translation for this field. However, you can allow translation of other types of text on the page. What to do with those areas that were left without translation? You can hide them by clicking on the checkbox in the “Content language and translation” window.

Tip #2. You can add several types of paragraphs in one field. To change the order, simply drag them with your mouse. Content Management with Paragraphs is effortless.

Tip #3. Keep it simple. For example, you can also use this module to create a simple slideshow on a page. And there is no need to connect additional modules. Select Slick_slider (Home-Add content, Page_Paragraph), and add an image. The module will create a slideshow from them. As you can see, nothing complicated.

Conclusion

In this article, we got acquainted with the Paragraphs module, which has extensive capabilities for creating and managing content on website pages. In one article, we cannot cover all the details about the Paragraphs. The article would be too long. But, with new knowledge, you will be able to create attractive pages for your website. Still have questions - just let your Drupal company know! 

P.S. It is advisable to seek assistance from experts who specialize in areas where you may have weaknesses. This approach will help to minimize the wastage of both time and money.

Mar 16 2024
Mar 16

There is three types of configuration data :

The Simple Configuration API

  • Used to store unique configuration object.

  • Are namespaced by the module_name.

  • Can contain a list of structured variables (string, int, array, ..)

  • Default values can be found in Yaml : config/install/module_name.config_object_name.yml

  • Have a schema defined in config/schema/module_name.schema.yml

Code example :

The States

  • Not exportable, simple value that hardly depend of the environment.

  • Value can differ between environment (e.g. last_cron, maintenance_mode have different value on your local and on the production site)

The Entity Configuration API

  • Configuration object that can be multiple (e.g. views, image style, ckeditor profile, ...).

  • New Configuration type can be defined in custom module.

  • Have a defined schema in Yaml.

  • Not fieldable.

  • Values can be exported and stored as Yaml, can be stored by modules in config/install

Code example :

  https://www.drupal.org/node/1809494

Store configuration object in the module :

Config object (not states) can be stored in a module and imported during the install process of the modules.

To export a config object in a module you can use the configuration synchronisation UI at /admin/config/development/configuration/single/export

Select the configuration object type, then the object, copy the content and store it in your custom module config/install directory following the name convention that is provided below the textarea.

You can also use the features module that is now a simple configuration packager.

If after the install of the module, you want to update the config object, you can use the following drush command :

Configuration override system

Remember the variable $conf in settings.php in D6/D7 for overriding variables.

In D8, you can also override variable from the configuration API:

You can also do overrides at runtime.

Example: getting a value in a specific languages :

Drupal provide a storage for override an module can specify her own way of override, for deeper informations look at :

https://www.drupal.org/node/1928898

Configuration schema

The config object of Config API and of the configuration entity API have attached schema defined in module_name/config/install/module_name.schema.yml

These schema are not mandatory, but if you want to have translatable strings, nor form configuration / consistent export, you must take the time to implement the schema for your configuration object. However if you don't want to, you can just implement the toArray() method in your entity config object class.

Example, docs and informations : https://www.drupal.org/node/1905070

Configuration dependencies calculation

Default is in the .info of the module that define the config object like in D6/D7

But config entity can implements calculateDependencies() method to provide dynamic dependencies depending on config entity values.

Think of Config entity that store field display information for content entities specific view modes, there a need to have the module that hold the fields / formatters in dependencies but these are dynamic depending on the content entity display.

More information : https://www.drupal.org/node/2235409

Mar 16 2024
Mar 16

Ressources

Migrate in Drupal 8

Migrate is now included in the Drupal core for making the upgrade path from 6.x and 7.x versions to Drupal 8.

Drupal 8 has two new modules :
Migrate: « Handles migrations »
Migrate Drupal : « Contains migrations from older Drupal versions. »

None of these module have a User Interface.

« Migrate » contains the core framework classes, the destination, source and process plugins schemas and definitions, and at last the migration config entity schema and definition.

« Migrate Drupal » contains implementations of destination, sources and process plugins for Drupal 6 and 7 you can use it or extend it, it's ready to use. But this module doesn't contain the configuration to migrate all you datas from your older Drupal site to Drupal 8.

The core provides templates of migration configuration entity that are located under each module of the core that needs one, under a folder named 'migration_templates' to find all the templates you can use this command in your Drupal 8 site:

To make a Drupal core to core migration, you will find all the infos here : https://www.Drupal.org/node/2257723 there is an UI in progress for upgrading.

A migration framework

Let have a look at each big piece of the migration framework :

Source plugins

Drupal provides an interface and base classes for the migration source plugin :

  • SqlBase : Base class for SQL source, you need to extend this class to use it in your migration.
  • SourcePluginBase : Base class for every custom source plugin.
  • MenuLink: For D6/D7 menu links.
  • EmptySource (id:empty): Plugin source that returns an empty row.
  • ...

Process plugins

There is the equivalent of the D7 MigrateFieldHandler but this is not reduced to fields or to a particular field type.
Its purpose is to transform a raw value into something acceptable by your new site schema.

The method transform() of the plugin is in charge of transforming your $value or skipping the entire row if needed.
If the source property has multiple values, the transform() will happen on each one.

Drupal provides migration process plugin into each module of the core that needs it (for the core upgrade),
To find out which one and where it is located you can use this command :

Destination plugins

Destination plugins are the classes that handle where your data are saved in the new Drupal 8 sites schemas.

Drupal provides a lot of useful destination classes :

  • DestinationBase : Base class for migrate destination classes.
  • Entity (id: entity) : Base class for entity destinations.
  • Config (id: config) : Class for importing configuration entities.
  • EntityBaseFieldOverride (id: entity:base_field_override): Class for importing base field.
  • EntityConfigBase : Base class for importing configuration entities.
  • EntityImageStyle (id: entity:image_style): Class for importing image_style.
  • EntityContentBase (id: entity:%entity_type): The destination class for all content entities lacking a specific class.
  • EntityNodeType: (id: entity:node_type): A class for migrate node type.
  • EntityFile (id: entity:file): Class for migrate files.
  • EntityFieldInstance: Class for migrate field instance.
  • EntityFieldStorageConfig: Class for migrate field storage.
  • EntityRevision, EntityViewMode, EntityUser, Book...
  • And so more…

Builder plugins:

"Builder plugins implement custom logic to generate migration entities from migration templates. For example, a migration may need to be customized based on the data that is present in the source database; such customization is implemented by builders." - doc API

This is used in the user module, the builder create a migration configuration entity based on a migration template and then add fields mapping to the process, based on the data in the source database. (@see /Drupal/user/Plugin/migrate/builder/d7/User)

Id map plugins:

"It creates one map and one message table per migration entity to store the relevant information." - doc API
This is where rollback, update and the map creation are handled.
Drupal provides the Sql plugin (@see /Drupal/migrate/Plugin/migrate/id_map/Sql) based on the core base class PluginBase.

And we are talking only about core from the beginning.
All the examples (That means docs for devs) are in core !

About now :

While there *almost* a simple UI to use migration in Drupal 8 for Drupal to Drupal, Migrate can be used for every kind of data input. The work is in progess for http://Drupal.org/project/migrate_plus to bring an UI and more source plugins, process plugins and examples. There already is the CSV source plugin and a pending patch for the code example. The primary goal of « migrate plus » is to have all the features (UI, Sources, Destinations.. ) of the Drupal 7 version.

Concrete migration

(migration with Drupal 8 are made easy)

I need to migrate some content with image, attached files and categories from custom tables in an external SQL database to Drupal.

To begin shortly :

  • Drush 8 (dev master) and console installed.
  • Create the custom module (in the code, I assume the module name is “example_migrate”):
    $ Drupal generate:module
    or create the module by yourself, you only need the info.yml file.
  • Activate migrate and migrate_plus tools
    $ Drupal module:install migrate_tools
    or
    $ drush en migrate_tools
  • What we have in Drupal for the code example :
    • a taxonomy vocabulary : ‘example_content_category’
    • a content type ‘article’
    • some fields: body, field_image, field_attached_files, field_category
  • Define in settings.php, the connexion to your external database:

We are going to tell migrate source to use this database target. It happens in each migration configuration file, it’s a configuration property used by the SqlBase source plugin:

This is one of the reasons SqlBase has a wrapper for select query and you need to call it in your source plugin, like $this->select(), instead of building the query with bare hands.

N.B. Each time you add a custom yml file in your custom module you need to uninstall/reinstall the module for the config/install files to imports. In order to avoid that, you can import a single migration config file by copy/paste in the admin/config configuration synchronisation section.

The File migration

The content has images and files to migrate, I suppose in this example that the source database has a unique id for each file in a specific table that hold the file path to migrate.

We need a migration for the file to a Drupal 8 file entity, we write the source plugin for the file migration:

File: src/Plugin/migrate/source/ExampleFile.php

We have the source class and our source fields and each row generate a path to the file on my local disk.

But we need to transform our external file path to a local Drupal public file system URI, for that we need a process plugin. In our case the process plugin will take the external filepath and filename as arguments and return the new Drupal URI.

File: src/Plugin/migrate/process/ExampleFileUri.php

We need another process plugin to transform our source date values to timestamp (created, changed), as the date format is the same across the source database, this plugin will be reused in the content migration for the same purpose:

File: src/Plugin/migrate/process/ExampleDate.php

For the destination we use the core plugin: entity:file.

Now we have to define our migration config entity file, this is where the source, destination and process (field mappings) are defined:

File: config/install/migrate.migration.example_file.yml

We are done for the file migration, you can execute it with the migrate_tools (of the migrate_plus project) drush command:

The Term migration

The content has categories to migrate.
We need to import them as taxonomy term, in this example I suppose the categories didn't have unique ids, it is just a column of the article table with the category name…

First we create the source :

File: src/Plugin/migrate/source/ExampleCategory.php

And we can now create the migration config entity file :

File: config/install/migrate.migration.example_category.yml

This is done, to execute it :

The Content migration

The content from the source has an html content, raw excerpt, image, attached files, categories and the creation/updated date in the format Y-m-d H:i:s

We create the source plugin:

File: src/Plugin/migrate/source/ExampleContent.php

Now we can create the content migration config entity file :

File: config/install/migrate.migration.example_content.yml

Finally, execute it :

Group the migration

Thanks to migrate_plus, you can specify a migration group for your migration.
You need a to create a config entity for that :

File: config/install/migrate_plus.migration_group.example.yml

Then in your migration config yaml file, be sure to have the line migration_group next to the label:

So you can use the command to run the migration together, and the order of execution will depend on the migration dependencies:

I hope that you enjoyed our article.

Best regards,

Delta https://www.drupal.org/u/delta

Mar 16 2024
Mar 16

At Studio.gd we love the Drupal ecosystem and it became very important to us to give back and participate.
Today we're proud to announce a new module that we hope will help you !

Inline Entity Display module will help you handle the display of referenced entity fields directly in the parent entity.
For exemple if you reference a taxomony "Tags" to an Article node, you will be able directly in the manage display of the article to display tags' fields. It can become very usefull with more complex referenced entity like field collection for exemple.

VOIR LE MODULE : https://www.drupal.org/project/inline_entity_display


Features

- You can control, for each compatible reference field instances, if the fields from the referenced entities would be available as extra fields. Disabled by default.

- You can manage the visibility of the referenced entities fields on the manage display form. Hidden by default.

- View modes are added to represent this context and manage custom display settings for the referenced entities fields in this context {entity_type}_{view_mode} Example: "Node: Teaser" is used to render referenced entities fields, when you reference an entity into a node, and you view this node as a teaser if there are no custom settings for this view mode, fields are rendered using the default view mode settings.

- Extra data attributes are added on the default fields markup, so the field of the same entity can be identified.

Compatible with Field group on manage display form.

Compatible with Display Suite layouts on manage display form.

Requirements

- Entity API
- One of the compatible reference fields module.

Tutorials

simplytest.me/project/inline_entity_display/7.x-1.x
The simplytest.me install of this module will come automatically with these modules: entity_reference, field_collection, field_group, display suite.

VOIR LE MODULE : https://www.drupal.org/project/inline_entity_display

We are currently developping a similar module for Drupal 8 but more powerful and more flexible, Stay tuned !

Mar 15 2024
Mar 15

We look into the challenges and solutions in managing Drupal and other website updates across hundreds of websites, a topic brought to life by members of Lullabot's Support and Maintenance team and Jenna Tollerson from the State of Georgia.

Learn how Lullabot deals with update processes, drastically reducing manual labor while enhancing security and efficiency through automation.

"It's almost like adding another whole developer to your team!"

Mar 14 2024
Mar 14

Introduction

In 2023, Tesla’s vehicle deliveries grew 38% YoY to 1.81 million while production grew 35% YoY to 1.85 million.  The car making company’s success has been shaped by its design thinking approach, built on several key principles:

  • Customer-Centricity: Tesla recognized the growing demand for more affordable electric vehicles but identified gaps in the market offerings. The Model 3 targeted a lower price point than previous Tesla models,making it more accessible to a wider audience. Over 400,000 pre-orders for the Model 3 soon after its unveiling, showcases significant customer demand for a more affordable electric car.
  • Rapid Prototyping And Iteration:  Rapid prototyping allows for quick testing of concepts with users, ensuring solutions address their actual needs and desires. Rapid prototyping enables early identification of flaws, minimizing wasted time and resources on solutions that don't resonate with users.
  • Tech-Meets-Design: Over two million Tesla vehicles globally equipped with Autopilot displays the integration of technology and design. This also demonstrates customer interest in advanced driver-assistance features, showcasing Tesla's ability to blend cutting-edge technology seamlessly into its vehicle designs.

It's evident from Tesla's example that design thinking is more of a mindset and approach to problem-solving and innovation. 

What is Design Thinking?

What-Is-Design-Thinking

According to the Interaction Design Foundation, design thinking meaning is explained as follows:

Design thinking methodology is a non-linear, iterative process that teams use to understand users, challenge assumptions, redefine problems and create innovative solutions to prototype and test. It is most useful to tackle ill-defined or unknown problems and involves five phases: Empathize, Define, Ideate, Prototype and Test.

  • Empathize: Gain a deep understanding of end users, their challenges, and expectations through observation, interviews, and surveys. This immersion helps design teams grasp the problems to solve effectively.
  • Define: Craft a clear problem statement with a measurable goal that aligns with user needs. Through collaboration with stakeholders, refine the statement until everyone agrees on the precise challenge to address.
  • Ideate: Generate diverse ideas to tackle the defined problem using brainstorming and other ideation techniques. Collaborate with stakeholders to explore innovative solutions.
  • Prototype: Create testable prototypes or scaled-down versions of the product, collaborating with stakeholders to select promising concepts. Utilize various prototyping tools, from simple paper models to interactive digital prototypes.
  • Test: Evaluate the prototype's effectiveness with target users, gathering feedback to refine and improve the solution before further development or implementation. Conduct testing sessions to observe user interactions, collect feedback, and analyze usability data.

Design Thinking In Action: How Airbnb Achieved It

Airbnb immersed themselves in the lives of their potential customers by visiting New York, renting a camera, and spending time with people in their homes to capture quality pictures.

This process, driven solely by intuition and lacking preliminary studies, wasn't scalable or highly technical, but it proved effective to understand the brand’s target audience.

The team diverged from traditional business methods, opting instead to follow the steps of the design thinking methodology: empathize, define, design, prototype, and test. 

Today, design thinking remains ingrained in Airbnb's culture, influencing their creative processes, product iteration, and community engagement. Its design system initiative resulted in a cohesive set of design components and tools for improved team collaboration.

Airbnb-Design-System

Airbnb has seen exponential growth, revolutionizing the tourism industry and achieving a valuation of $110 billion. With over 1 billion stays booked and millions of listings worldwide, their impact is visible.

Lessons from Airbnb’s Design Thinking process:

  1. Prioritize human experience: Ground your work in real human behaviors and needs to build trust and create desirable products.
  2. Embrace experimentation and iteration: Proactively test creative hypotheses and adapt based on feedback, without being solely driven by data.
  3. Take calculated risks: Encourage team members to make small bets on new features and learn from both successes and failures.

What Are The Advantages of Design Thinking?

Design thinking in software development includes a creative approach to problem-solving that is focused on the users. Various industries have understood why design thinking is important. Mckinsey reported that companies that score highest in its Design Index (MDI) outperformed industry-benchmark growth by as much as two to one.

Here are the benefits of design thinking:

Customer-Centricity Promotes Customer-Centricity

Prioritizes customer needs and preferences, leading to the development of products and services tailored to user requirements.

Enhances-Agility-and-Adaptability Enhances Agility & Adaptability

Encourages creative exploration and experimentation within the organization, driving the development of innovative solutions.

Culture-of-Innovation Fosters A Culture Of Innovation

Leads to creative experimentation, driving the development of novel solutions.

Improved-Problem-Solving Improved Problem Solving

Equips teams to identify, address, and overcome challenges, leading to innovative problem-solving approaches.

Business-Integration Business Integration

Seamlessly integrates design thinking into organizational processes, facilitating alignment with strategic goals.

Enhanced-Acceptance-Rate Enhanced Product Usability &Acceptance Rate

Helps develop intuitive, easy-to-use products that meet user expectations, leading to higher adoption rates.

Resource-Cutdown Resource Optimisation

Streamlines the innovation process by minimizing unnecessary steps and focusing on what truly matters, saving resources.

Tangible-Results Tangible Results

Empowers teams to achieve user-centric results, leading to a more engaged workforce and higher productivity.

Challenges Of Implementing Design Thinking

While design thinking offers numerous benefits, its implementation comes with a set of challenges requiring organizations to navigate potential obstacles to maximize its effectiveness.

  • Resistance To Change: Organizations may face resistance to change, especially if the existing culture prioritizes traditional, non-collaborative approaches. Overcoming this resistance requires strong leadership commitment and communication.
  • Resource Crunch: The design thinking process demands significant time, effort, and resources, posing challenges for organizations with tight schedules or limited budgets. Balancing the investment with expected returns becomes crucial.
  • Lack Of Skills: Design thinking requires a specific skill set that may not be readily available within the organization. Hiring or training employees proficient in design thinking methodologies becomes essential but can be challenging.
  • Ambiguity: Design thinking embraces ambiguity and iteration, which can be unsettling for organizations seeking concrete, predictable outcomes. This uncertainty may lead to discomfort among stakeholders.
  • Inadequate Integration with Business Processes: Failure to seamlessly integrate design thinking into experience design or business processes may result in a disjointed approach. The challenge lies in aligning design thinking with broader organizational strategies and structures.
  • Overemphasis on Empathy: While empathy is a cornerstone of design thinking, an overemphasis on it may lead to solutions that are overly subjective. Striking a balance between empathy and objective analysis is crucial for effective problem-solving.
  • Difficulty in Scaling: Successfully implementing design thinking in a small team does not guarantee scalable success across the entire organization. Scaling up requires careful planning and may encounter resistance at different levels.
  • Measuring Impact: Quantifying the impact of design thinking in terms of ROI can be challenging. The outcomes are often qualitative, making it difficult to measure success in traditional business metrics.

Conclusion

There are many ways to approach problem-solving and innovation. Design thinking is just one of them. While it’s beneficial to learn how others have approached problems and evaluate if you have the same tools at your disposal, it can be more important to chart your own course to deliver what users and customers truly need.

Want your business challenges solved by design thinking in action? Learn more by speaking with an expert.

Mar 14 2024
Mar 14

With just one week until we meet in person for MidCamp 2024, book your ticket before the standard discount pricing ends on March 14, 11.59pm CT to save $100!

Session Schedule

We’ve got a great line-up this year! All sessions on Wednesday and Thursday (March 20/21) are included in the price of your MidCamp registration. We encourage you to start planning your days -- and get ready for some great learning opportunities!

Expanded Learning Tickets

Know any students or individuals seeking to expand their Drupal knowledge?

We have heavily discounted tickets ($25!) available for students and those wanting to learn more about Drupal to join us at MidCamp and learn more about the community!

There are sessions for everyone—topics range from Site Building and DevOps to Project Management and Design.

Get your tickets now!

Volunteer for some exclusive swag!

If you know you'll be joining us in Chicago, why not volunteer some of your spare time and get some exclusive swag in return! Check out our non-code opportunities to get involved.

Stay In The Loop

Please feel free to ask on the MidCamp Slack and come hang out with the community online. We will be making announcements there from time to time. We’re also on Twitter and Mastodon.

We can’t wait to see you next week! 

The MidCamp Team

Mar 13 2024
Mar 13
Marc BergerMarc Berger

Marc Berger

Senior Backend Engineer

Always looking for a challenge, Marc tries to add something new to his toolbox for every project and build — be it a new CSS technology, creating custom APIs, or testing out new processes for development.

March 13, 2024

Recently, one of our clients had to retrieve some information from their Drupal site during a CI build. They needed to know the internal Drupal path from a known path alias. Common Drush commands don’t provide this information directly, so we decided to write our own custom Drush command. It was a lot easier than we thought it would be! Let’s get started.

Note: This post is based on commands and structure for Drush 12.

While we can write our own Drush command from scratch, let’s discuss a tool that Drush already provides us: the drush generate command. Drush 9 added support to generate scaffolding and boilerplate code for many common Drupal coding tasks such as custom modules, themes, services, plugins, and many more. The nice thing about using the drush generate command is that the code it generates conforms to best practices and Drupal coding standards — and some generators even come with examples as well. You can see all available generators by simply running drush generate without any arguments.

Step 1: Create a custom module

To get started, a requirement to create a new custom Drush command in this way is to have an existing custom module already in the codebase. If one exists, great. You can skip to Step 2 below. If you need a custom module, let’s use Drush to generate one:

drush generate module

Drush will ask a series of questions such as the module name, the package, any dependencies, and if you want to generate a .module file, README.md, etc. Once the module has been created, enable the module. This will help with the autocomplete when generating the custom Drush command.

drush en

Step 2: Create custom Drush command boilerplate

First, make sure you have a custom module where your new custom Drush command will live and make sure that module is enabled. Next, run the following command to generate some boilerplate code:

drush generate drush:command-file

This command will also ask some questions, the first of which is the machine name of the custom module. If that module is enabled, it will autocomplete the name in the terminal. You can also tell the generator to use dependency injection if you know what services you need to use. In our case, we need to inject the path_alias.manager service. Once generated, the new command class will live here under your custom module:

/src/Drush/Commands

Let’s take a look at this newly generated code. We will see the standard class structure and our dependency injection at the top of the file:

get('token'),
      $container->get('path_alias.manager'),
    );
  }

Note: The generator adds a comment about needing a drush.services.yml file. This requirement is deprecated and will be removed in Drush 13, so you can ignore it if you are using Drush 12. In our testing, this file does not need to be present.

Further down in the new class, we will see some boilerplate example code. This is where the magic happens:

/**
   * Command description here.
   */
  #[CLI\Command(name: 'custom_drush:command-name', aliases: ['foo'])]
  #[CLI\Argument(name: 'arg1', description: 'Argument description.')]
  #[CLI\Option(name: 'option-name', description: 'Option description')]
  #[CLI\Usage(name: 'custom_drush:command-name foo', description: 'Usage description')]
  public function commandName($arg1, $options = ['option-name' => 'default']) {
    $this->logger()->success(dt('Achievement unlocked.'));
  }

This new Drush command doesn’t do very much at the moment, but provides a great jumping-off point. The first thing to note at the top of the function are the new PHP 8 attributes that begin with the #. These replace the previous PHP annotations that are commonly seen when writing custom plugins in Drupal. You can read more about the new PHP attributes.

The different attributes tell Drush what our custom command name is, description, what arguments it will take (if any), and any aliases it may have.

Step 3: Create our custom command

For our custom command, let’s modify the code so we can get the internal path from a path alias:

/**
   * Command description here.
   */
  #[CLI\Command(name: 'custom_drush:interal-path', aliases: ['intpath'])]
  #[CLI\Argument(name: 'pathAlias', description: 'The path alias, must begin with /')]
  #[CLI\Usage(name: 'custom_drush:interal-path /path-alias', description: 'Supply the path alias and the internal path will be retrieved.')]
  public function getInternalPath($pathAlias) {
    if (!str_starts_with($pathAlias, "/")) {
      $this->logger()->error(dt('The alias must start with a /'));
    }
    else {
      $path = $this->pathAliasManager->getPathByAlias($pathAlias);
      if ($path == $pathAlias) {
        $this->logger()->error(dt('There was no internal path found that uses that alias.'));
      }
      else {
        $this->output()->writeln($path);
      }

    }
    //$this->logger()->success(dt('Achievement unlocked.'));
  }

What we’re doing here is changing the name of the command so it can be called like so:

drush custom_drush:internal-path or via the alias: drush intpath

The is a required argument (such as /my-amazing-page) because of how it is called in the getInternalPath method. By passing a path, this method first checks to see if the path starts with /. If it does, it will perform an additional check to see if there is a path that exists. If so, it will return the internal path, i.e., /node/1234. Lastly, the output is provided by the logger method that comes from the inherited DrushCommands class. It’s a simple command, but one that helped us automatically set config during a CI job.

Table output

Note the boilerplate code also generated another example below the first — one that will provide output in a table format:

/**
   * An example of the table output format.
   */
  #[CLI\Command(name: 'custom_drush:token', aliases: ['token'])]
  #[CLI\FieldLabels(labels: [
    'group' => 'Group',
    'token' => 'Token',
    'name' => 'Name'
  ])]
  #[CLI\DefaultTableFields(fields: ['group', 'token', 'name'])]
  #[CLI\FilterDefaultField(field: 'name')]
  public function token($options = ['format' => 'table']): RowsOfFields {
    $all = $this->token->getInfo();
    foreach ($all['tokens'] as $group => $tokens) {
      foreach ($tokens as $key => $token) {
        $rows[] = [
          'group' => $group,
          'token' => $key,
          'name' => $token['name'],
        ];
      }
    }
    return new RowsOfFields($rows);
  }

In this example, no argument is required, and it will simply print out the list of tokens in a nice table:

------------ ------------------ ----------------------- 
  Group        Token              Name                   
------------ ------------------ ----------------------- 
  file         fid                File ID                
  node         nid                Content ID
  site         name               Name
  ...          ...                ...

Final thoughts

Drush is a powerful tool, and like many parts of Drupal, it’s expandable to meet different needs. While I shared a relatively simple example to solve a small challenge, the possibilities are open to retrieve all kinds of information from your Drupal site to use in scripting, CI/CD jobs, reporting, and more. And by using the drush generate command, creating these custom solutions is easy, follows best practices, and helps keep code consistent.

Further reading

Making the web a better place to teach, learn, and advocate starts here...

When you subscribe to our newsletter!

Mar 13 2024
Mar 13

Randy Fay, the maintainer of DDEV discusses the key features and functionalities of DDEV, a Docker-based development environment that streamlines setting up and managing local development for applications (no Docker knowledge is required). Whether you're creating applications in Python, PHP, or other languages, DDEV will save you tremendous time and effort. It also works great for managing multiple projects, or working with a large distributed team, ensuring everyone’s configurations remain in sync.

Randy also demos DDEV, showcasing how fast and easy it is to set up a local Drupal development environment quickly. Additionally, he touches upon the history and future of DDEV, and the critical role of the DDEV user community in both supporting the project and shaping it’s development.

This interview is perfect for any developer interested in efficient development tools, current DDEV users, or anyone curious about local development technologies and best practices.

[embedded content]


For a transcript of this video, see The DDEV Local Development Environment- Talking with Randy Fay

Links

Image by Daniel Agrelo from Pixabay

Mar 13 2024
Mar 13

Beta version 1 of a new contributed module Bill of Lading (BOL) has been released. This first incarnation adds a drush command, bol, which generates a list of Drupal structures present on the site, such as:

  • blocks
  • block types
  • content types
  • content type fields
  • filter formats
  • group relationship
  • group role
  • group type
  • image styles
  • media types
  • paragraphs
  • user roles
  • views
  • vocabularies
  • webforms
  • workflows

All of the information in the bill of lading is discoverable at various places in Drupal's admin UI. This module brings the information together in one place, and is particularly useful when doing a site inventory to determine the site's architecture.

The output is available in all supported drush output formats using the --format switch (drush help bol for a list).

Enabling the module in the usual way will add a drush command, bol. The command

drush help bol

will provide syntax and option information. The module will analyze the configuration yaml files, so ensure that the site configuration has been exported (drush cex).

Mar 13 2024
Mar 13

Welcome back to “Skills Upgrade” a Talking Drupal mini-series following the journey of a D7 developer learning D10. This is episode 2.

Topics

  • Review Chad's goals for the previous week
    • DDEV Installation
    • Docker for Mac vs other options
    • IDE Setup
  • Review Chad's questions
  • Tasks for the upcoming week
    • DDEV improve performance
    • Install Drupal 10
    • Install drupal/core dependencies
    • Configure and test phpcs
    • Test phpstan
    • Set up settings.local.php
    • Install devel module

Resources

DDEV Performance
DDEV Quickstart
Drupal Core Dependencies
How to Implement Drupal Code Standards
Running PHPStan On Drupal Custom Modules

Why you should care about using settings.local.php

Rancher Desktop

Chad's Drupal 10 Learning Curriclum & Journal
Chad's Drupal 10 Learning Notes

Hosts

AmyJune Hineline - @volkswagenchick

Guests

Chad Hester - chadkhester.com @chadkhest
Mike Anello - DrupalEasy.com @ultimike

Mar 13 2024
Mar 13

Here are the slides and a recording of my Drupal Austria Meetup presentation about D7Security.

Mar 12 2024
Mar 12

Web development is a bit like samurai philosophy: there is no goal, only a path. Along the way, developers are constantly solving two tasks: a) implementing business logic in websites and web applications, and b) optimizing their performance.

The latter task will not be considered done until the amount of traffic between the server and the client becomes negligible, and the page speed (First Contentful Paint, FCP) and the time to interactive element start (Time to Interactive, TTI) become faster than the beat of a butterfly’s wing. Then again, infinity is not a limit. Because, as we remember, there is no goal.

We touched on the topic of website performance optimization in our previous posts when we talked about the React library, the Next framework and Server-Side Rendering. Today, we will return to these technologies and explain the importance of server components in optimizing performance.

server side rendering

The issue of Server-Side Rendering

One of the ways to improve website performance is to reduce traffic from the server to the user’s (client’s) device. The client-server architecture is essentially the queue of requests and responses between the client and the server, which in turn accesses the database.

Gradually, web development began to take on other tasks, such as where and how to cache the page or mark it up for SEO so that it could later go live and work for the user, or what part of the page rendering could be done by the client or by the server.

Eventually, there were developers who took the React library, built the Next framework around it, proposed the principle of Server-Side Rendering (or SSR) along with the framework, and said: “Now, the dynamic React application can be partially assembled on the server, delivered to the browser in the form of one page, while the content that depends on the user’s actions can be additionally sent in the form of small AJAX files as the user performs the actions.”

Well, a small AJAX file is a big step the web development has made to reduce the time of the First Contentful Paint. In addition, the React sites that use this approach show great SEO results.

However, despite its groundbreaking nature, the SSR was still no bargain in terms of performance. Before components are sent to the client side, a lot of server resources are used to render them, so in the late 2010s it was common to buy additional resources to save users the time they spent waiting for the page to download.

react components

What are React Server Components?

The question arises: why not distribute page rendering equally between the client and the server? Let the server render only static elements of the component tree and send them to the client in the form of HTML, while the client processes buttons, forms, and other interactive elements received in the form of JS files. This is where the idea of separating React components into client and server components came from.

The implication of server components is that even though the code is written in React, it is executed on the server. After execution, it is compiled in JSON format and sent to the user’s browser as part of the virtual DOM, allowing the React application to build it in the DOM tree and make it behave as if it were built in the browser.

benefits of react server components

React Server Components vs. Server-Side Rendering

Let’s get back to the Server-Side Rendering. When SSR is used, the page is built on the server — almost entirely, with the exception of dynamic components. First, the user sees the version that was built on the server and has no responsive interactive interface elements. And only during hydration, when React attaches event listeners to the page markup and begins processing the application in the browser, do previously inactive dynamic elements become interactive.

Only the server processes React Server Components to produce finished markup and metadata and send them to the browser to the React application, which builds them into the DOM tree. This is similar to working with common monolithic applications, where the server provides the HTML markup — you do not know how the page is built inside, you just see the result. This is about the same, but it is not the HTML markup that the server provides, but the data for React.

The RSC method comes with some limitations: server components do not have a life cycle. So if you need to process the data the user enters, these components will not work. But for static elements they are ideal because the code responsible for rendering the server component is not sent to the client at all, which reduces both the amount of downloaded code and the size of the bundle where JS, CSS and other resources needed for the work of application are stored.

Therefore, server components should include static elements such as headers, footers, and content. On the other hand, the reactive part that will work with hydration consists of the forms, buttons, and other elements with a changing state.

react server and client components

The RSC has another feature: when you use it, you can get access to database resources directly, bypassing the server API. Again, this results in less code, less data transmitted, and a more efficient application.

In addition, starting with the current version of React (React 18), the Server Components API allows you to describe the server components declaratively and automatically manage their download. This includes automatic code splitting: the system automatically defines which parts of the code can be downloaded to the server asynchronously, depending on the current request context.

The purpose of server and client components is shown in the table below.

server and client components

Benefits of React Server Components

What a React application gets when using React Server Components:

  • Pages are rendered without the queue of requests and responses between the client and the server (the so-called client-server waterfalls);
  • The size of the application is reduced because some of the code is executed on the server;
  • You can access backend resources bypassing the server API;
  • Code Splitting is automated.

We have already tried the React Server Components. In the online service we are currently developing, there are multiple accounts and the accounts are mostly dynamic. In addition to these accounts, there is a website which is static for the most part. To make it work and download faster, we use server components.

While working with the previous version of Next, we observed the server component technology in a rather raw state, which caused some problems. In the same project, the site framework was sent from the server to the client first, and the menu was sent separately because it depends on the browser resolution and changes its states, so it was not possible to make it a server component. In the latest version, the server components are more stable and we are watching its progress in the field with interest.

Contact our development team if you want your website to be more interactive and load even faster.

Mar 12 2024
Mar 12

Data plays a pivotal role in shaping customer interactions, so implementing a CDP can empower businesses to unify and analyze customer data from various sources. This can lead to more personalized and effective marketing strategies, improved customer segmentation, and enhanced engagement.

However, diving into CDP implementation without proper assessment can lead to challenges such as underutilization of the platform, data management issues, and inadequate return on investment. To avoid these challenges, organizations must comprehensively evaluate their readiness across various dimensions before embarking on a CDP implementation journey.

Evaluating Readiness For CDP Implementation

Before implementing a Customer Data Platform (CDP), organizations must establish several prerequisites to ensure a successful integration and utilization of the platform.

  • Ensure a clear data strategy, outlining objectives, sources, and governance frameworks aligned with broader business goals.
  • Ensure good data quality through cleansing and validation for accurate insights and decision-making.
  • Assess and enhance the technology infrastructure required to support a CDP integration.
  • Foster cross-functional collaboration, secure stakeholder buy-in, allocate resources, and develop a comprehensive change management plan.

Once these prerequisites are in place, the next step is to conduct a thorough evaluation across different dimensions.

Do You Need A CDP

Assess your organization across the following dimensions to evaluate the need for a CDP.

New call-to-action

1. Data Maturity & Infrastructure

Assess your organization's data management capabilities and infrastructure readiness for CDP integration.

  • Current Data Sources

Identify existing data sources and evaluate their formats, accessibility, and captured data.

  • Integration Capability

Assess the ability to integrate data sources with a CDP, considering API availability and compatibility.

  • Data Quality & Consistency

Ensure data accuracy, reliability, and adherence to governance and compliance standards.

Organizations with scattered data across various platforms and systems who wish to enable better decision-making should consider implementing a CDP. On the other hand, organizations with limited data sources do not need a CDP and should consider a different solution depending on their goal.

2. Organizational Readiness

Evaluate your organization's readiness beyond technology.

  • Stakeholder Alignment

Ensure key stakeholders understand and support the CDP initiative.

  • Skillset Availability

Assess if your team has the necessary skills for CDP implementation or if training/new hires are needed.

  • Technology Stack Compatibility

Evaluate compatibility with existing technology and potential upgrades.

Organizations where multiple stakeholders across departments need access to unified customer data for decision-making should consider opting for a CDP. On the other hand, organizations with a unified vision for utilizing existing data sources and access to the right technology infrastructure for supporting data integration can do without a CDP.

3. Future Scalability

Consider the scalability of your CDP implementation.

  • Scalability Assessment

Evaluate scalability to accommodate future business growth.

  • Flexible Architecture

Ensure the CDP architecture can adapt to evolving data sources and business needs.

Implementing a CDP is a great idea for organizations anticipating significant customer data volume and complexity growth. It is also ideal for organizations anticipating the adoption of new technology and data sources in the future.

Businesses anticipating minimal growth in customer data volume and with a stable industry can look into other avenues for building better customer experiences.

4. Change Management

Address organizational changes associated with CDP implementation.

  • Culture Of Data-Driven Decision Making

Foster an environment where decisions are based on data insights.

  • Process Integration

Ensure seamless integration with existing processes to make data insights actionable.

  • Change Management Strategies

Implement strategies to manage organizational transitions smoothly.

Organizations transitioning to a data-driven culture with the necessary stakeholder approvals, training, and support are usually in a great position to implement a CDP. Organizations with this culture or those not looking to change their current processes and systems should refrain from implementing a CDP.

5. Resource Availability

Ensure the availability of resources for successful CDP implementation.

  • Technical Expertise

Assess the need for skilled data management, integration, and analysis personnel.

  • Infrastructure

Ensure adequate technological infrastructure to support CDP requirements.

Allocate the budget for initial implementation, maintenance, and updates.

Implementing and managing a CDP requires specialized skills and expertise. Organizations with this expertise or are willing to invest in it should consider implementing a CDP.

6. Data Democratization

Promote accessibility and understanding of data across the organization.

  • User-Friendly Tools

Implement tools for easy data access and interpretation.

  • Data Governance

Establish clear policies on data access, usage, and security.

  • Training & Literacy

Provide training to improve data literacy across the organization.

Organizations looking to unify customer data for decision-making should consider implementing a CDP.

7. Technology Compatibility & Integration

Ensure seamless integration with existing technology platforms.

  • Existing Tech Stack Assessment

Evaluate compatibility with current systems.

  • API & Data Exchange Capabilities

Ensure seamless data exchange with other systems.

Organizations looking to change their existing technology platforms that operate in silos and hinder data exchange and integration should consider opting for a CDP. Businesses with existing technology platforms that operate cohesively allow seamless data exchange and integration without needing a specialized platform like a CDP.

8. Use Case Definition & Business Goals

Align CDP implementation with business objectives.

  • Clear Use Cases

Identify specific use cases for the CDP.

  • Alignment with Business Objectives

Ensure CDP directly contributes to achieving key business goals.

Implementing a CDP is a good idea when businesses require advanced data analysis capabilities, such as personalized marketing or real-time analytics, that cannot be achieved using existing tools. It can also help segment customers based on specific criteria and personalize marketing strategies.

9. Compliance & Data Governance

Ensure compliance with data privacy regulations and robust governance.

  • Data Privacy & Security

Confirm compliance with data protection regulations.

  • Audit & Reporting Requirements

Support necessary audit trails and reporting for compliance.

Organizations operating in highly regulated industries or globally must comply with necessary data governance and compliance regulations such as GDPR and CCPA.

10. Budget & ROI Consideration

Evaluate the financial aspects of CDP implementation.

  • Cost-Benefit Analysis

Understand the total cost of ownership and expected ROI.

  • Long-Term Financial Commitment

Consider long-term maintenance and scaling costs.

Implementing a CDP is beneficial when the potential benefits, such as improved customer engagement, increased sales, and enhanced marketing effectiveness, outweigh the initial investment and ongoing costs.

11. Vendor Evaluation

Select a suitable CDP vendor.

  • Market Research

Conduct thorough research on potential CDP vendors.

  • Proof Of Concept

Consider running a pilot program to test effectiveness.

Customer support and assistance are crucial for successful CDP implementation and ongoing maintenance. Ensure a thorough vendor evaluation when choosing a reputable and reliable CDP vendor.

12. Scalability & Future-Proofing

Ensure CDP scalability and adaptability.

  • Scalability Assessment

Ensure CDP can scale with business growth.

  • Adaptability To Future Trends

Ensure CDP can adapt to future data trends and technological advancements.

A scalable CDP solution is necessary when businesses anticipate significant data volume and complexity growth. A CDP can help adapt to future data trends and technological advancements.

Submit The Form To Get Personalized CDP Recommendations

Assessing readiness across these areas ensures successful CDP implementation and effective utilization in driving business growth and enhancing customer experiences. You can also submit this form to determine if you need a CDP or speak to our experts about your business requirements and goals.New call-to-action

Mar 12 2024
Mar 12

With Drupal now heavily used in the enterprise market by very large organisations, much of its direct competition is from well-funded proprietary products. From the perspective of my role on the Drupal Association board, I gave a talk at FOSDEM in February 2024 on the strategies and initiatives the Drupal community is starting to put in place to remain competitive in the enterprise market and how these approaches can be shared by other open source projects. 

[embedded content]

The original of this video recording was first published on the FOSDEM website

Drupal has historically had no centralised product management or marketing, let alone ANY coordinated budget! For comparison, Adobe spends around USD$2.7bn annually on product development, sales and marketing for its Experience Cloud product suite. 

In the talk, I discuss Drupal's recent recognition as a Digital Public Good and the way that the Drupal community is highly motivated by providing world-class software for free to anyone who wants to use it, promoting values of freedom, inclusion, participation and empowerment. The Drupal Association recently released a manifesto that defines the Drupal project's commitment to the Open Web, but in order to fulfil this mission, Drupal needs to be successful as a product in the open market.

Since Drupal 8 was released in 2015, it has been specifically targeted at building "ambitious digital experiences." While this has resulted in an overall drop in Drupal installs as smaller sites move to SAAS platforms, the Drupal economy is robust, with an estimated USD$3 billion spent on Drupal-related projects each year.

Unlike other open source projects, Drupal doesn’t have a single company doing the majority of the code contribution. The Drupal Association has run on a budget of around $3.5m or 1/1000th of the revenue being spent on Drupal projects each year. 

This was brought into focus for the Drupal Association during COVID when the primary source of income - running DrupalCon events - required an abrupt rethink. We had to refocus on how Drupal would be both successful and sustainable in the future. This has led to us recently embarking on a new strategy, where the Drupal Association play a more direct role in both Drupal product innovation and marketing.

Enterprise customers are key to maintaining a healthy ecosystem for a CMS. Their investment flows through to the agencies building, maintaining, supporting, and hosting large-scale projects, providing consistent, repeat income that ultimately benefits our open source community in the form of stable jobs, community funding, and sponsored code contribution. 

Looking more closely at the challenges of succeeding in the enterprise market, how do you get access and awareness with key decision makers in large organisations like the CIO, CTO and, increasingly, the CMO (Chief Marketing Officer)? They are the people likely to read analyst reports from Gartner and Forrester. While Acquia features as a leader in these reports and relies heavily on Drupal for its platform, Drupal's name recognition is largely absent from these reports. 

Acquia has also had great success with their Engage events that target key decision makers, but it's been a challenge to attract a similar audience to the more community and developer-focused DrupalCon events. 

While the Drupal Association itself has historically had limited relationships with Drupal's large end users, partner agencies who rely on Drupal's open source software for their clients absolutely do have these relationships.

The Drupal Association is in a strong position to provide our agency partners with as much assistance as possible to either retain or win new enterprise clients through any playbook-style information we can provide. For example, do we have a pitch deck on hand to help an agency argue why Drupal is superior to Adobe or Sitecore? Are there pre-packaged product demos that can be consistently updated to highlight new features?

This is an area where we currently fall short in the Drupal community, with most agencies replicating efforts for every new client engagement. It's something we're starting to address with the Drupal Certified Partner program, however, if we can harness the strength of hundreds of agency salespeople pitching Drupal to their clients every day. New agencies joining a partner program need to see a clear pathway to building their teams' expertise and being able to sell Drupal to their clients to grow their businesses. The largest global digital agencies have tended to struggle with engaging with open source software communities, so bridging that gap is critical.

The other group of people we need to convince in any large organisation are the people who’ll be using our product - the developers, content editors and systems engineers. C-level decision-makers lean heavily on this group to evaluate and make recommendations about what platform they should be considering. To influence this group, our product needs to look and function like a modern piece of software, fulfil contemporary requirements or be quickly downloadable for a working demo of the software.

In terms of where we already clearly win, rapid innovation is the thing that we do very well in the open source world. Maintaining the speed of innovation, though, is an area that has been harder for Drupal as both the software and community have matured. A big philosophical hurdle we’ve faced is the notion of the Drupal Association directing budget to innovation projects when people often have an expectation that contribution is “free”. But contribution has never been free! An individual or company has always borne the cost in personal time or wages. Other big open source projects have absolutely no stigma about funding projects with actual money, such as the Linux Foundation's $160m annual funding towards projects.

The Drupal community dipped our toe into this model last year with the Pitchburgh contest, which saw $98,000 worth of projects get completed in a relatively short amount of time because they had the budget. We’re also in the process of hiring people at the Drupal Association who can facilitate innovation and remove roadblocks to contribution.

Now, all we need is the funding to scale this model up. Imagine if just 1% of the $3bn spent on Drupal-related projects each year went towards funding strategic innovation - that would be a $30m budget to work with!

Similarly, the idea that Drupal would be “marketed” as a product by the Drupal Association has never been a core competency. This is the legacy of being structured as a 501c3 not-for-profit in the USA where funds are for the “advancement of a charitable cause”. Our charitable cause is ensuring Drupal remains a Digital Public Good that supports the United Nations’ Sustainable Development Goals. But if there isn't positive product awareness about Drupal in the broader market, then market share will slip and our ability to support the goals around being a Digital Public Good will suffer as a result. 

Whether we call it marketing or advocacy, we need to ensure Drupal as a product is commercially successful. We’ve had a Promote Drupal working group within the Drupal community for a number of years that has driven a range of broader marketing initiatives. The Drupal Association has now taken on an active role in this by commissioning a go-to-market strategy targeting the enterprise sector. This will be rolling out in 2024 as funding for specific marketing initiatives becomes available. 

At the cheaper end of the scale, this might include coordinating speakers at non-Drupal tech events or managing positive media coverage. At a higher budget scale, it might include Drupal-branded booths at major tech conferences, like the one we recently built for Web Summit in Lisbon, or running global campaigns to build Drupal product awareness. 

Our other huge advantage as an open source community is the strength and depth of our developer pool. We do encounter a perception issue when it comes to attracting younger developers to our platforms because there are so many shiny new things to play with. Building robust outreach, training, mentoring, certification and professional pathways is the key to maintaining a sustainable developer pool as those of us with 20+ years of experience head towards the other side of middle age.

So, where can you start to help with all of this? 

  1. If you're a professional services company that relies on Drupal for your business, get involved with the Drupal Certified Partner program. This is the fastest way to both contribute to Drupal's innovation as a product and play a direct role in driving adoption.

  2. If you rely on Drupal as your organization's CMS software, become a Supporting Partner and help fund Drupal's sustainability. 

  3. If you're passionate about maintaining the Open Web, the Drupal Association can accept your philanthropic donation

  4. Send your team members to DrupalCon or a regional DrupalCamp to connect with the community.

This level of engagement will help Drupal maintain its status as the platform of choice for large-scale projects.

Mar 11 2024
Mar 11

Against the backdrop of snow-capped peaks and invigorating alpine air, attendees immersed themselves in a whirlwind of workshops, discussions, and outdoor activities showcasing the vibrant spirit of open-source technology and the beauty of the Swiss mountains.

We took this opportunity to ask Josef Kruckenberg, Product Owner at Liip and co-organiser of the Drupal Mountain Camp, a few questions.

Josef Kruckenberg, Product Owner at Liip and co-organiser of the Drupal Mountain Camp ©Patrick Itten

What are the goals of the Drupal Mountain Camp?

The Drupal Mountain Camp brings together experts and newcomers in web development to share their knowledge of creating interactive websites using Drupal and related web technologies. We are committed to uniting a diverse crowd from different disciplines, such as developers, designers, project managers, agency and community leaders.

The main highlights include:

  • Pre-conference with skiing, snowboarding and co-working in Davos in the Swiss Alps
  • 3 keynotes on headless CMS, open-source funding and personal development
  • 3 days with workshops, sessions and exchanges around the open-source CMS Drupal

What is your involvement in this, also as a Liiper?

As Drupal Community Coordinator at Liip, Jens Vranckx and I are part of the organising team that makes the Drupal Mountain Camp happen. For this year's edition, I have been focusing on recruiting keynote speakers and inviting speakers from other countries to provide a rich and diverse line-up. I also coordinate with our marketing team, coordinate some logistics at the venue, encourage Liipers to speak, and have fun taking pictures of the event.

In our workshop, Drupal for End Users, Jonathan Noack and I compared the different ways of creating landing pages with Drupal and allowed the audience to test blökkli, our interactive, open-source page-building solution.

As a board member of the Drupal Switzerland association, I’m also organising a Drupal Local Association Updates session that acts as an exchange format for open-source leaders in countries like France, Belgium, and Switzerland.

Jonathan Noack presenting blökkli ©Patrick Itten

Which speech inspired you the most and why?

I especially enjoyed Tearyne Almandarez's talk about grit and personal development. It reminded me of how I dealt with difficult challenges in my career, how imposter syndrome can hold one back and how important it is to find clarity about where you want to go, especially if that means you have to go outside of your comfort.

What outcomes would you like to share following this edition?

The Swiss and international Drupal community had a lot to share within the days of the mountain camp.

It's inspiring to see the multitude of approaches to solve key problems, such as interactive page building with Drupal.

I'm proud of the Liip team for contributing substantially to open-source by sponsoring and co-organising Drupal Mountain Camp and sharing our knowledge in many sessions.

Conference of Jutta Horstmann ©Patrick Itten

What are the next challenges?

The Drupal Mountain Camp is all about bringing people together. The organisers will get together, do a retrospective and get ready for the next iteration. What can we do to make it more accessible? Will we do it as usual in Davos? We had a lot of good discussions already at the conference, so I’m looking forward to seeing where we take the organisation next.

For Liip, we will continue investing highly in the open-source and Drupal community. We are excited to see how the community will use blökkli and what they contribute back to it.

Mar 11 2024
Mar 11

Authored by: Nadiia Nykolaichuk and Leonid Bogdanovych.

Zoom is a key player in the sphere of online meetings. They have the power to dissolve geographical barriers, uniting individuals and teams across vast distances for communication and collaboration. What can be more convenient than using a robust video conferencing platform? Using it in the comfort of your own Drupal website!

Thus, we are delighted to unveil the Zoom Video module crafted by our team’s developer — a fresh addition to the suite of third-party integration tools available for Drupal. Let’s explore how it provides Zoom meeting integration with Drupal websites.

Behind the screen: a glimpse at Zoom

Zoom is a versatile video conferencing platform that facilitates virtual meetings, webinars, and community events through a user-friendly interface and robust features. It offers a bunch of both free and premium functionalities. Among other things, users can do the following with Zoom:

  • engage in high-quality video and audio communication
  • share their screens for presentations or demonstrations
  • exchange messages via chat
  • record meetings for future reference
  • send calendar invitations
  • brainstorm ideas via an online whiteboard
  • use cloud VoIP phone services
  • harness rich conversation analytics

Zoom’s cross-platform compatibility ensures accessibility across desktop computers, laptops, tablets, and smartphones.

Zoom meetings.Zoom meetings.

Introduction to the Zoom Video module for Drupal

The Zoom Video module focuses on integrating virtual meetings, which is probably the most popular and essential of all Zoom products. Thanks to the module, users can create, manage, and join Zoom meetings directly from within the Drupal website.

Zoom meeting links can be added to Drupal content nodes via a field of the special type — Zoom Video. Meetings then become available for users to join directly on the Drupal pages. The participants, except for the meeting host, don’t need to have the Zoom application installed — it’s possible to join from any device with an Internet connection.

Zoom integration provided by the module might serve a variety of use cases. For example, the members of the same team might easily jump on meetings using their corporate Drupal website. Another example would be online events hosted on a Drupal website where third-party participants are welcome.

To enable interaction between the Drupal website and Zoom’s services, the module uses the Zoom API and SDK. It also relies on a third-party library under the hood — Firebase PHP JWT. In a nutshell, JWT (JSON Web Tokens) is an open standard that defines a compact and self-contained way to safely transmit data between parties.

This Zoom meeting integration module has been created by our developer Leonid Bogdanovych. Our team proudly supports the module’s development, striving to help Drupal website users easily integrate Zoom meetings and elevate remote communications.

It is a brand-new tool, created for the latest major Drupal core version — Drupal 10. The module is currently in beta-stability, and more exciting features are planned for the future. The maintainer is open to suggestions as to how he can improve the set of functionalities to ensure the most seamless Zoom meeting experience for all users.

How to integrate Zoom meetings with a Drupal website

1.  General requirements and installation

There are three essential requirements to make the Zoom Video module fully functional on your Drupal website:

  1. Your website needs to be using Drupal 10 core.
  2. To ensure that Zoom meetings are displayed on your website, it needs to be configured to use HTTPS (Hypertext Transfer Protocol Secure).
  3. The module installation via Composer is highly recommended. This dependency manager tool will take care of the proper installation of the right version of the Firebase PHP JWT library:
    composer require drupal/zoom_video 

Now that the module is in beta version, you might need to specify its latest version explicitly in your Composer command. Currently, it’s the following version:

composer require drupal/zoom_video:1.0.1-beta3

Once the installation is complete, you can enable the Zoom Video module on the “Extend” tab of the Drupal administration interface.

2. Creating a Zoom app

As the next step, you need to create a Zoom application that you’ll further be able to use for creating multiple meetings. You can create the app by going to the Zoom App Marketplace. Logged-in users can go directly to the app creation page. If you are not logged in, you’ll need to start by visiting the main marketplace and then click Develop > Build legacy app in the top right corner. Zoom’s app creation website is a little tricky so you might need to follow the updates about it for the moment of reading these instructions.

Select “Meeting SDK” as the app type and click “Create.” 

Selecting the Meeting SDK as the app type in Zoom.Selecting the Meeting SDK as the app type in Zoom.

Next, give your app a name (in our example, it’s “Zoom test”). You’ll see a toggle enabling you to publish this app on the Zoom Marketplace or keep it unpublished. Either option works for Drupal integration.

Specifying the Zoom app name and the published/unpublished status.Specifying the Zoom app name and the published/unpublished status.

Click “Create” and you’ll be redirected to the form with the app details. Fill out as many details as possible across all the settings tabs. For example, fields like company name, developer name, and email are not marked as required, but only if you fill them out, the app will be promoted to the “Activated” status from the “Draft” status. These statuses can be tracked on the “Manage” page that lists all your applications, and the page can be accessed by the “Manage” button on the top right corner.

Filling out the Zoom app details.Filling out the Zoom app details.

The “App Credentials” tab lists the Client ID and the Client Secret, which you’ll need for the Drupal website as the next step. 

Copying the Zoom app credentials.Copying the Zoom app credentials.

3. Adding your Zoom app credentials to Drupal

As an important part of the integration, go back to your Drupal website and open the Configuration > Development > Zoom Settings page. Enter the Zoom app credentials copied in the previous step: Client ID and Client Secret. Click “Save configuration.”

Adding the Zoom app credentials to Drupal.Adding the Zoom app credentials to Drupal.

4. Creating a field of Zoom Video type

Next, you’ll need to go to Structure > Content types and select or create a content type that will represent your meetings. Click “Add field” and select a field type named “Zoom Video Field.” The new field creation interface that you can see in our example has been introduced in Drupal 10.2

Creating a field of Zoom Video type.Creating a field of Zoom Video type.

Click “Continue” and proceed with the field settings. Among other things, you can choose to make the field required or change its label the way you want it to look for users on the front end.

5. Creating Zoom meetings

Now that you have a Zoom app set up and its credentials added to the Drupal website, you can create as many actual Zoom meetings as you like. To create a meeting, you’ll need to go to the zoom.us website and sign in. The meetings will be associated with your Zoom app via your account that has your email address or other credentials.

Click “Meetings” in the left menu and then hit “Schedule a meeting.” When configuring your meeting, you can specify details such as the meeting time, duration, time zone, and more. 

Scheduling new Zoom meetings.Scheduling new Zoom meetings.

Click “Save” and copy the meeting’s invite link, which you’ll need for the next step. You can schedule the meeting for later, but when the time comes to actually launch it, hit the “Start” button and follow Zoom instructions. As the meeting host, you’ll also need to be logged in to the Zoom app to launch the meeting.

Copying the meeting Invite Link and clicking “Start.”Copying the meeting Invite Link and clicking “Start.”

6. Adding a meeting URL to a content node

Come back to your Drupal website and create a content node of the type that represents your meetings (in our example, Content > Add content > Meeting). Enter the meeting invite link into the Meeting URL field and save the node.

Adding Zoom meeting URLs to Drupal content nodes.Adding Zoom meeting URLs to Drupal content nodes.

7. Joining a meeting

As soon as the invite link has been added to a node, users will see the “Join Meeting” button on the front-end display of this page. 

Clicking the “Join Meeting” button on a Drupal page.Clicking the “Join Meeting” button on a Drupal page.

By clicking the button, any user can join the Zoom meeting directly from the Drupal website. If the meeting hasn’t been launched by the host and the time for it hasn’t come, you might see the “Meeting hasn’t started” notice in the meeting window.

You can drag the meeting window by the bottom right corner to enlarge it on your screen or adjust its width and height to your preferences. It’s also possible to change the window’s position by dragging it around the screen. 

Most common Zoom features are also available from within the chat window in Drupal. For example, you can see the information about the meeting and the apps accessing the meeting in the top-left corner. Furthermore, you can start presenting, turn video and audio on and off, check out the list of participants, write messages in the chat, and more.

Joining a Zoom meeting from a Drupal page with the chat window open.Joining a Zoom meeting from a Drupal page with the chat window open.

Some additional ideas for displaying Zoom meetings in Drupal 

  • Adding more fields to meetings (optional)

While this is not the Zoom integration part, it might be great to enrich your Drupal meeting pages with more information. Depending on your use cases, this could be, for example, the dates when the meetings start and images illustrating specific online events.

This can be done by adding a date field and an image field to your content type for meetings. As far as the date, you can add a field of “Date” type provided by Drupal out of the box, but some especially advanced settings can be provided by contributed modules like Smart Date.

  • Placing meetings in specific parts of your website (optional)

Another optional tweak is to give some extra boost to your online meetings by placing them in a prominent place on your Drupal website. There are plenty of options for it:

  • You can add a meeting node to a menu. It might be the main menu promoting an important meeting or webinar, or a special menu fully made up of meetings. It’s possible to restrict the visibility of certain nodes in menus to specific user roles or groups.
  • Alternatively, you can create a collection of meetings using Drupal Views. The meetings will be listed as a grid, a list, etc., and when a user opens a specific meeting node, they will be able to join the meeting. We covered the steps to create Drupal Views in another article.
An example of a simple view of upcoming online events.An example of a simple view of upcoming online events.
  • It’s also possible to create a full-featured calendar of upcoming meetings. You’ll need additional Drupal modules such as Fullcalendar View, Calendar View, and more. We described the Drupal calendar creation steps in a recent article.

But, of course, the ideas above are just the beginning of endless options that can be created on your Drupal website for presenting your Zoom meetings in the best way to users.  

Final thoughts


The integration provided by the Zoom video module is a great example of how your Drupal website can become a centralized hub of all functionalities your team might need, with no need to go elsewhere. Hopefully, it brings more efficiency and convenience to your workflows, and whenever you need assistance with integrating Zoom or any other service with your site, our Drupal experts are happy to help!

Mar 11 2024
Mar 11

Today we are talking about CI for Drupal modules, How it helps us build Drupal, and the ongoing work and improvements being made with guest Fran Garcia-Linares. We’ll also cover Require on Publish as our module of the week.

For show notes visit:
www.talkingDrupal.com/441

Topics

  • What does CI mean
  • How do Drupal modules use CI
  • When we talk about Drupal CI are we talking about the website itself or the CI that supports contributors
  • What tools does Drupal use for CI
  • How do maintainers interact with CI
  • What changes have happened in the last year
  • Speed improvements
  • Drupal CI vs Gitlab CI
  • Process to convert
  • When is Drupal CI being shut down
  • What improvements are coming
  • If someone has an issue where do they get help

Resources

Guests

Fran Garcia-Linares - fjgarlin

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan
Stephen Cross - stephencross.com stephencross
Anna Mykhailova - kalamuna.com amykhailova

MOTW

Correspondent

Martin Anderson-Clutz - mandclu

  • Brief description:
    • Have you ever wanted to have content fields that could be optional until a piece of content is published, or ready to be published? There’s a module for that.
  • Module name/project name:
  • Brief history
    • How old: created in Apr 2018 by Mike Priscella (mpriscella), though recent releases are by Mark Dorison (markdorison) of Chromatic
    • Versions available: 8.x-1.10
  • Maintainership
    • Actively maintained, latest release just over a month ago
    • Security coverage
    • Test coverage
    • Number of open issues: 18, 8 of which are bugs
  • Usage stats:
    • 3,001 sites
  • Module features and usage
    • With this module enabled, form to configure fields for you content types will have a new checkbox labeled “Required on Publish”
    • Check this new box instead of the normal “Required field” checkbox to have the field only required if the content is being published or already published
    • Useful for publishing workflows where you want content creators to be able to quickly get started on content, but ensure that fields will be filled in before publishing
    • Useful for fields that will optimize the content for SEO, social sharing, search, and so on
Mar 11 2024
Mar 11

Introduction

This article shares a professional resignation letter format and tips on writing one that ensures a smooth job transition.

Given that millions search for "how to write a resignation letter," it can be said that the prospect is filled with dread and confusion.

Quite natural. 

A lot hangs by the thread—or the letter, in this case—if you want to ensure a smooth career move.

However, it can be pretty straightforward if you approach writing a resignation letter systematically. 

Here's what I mean.

What Is A Professional Resignation Letter?

A resignation letter is a formal document a team member submits to their employer to indicate their intention to leave. 

It expresses gratitude, provides notice period details, and often states the reason(s) for departure. 

This letter is vital to a professional exit strategy and kickstarts a team member's exit process from their current position. 

By the way, click here if you're looking for job-searching strategies to land your next dream job.

To Whom And Where Do You Send A Resignation Letter?

There are many ways to share your resignation letter, depending on where you work.

Usually, people share their letters with immediate supervisors. 

You also send a copy to the People Operations team (or human resource representative, as it's still sadly called in most companies).  

Here are some common avenues to consider:

  • In-person meeting: Schedule a face-to-face meeting to discuss and hand over the resignation letter to your manager
  • Email: Send over a formal email with the attached letter
  • Hard copy delivery: Deliver a printed and signed copy of the letter to the People Operations department or the supervisor's office
  • Registered mail: If working remotely, you may need to send a hard copy via registered mail for a formal and documented delivery (do this only if your company requires you to)
  • Company portal: Submit the resignation letter through the organization's online portal or People Operations system
Click here to apply for the Python staff engineer role at Axelerant

Why Do You Write A Resignation Letter, And When? 

You will have personal reasons for putting in your papers, like professional and financial growth, relocation requirements, experimentation with new job roles, emergencies, medical conditions, caregiver obligations, etc.

For instance, one of the major reasons why workers quit their jobs during the Great Resignation was toxic work culture.

Many chose to change not only their jobs but industries—talk about being done.

Officially, though, these are the reasons why you must submit a resignation letter.

  • Formal notice: It serves as a formal notice to your employer, a part of fair professional etiquette
  • Documentation: Provides a documented record of your decision and the terms of departure
  • Maintains professionalism: Demonstrates respect for your employer and colleagues, creating a positive professional reputation
  • Legal requirement: In most organizations, submitting a resignation letter is a contractual or legal requirement

If you're waiting on an acceptance letter from another company, don't start the process until you get it.

Wait until you have an offer at hand.

Write your resignation letter first, discuss it with your supervisor to give them a heads-up, and submit it.

If you're switching jobs, consider the new date of joining and the notice period policy at your current organization.

You can negotiate timelines if you have a cordial relationship with your manager and can speed up the knowledge transfer.

Best Resignation Letter Format That Works In Any Situation

Here's a simple yet professional resignation letter format you can customize.

[Your Name]

[Your Address]

[City, State, ZIP Code]

[Email Address]

[Phone Number]

[Date]

[Recipient's Name]

[Company Name]

[Company Address]

[City, State, ZIP Code]

Dear [Recipient's Name],

Opening Paragraph: State Intention

Begin with a clear statement of your intention to resign. State your last working day according to the company's notice period policy. 

Middle Paragraph: Express Gratitude

Express gratitude for your tenure here. Optional: briefly mention why you resigned, focusing on positive aspects or personal growth.

Ending Paragraph: Offer Transitional Support

Offer assistance in the transition by training a replacement, completing pending tasks, or providing documentation to ensure a smooth handover.

Formal Closing

End with a formal closing (for instance, "Sincerely" or "Best Regards") followed by your full name and signature for a hard copy.

This format balances professionalism, gratitude, and a cooperative tone, making it suitable for various resignation scenarios. 

Here's An Example Of A Resignation Letter

Feel free to customize the resignation letter content according to your needs.

John Doe

123 Tech Lane

Cityville, ST 56789

[email protected]

(555) 123-4567

[Date]

[Recipient's Name]

XYZ Tech Solutions

456 Arrow Street

Tech City, ST 67890

Dear [Recipient's Name],

Please consider this letter my formal notice of resignation as a Software Engineer at XYZ Tech Solutions. My last work day will be on [Insert Last Working Date].

The collaborative environment and challenging projects at XYZ Tech Solutions have contributed significantly to my professional growth. And I'm filled with nothing but gratitude for this experience.

I'll be happy to assist in a smooth transition by giving a documented knowledge transfer to my colleagues of the projects I was associated with.

I have enjoyed my time here and would like to stay connected with the talented people I've had the pleasure of working alongside.

Sincerely,

John Doe

Mistakes You Want To Avoid In A Resignation Letter

The resignation letter is only a part of a larger career transition process.

The process will proceed smoothly, as it should, if you succeed in writing a respectable resignation letter.

But beware that the following points will not help your cause of an amicable departure. 

  • Negative tone: Don't share negative sentiments or criticisms about the company, colleagues, or management. Keep the tone positive and focus on gratitude.
  • Steer clear of blame: Resist the temptation to assign blame—however hard it might seem—for your decision to resign. Instead, focus on personal or professional growth and new opportunities as the driving factors behind your choice.
  • Oversharing personal details: While providing a brief reason for resigning is acceptable, avoid oversharing personal or sensitive information, especially if the reason for your departure is personal, like a medical condition.
  • Including too much detail: Keep the letter concise and focused. Avoid including unnecessary details or extensive explanations. A long-winded letter might backfire as you mention something out of place and context.
  • Lack of gratitude or boasting: We learn something from each professional experience, whether negative or positive, directly or indirectly. Express your gratitude politely and move on. And don't be coarse and boast about your new salary or position.
  • Ambiguous notice period: Clearly state your last working day. Ambiguity in this aspect can create confusion and disrupt the transition process.
  • Informal language: While the tone can be respectful, maintain a level of formality in language. Avoid using overly casual or informal expressions that may diminish the professionalism of the letter.

Isolate some time from your schedule, get a hot cuppa, and write that resignation letter.

With these tips, your resignation letter shouldn't get funny glares or frowns. You'll be soon on your way to a new and exciting opportunity.

And if you're still looking for new opportunities, you're at the right place.

Click here to apply for the Python staff engineer role at Axelerant
Mar 09 2024
Mar 09

With less than two weeks to go, trainings at MidCamp 2024 are on sale and filling up fast. 

This year we’re excited to offer two great options for non-technical folk, also open to technical attendees who are looking for alternative options:

Tech Career Tune-Up: Navigating Your Path in Tech with Confidence and Clarity

Dive into a transformative 3-hour workshop designed by Nichole Addeo of Mythic Digital, specifically for tech professionals.

"Tech Career Tune-Up: Navigating Your Path in Tech with Confidence and Clarity" offers a unique blend of career reflection, exploration, and mental wellness tools tailored to address the challenges unique to the tech world.

Learn More

What am I Getting Myself Into? A Drupal Crash Course for Non-Developers

If you’re new to Drupal, then this hands on course is the class for you. Rod Martin of Promet Source will teach the key concepts you need to understand, navigate and use a Drupal site.

Learn how to build a Drupal 10 site, from content and user organization, to working with modules and themes. This training will answer the questions you didn’t even know to ask!

Learn More

Important Dates:

Save $100 before March 14

Mar 08 2024
Mar 08

Not all choices are created equal. On a web development project, leaders are faced with thousands of decisions, but only a handful of those fundamentally impact the entire project and post-launch success of the website. As a digital project manager, I serve clients by focusing their attention on highly impactful choices and offering informed guidance to achieve their goals. One key choice on every Drupal website redesign project is how editors will build pages on the new website, and my consistent guidance is to go with Mercury Editor.

What is Mercury Editor?

Mercury Editor is a drag-and-drop content editing module that we built for Drupal 9 and 10 websites. It allows Drupal site managers the freedom to implement anything from standardized, form-like content types to blank canvas pages with dozens of component options.

Video demonstration of publishing content on a Drupal website

Why is Mercury Editor the best option for Drupal projects?

What you see is what you get

Have you ever had to work through sheer guesswork? Trying to envision in your mind’s eye how something is going to line up, but never able to see it happening in real time? If you manage content in a Drupal site, the answer is probably yes! Mercury Editor finally gives editors a way to see what they’re building as they’re building it, on both desktop and mobile scales. Honestly, if the list ended here, it would still be enough for Mercury to be my go-to recommendation.

It’s easy to learn

Clients commonly underestimate how much effort is required to get their new site’s content ready for launch – it is truly a second major project running in parallel to the site build itself. Not only does it take time for a team to create, translate, and build dozens, hundreds, or even thousands of pages of content, but it also asks the client team to learn a new page-building tool at the same time.

Mercury Editor relieves this pressure simply by being easy to learn. Once you see how to add any new component, that immediately scales up to any other component on any content type. Using the plus button to add new components or dragging them around the page just makes sense. Choosing an intuitive tool means that instead of struggling to know how to do their important work before launch, they can just focus on doing it.

Mercury Editor plus button to add components on a landing page Easily add a new section or component to a landing page with Mercury Editor

It creates a sustainable post-launch site

Mercury has little-to-no ongoing maintenance needs, no licensing fees or restrictions, no limits on pages created, and it removes the need for developers to help make new pages or page edits down the road. A single, non-technical user can realistically maintain an entire website’s content after a short primer on how to use Mercury.

Flexible or formulaic – it supports the right level of complexity for you

A robust technical application like Drupal needs a page-building tool that can hang with it. Mercury offers a lot of knobs we can dial up or down to give different teams the level of flexibility that is right for them. Want to avoid decision paralysis or differing layouts across similar types of content? Go simpler. Want to give more creative freedom to editors? Expand the options. Mercury can do both within a single design philosophy.

For large teams that want a consistent look across editors, Mercury Editor allows us to:

  • create predefined layout templates as an instant starting point for editors
  • dial back on multi-column layout options
  • restrict which components can be placed on a content type
Template list of components Example of a page template's components

For small teams that want more creative freedom, Mercury allows us to:

  • create different components for use in different contexts
  • let editors select rules and filters for dynamic components within the interface without needing a developer
  • offer complex section and multi-column options
  • use components in unexpected ways without breaking the look and feel of the site
Background options for a landing page Example of background image options editors can choose from

Streamline your Drupal project with Aten

I’m a project manager. I know how choices impact the time, budget, and success of a website redesign project. Choosing a page-building tool that the Aten team is intimately familiar with is going to save your project time and money and will result in a design that leans into the tool used to implement it in the end.

Our team speaks Mercury – Aten’s clients benefit from our team’s experience working with this Drupal editor, and they begin to learn the editing experience themselves early in the project. Our design team knows what Mercury can do and how to create the best post-launch editor experience from the very first conversation of the project.

It’s a reflection of Aten’s values

Values matter to our clients, and they matter to us. My colleague Kathryn Sutton spoke about Aten’s organizational values in a recent webinar. Mercury Editor is another manifestation of those values in tangible, product form. It obviously embodies values like creative, productive, and collaborative. A tool that enables creative page editors to build to their vision is a natural, almost inevitable, conclusion to Aten’s core values.

What may be less obvious at first glance is how Mercury is shaped by other values like trustworthy and thoughtful. Mercury Editor is not just a tool but a commitment from Aten to the Drupal community – to support and grow Mercury Editor for years to come, with plans through Drupal 12 and beyond. By adopting this module, you adopt the assurance that we have your back.

We are not mercurial when it comes to Mercury. It matters to us, we stand behind it, and we invest heavily in its accessibility, reliability, and constant improvement.

As for the final Aten value, eager? We made Mercury Editor, and we would love to make it work for you. Get in touch about your next Drupal project, and we’ll make it happen.

Mar 08 2024
Mar 08

Universities need a solid online presence to attract students, connect with stakeholders, provide valuable information, and foster collaboration among different departments. Choosing the right content management system is therefore crucial so that you can easily develop a user-friendly, attractive, and informative website. This article will explore why Drupal is the ideal CMS for higher education institutions.

Why is Drupal a robust CMS for higher ed?

Drupal is an open source, flexible, and cost-effective content management system that aligns perfectly with the unique needs of higher education institutions. This is proven by the fact that the world's top universities have chosen it. For example, Oxford University, Princeton University, the Massachusetts Institute of Technology (MIT), and University College London (UCL) have built their college websites on Drupal. Discover the eight compelling reasons why you should consider this system.

1. Flexibility and customization

Drupal stands out for providing universities with unmatched flexibility and customization options. One of its key strengths lies in its support for diverse content types. Universities can use text, images, videos, infographics, and more. This ensures educational websites can effectively communicate their message and publish attractive materials.

Drupal allows you to add different types of content, e.g., videos and images, to attract users.


Furthermore, Drupal enables universities to define the visual style of the website, going beyond standard templates. It offers the capability for custom layouts. This means institutions can design their websites with a unique and tailored appearance (e.g., design structure, color schemes, and typography), reflecting their distinct identity and branding. This approach reinforces the institution's individuality.

That's not all. Drupal's modular architecture enables the integration of various modules to extend functionality. You can customize your website by adding or removing modules to meet specific requirements. Whether it's improving SEO, incorporating social media integration, or adding ecommerce capabilities, Drupal's modular system provides flexibility.

2. Seamless content authoring and workflow

With the Drupal content management system, you can customize the content creation and publishing workflow to streamline the editorial process. Drupal enables you to define workflows with various moderation statuses (e.g., a Draft for the writer or a Review for the subject matter expert), ensuring that content goes through a double-check and approval process before publication.

By using this CMS, you have the possibility to create custom taxonomies and tags to categorize and organize content effectively. This feature is precious for universities with diverse departments, courses, and research topics, allowing for a structured and easily navigable website.

You can also enhance the security of your website data thanks to a robust user management system. It allows you to define unlimited user roles and assign permissions. This customization feature ensures that different people, such as administrators, editors, and visitors, have distinct levels of access and editing rights within the website (for example, to the news section or landing pages).

3. Strong security in CMS for higher ed

This CMS stands out as an exemplary choice for university websites dealing with sensitive information.

Drupal's security capabilities are at the core of its comprehensive framework, carefully designed to guard against potential vulnerabilities. The platform takes a layered approach to security, incorporating Access Control Lists and database abstraction (preventing SQL injections), forming API with CSRF protection, encryption, and strong authentication protocols.

This system’s power lies also in its proactive and vigilant ecosystem. The Drupal community comprises a diverse group of developers, security experts, and enthusiasts who are dedicated to promptly identifying and addressing potential security issues. Thanks to them, the platform remains resilient in the face of emerging threats with timely patches. The Drupal team also provides regular security advisories and community messages.

At Drupal.org, users can find valuable tips, advice, and news regarding website security.


Source: Drupal.org

Drupal’s commitment to regular updates also reflects credibility as a secure CMS. The system’s development team consistently releases security patches and updates for core and contributed modules. It addresses newly discovered vulnerabilities and reinforces its defenses. This commitment to ongoing improvement empowers website administrators to stay ahead of potential threats.

4. Scalability and performance

Drupal's scalability is a hallmark feature that aligns with the evolving needs of universities. As academic institutions experience an influx of students, faculty, and administrative data, the CMS’s ability to handle increasing volumes of content and user traffic ensures that colleges can effortlessly adapt to the growing demands of their online platforms.

At the heart of Drupal's scalability is its modular architecture. It enables the easy integration of additional features as needed. One standout example is the Views module. Using it, you can create, customize, and display content in various formats without complex coding. As universities expand their content libraries, the Views module ensures that information is organized and accessible, promoting efficient navigation for users.

Another notable module is Paragraphs, which offers a more granular and structured approach. It’s helpful for universities managing diverse types of content, from articles and news updates to event listings and multimedia. The Paragraphs module enables administrators to create modular and reusable content components that you can easily multiply on subpages or marketing landing pages.

As university websites experience surges in traffic, ensuring optimal performance becomes paramount. Drupal is inherently equipped to handle high volumes of traffic efficiently. Its architecture delivers fast and responsive experiences, even during peak periods. It has a robust caching system and an efficient codebase. The platform is designed to perform tasks with minimal resource usage, optimizing server performance and response times.

5. Drupal’s multisite capability

Many educational institutions operate numerous websites for different departments, campuses, research centers, and academic initiatives. Drupal's multisite capability allows administrators to do it efficiently and without wasting time.

At the core of this feature is the ability to manage and deploy multiple websites from a single platform. This centralized control streamlines the administrative workload and ensures consistency and coherence across all digital assets. You can efficiently oversee updates, security measures, and content management for all affiliated sites, fostering a unified digital presence.

However, Drupal's multisite installation doesn't sacrifice autonomy. Each individual website within the multisite network retains its independence, authorizing departments or campuses to customize their online presence according to their unique needs.

6. Multilingual support

Most universities must effectively communicate with diverse student groups and faculty.

Drupal also helps in this case. This platform allows you to create websites in multiple languages. Thanks to that, your digital presence can be more accessible and welcoming to international users.

In this CMS for higher education, you can customize the language settings and translations to cater to a global or multilingual audience. Drupal also offers language-switching options that contribute to the user-friendly nature of the system. Online visitors can seamlessly navigate between different language versions of the web page.

The Droptica blog is an example of a Drupal website that has the option to switch language versions.

Source: Droptica.com/blog

7. Integrations with third-party systems

Universities use different solutions to handle important tasks regarding student information, learning, and administration. Drupal is excellent at integrating with third-party systems, ensuring everything works smoothly. This helps create a connected and organized digital setup for educational institutions.

With Drupal’s robust API framework, you can easily integrate with tools, such as:

  • Student Information Systems (SIS): it enables managing student data, enrollment, grades, and other academic information. Drupal facilitates seamless integration with SIS platforms, ensuring real-time data synchronization and providing a unified view of student information across the digital ecosystem.
  • Learning Management Systems (LMS): this is crucial for universities delivering online courses and facilitating e-learning. Drupal's compatibility with leading LMS platforms enables integration with course content, assessments, and student progress, offering a cohesive learning experience for educators and students.
  • Administrative third-party tools: from finance and human resources to library management, universities employ various administrative tools to streamline operations. Drupal's integration capabilities extend to these administrative systems, promoting efficient data flow and reducing the manual effort required for data transfer and synchronization.

8. Effective search with Elastic Search and Apache Solr 

University websites are like libraries, filled with all kinds of information. They provide details about courses, faculty, news, and events. Colleges must have an excellent search engine to help users find needed content. That's where Elastic Search and Apache Solr come into the picture. They're prepared to quickly zip through mountains of content and present visitors with exactly what they're searching for.

Drupal makes it easy to add these powerful search tools to the website. Integration is straightforward, thanks to modules and plugins. Once set up, they work smoothly within the Drupal environment. Why are they game-changers for higher education websites?

Elastic Search and Apache Solr are fast and deliver highly accurate search results. This means that whether a student is looking for a specific course or a researcher - for related academic papers, they can find information quickly. Even if their search terms are highly specific or technical because these tools understand and process complex queries.

Not everyone seeks the same things. Elastic Search and Apache Solr let you customize search results, so what's important to you comes up first. This is handy for showcasing essential academic programs or upcoming events on the website. These modules also support advanced search features, such as faceted search, autocomplete predictions, and geolocation-based results. This intuitive and interactive approach enhances the user experience.

As universities grow, so does the volume of content on their websites. These search tools can handle the increasing load effortlessly, ensuring the search function remains fast and reliable no matter how much data is added.

Why is it important to choose a smart CMS for higher education?

A robust content management system, such as Drupal, is the backbone of a university's digital strategy, playing a pivotal role in shaping its online identity and functionality. An effective school content management system serves multiple purposes.

In the academic world, you need a smart CMS that can smoothly handle various types of content. Whether scholarly articles or event updates, this system acts as a central hub with an easy-to-use interface for admins and editors to organize and publish content effortlessly. It makes administrative tasks easier and keeps the digital presence dynamic and up-to-date.

Universities serve a diverse audience, including students, faculty, researchers, and alumni. A robust CMS must go beyond the usual interfaces, offering user-friendly designs for this varied group. Easy navigation, organized information, and responsive design create a positive experience, engaging and satisfying visitors as they explore the college’s virtual space.

For academia, you need to choose a CMS that's more than just a content storage. Faculty, department heads, and content creators should work together smoothly to update courses, share research, and organize events. An advanced CMS for higher education includes vital collaboration tools, making workflows efficient with version control and real-time communication. This not only boosts operational performance but also adds to the overall productivity of the university community.

A smart CMS also allows institutions to create an engaging online experience that showcases campus culture, extracurricular activities, and notable achievements. Interactive elements, multimedia content, and personalized user journeys come together to tell a compelling digital story of the institution.

The Drupal content management system for universities - summary

Selecting the suitable CMS is a crucial move that significantly influences how a university appears online. Thanks to Drupal's features, such as flexibility, multisite ability, multilingual support, and more, academic institutions can confidently move toward creating a lively, flexible, and captivating online space.

If you're creating a website for your institution or rebuilding an existing one, you need the assistance of experienced professionals. At Droptica, we know that Drupal is a CMS for higher education, and we can help you get the most out of it.

Mar 07 2024
Mar 07

In November 2023, we announced three possible release windows for Drupal 11 based on when beta requirements will be completed. We opened the development branch two weeks ago.

Major version updates of dependencies in Drupal 11 include Symfony 7, jQuery 4 and PHPUnit 10 or 11. Based on our findings with the PHPUnit 10 update particularly, we already see that the first release window in June will not be possible for Drupal 11.

The two remaining potential release windows for Drupal 11 are as follows:

  • If Drupal 11 beta requirements are done by April 26, 2024: Drupal 11.0.0-beta1 on the week of April 29, 2024. RC1 on the week of July 1, 2024 and stable release on the week of July 29, 2024.
  • If Drupal 11 beta requirements are done later by September 13, 2024: Drupal 11.0.0-beta1 will be on the week of September 16, 2024. RC1 on the week of November 11, 2024 and stable release on the week of December 9, 2024. In this case the same versions of Drupal 10.4 are planned for the same release windows.

 
Drupal 11 release scenarios visualized (as explained in the text)

Help with getting Drupal 11 ready

Most help is needed around the update to PHPUnit 10, while the Symfony 7 update and jQuery 4 update issues also have more work to do. Join the #d11readiness channel on Drupal Slack to discuss issues live with contributors.

Get involved in person

In the earlier scenario, Drupal 11 will be in beta the week before DrupalCon Portland 2024, while in the later scenario it will be in beta the week before DrupalCon Barcelona 2024. We'll be working on outstanding core issues at the time and updating contributed projects as well at those events.

Drupal 10.3 will be released on the week of June 17, 2024

While the release dates of its alpha and beta version may be different based on the scenario, Drupal 10.3.0 is planned to have a release candidate on the week of June 3, 2024 and a release on the week of June 17, 2024, independent of when Drupal 11 is released.

Mar 07 2024
Mar 07

Introduction

The article explores the meaning and importance of soft skills and how professionals can identify and develop soft skills gaps.

Every professional faces experiences that highlight gaps in their soft skills. The wise ones work on themselves and improve. 

They understand the value and necessity of improving their soft skills.

Unfortunately, some professionals struggle to see these gaps in certain aspects of their behavior. 

Work becomes a struggle for them and the people around them.

And they find their careers stagnated. That's how important it is to have polished soft skills.

Make no mistake; there's nothing "soft" or secondary about these skills—because having these aptitudes can be the difference between an extraordinary career and one filled with friction and stress.

What Are Soft Skills?

Soft skills—or, more accurately, people skills—are personal qualities, behavioral patterns, and habits of a person that affect how one interacts and behaves while working with others. 

People need these skills to navigate everyday life at work, home, and other social circles. 

The more refined these skills, the easier it is for people to connect, communicate, and collaborate.

It's about how one carries oneself with other people.

Why Are Soft Skills Important At Work?

If we lived by ourselves, utterly independent of the world and its people, we probably wouldn't have needed soft skills at all. 

Humans are social beings. 

We work in groups and depend on each other for our livelihood and safety.

Learning to get along with people is a primary requirement—and everyone starts from scratch. (That's why these behavioral and personality traits are called "skills.") 

And nowhere is the importance more pronounced than at work; our livelihood depends on our work and professional growth.

Better Hiring Prospects

Recruiters and managers want people with proven soft skills.

According to this LinkedIn survey, people skills have become more important than hard skills, and recruiters will often reject a candidate—otherwise proficient at their core job related skills—for a lack of soft skills. 

They will intentionally test your level of mastery through subjective and situation-based questions during the interview.

Candidates who can conduct themselves professionally and collaborate effectively with minimum friction contribute positively to team dynamics.

Better Professional Growth

Some soft skills like communication, adaptability, collaboration, critical thinking, and decisiveness make one more suited for leadership roles. 

Demonstrating these skills in your daily interactions at work will put you as a front-runner when a leadership opportunity arises. 

Your leaders will feel more confident about project and team success under your guidance.

Good Relationships 

Businesses revolve around people. People run companies. People make up customers, investors, clients, and vendors.

Work revolves around people, too—to solve their pain points.

Polished soft skills, like communication, collaboration, and integrity, will enable you to connect and build strong relationships with others.

And strong relationships mean good work dynamics, access to willing help when stuck, and getting picked for better prospects.

Better Adaptability To Changes

Change is a constant in dynamic and growing workplaces. 

Organizational growth results in expansion, and expansion necessitates more change—in systems, people, and processes—to scale effectively.

Soft skills, particularly adaptability, empower you to navigate these changes frictionlessly. And fast.

Heightened Work Satisfaction

Better work satisfaction is a cumulative result of the positive consequences of having good soft skills, such as effective communication, friendly collaborations, and better leadership ability.

These factors eventually contribute to an overall sense of accomplishment and contentment.

Click here to check out our open positions.

How Are Soft Skills Different From Hard Skills?

Hard skills are specific and measurable abilities that one needs to do their core work. For instance, a software engineer's hard skills are coding, data analytics, programming, etc. 

Hard skills are directly related to one's work. 

On the other hand, soft skills are intangible qualities that influence one's behavior with others and how well one can thrive in a work environment.

Both are equally essential for long-term success, especially now, as organizations gradually realize the importance of having a supportive, positive work culture. 

What Are The Most Essential Soft Skills For Professional Success?

The following soft skills are often interrelated with each other.

Essential Soft Skills For Success

When you work on improving one skill, it might lead to improving others, too.

And you might feel it's like a lucky coincidence. But it's never so.

Each skill is a part of your character, and when you improve individual skill gaps, you'll automatically improve your personality—becoming a better, well-rounded professional.

Integrity And Dependability

There is hardly anything as crucial as integrity at work. 

It takes a long time to build and continuous effort to maintain.

It demands honesty, openness, and sticking to one's word. 

You connect the line between what you say and what you do, which includes meeting deadlines, sticking to agreements, and delivering on promises.

How do you practice integrity at work?

  • Plan your work and communicate what you intend to do
  • Execute your plans openly and stick to the mentioned timelines
  • Communicate openly about blockers and ideas and negotiate your work according to priority (don't try to do everything all at once—you'll either push yourself to burnout or miss the deadlines)
  • Own up to your mistakes and take responsibility for your actions
  • Stick to the company values and ethics, even while making tough decisions
  • Respect the confidentiality of sensitive information of your organization and team members

By sticking to these behavioral traits, you can establish yourself as a dependable team member, contributing to a safe, positive work environment. 

Communication

Many people need help understanding what effective communication looks like. 

Most of the confusion, conflict, and disorientation in a team or company stems from a lack of communication skills.

Effective communication means one can clearly convey their intended messages, plans, ideas, project updates, and briefs to others. 

How do you practice and improve your communication skills?

  • Start by focusing on specific communication skills like writing, speaking, active listening, clarity, brevity, and comprehension (many will focus on improving their writing and speaking skills, but not so much on comprehending messages as intended)
  • Build your confidence in communicating by doing it more often, even when you feel that there is no need
  • Practice bringing clarity of thought before sharing any message. Write down the main points if required, and edit once more before hitting 'send'
  • Always ask questions whenever there is a doubt to avoid confusion and improve your comprehension and listening skills
  • If you are not sure about any communication skills gap, seek feedback from your team members

Collaboration

Collaboration skills help you work effectively in a team and achieve common goals. 

It also enhances your overall productivity because you get more done when the team works together by leveraging their strengths.

And it's one of the significant leadership skills: to be able to work with a disparate group of people and get results.

How do you improve your collaboration skills?

  • Develop a warm and friendly attitude; try to be humble in your interactions
  • Work on your organizational skills: prioritize tasks, break them down into manageable steps, set deadlines, and create schedules. Develop systems for managing information and materials and share access with required people
  • Be inclusive and open with work-related information so that it's easily accessible to all involved people
  • Develop the habit of proactive communication, and always stick to open channels to keep everyone in the loop about what's going on and bring accountability into the process
  • Understand the importance of integrity in all your communication and interactions because reliability and dependability are essential while collaborating

Problem-Solving

As your career advances, you will notice more hurdles and challenges coming your way.

That's what leadership is mostly about—finding solutions to problems to meet organizational goals.

It can be anything: getting more customers, increasing brand awareness, or establishing new processes for improved efficiency.

The more problems you solve, the more indispensable you become. And that means professional and financial growth.

How can you improve your problem-solving skills?

  • Develop your comprehension skills to understand the problem statement and formulate the right questions that you need to find the answers to
  • Improve your researching skills to sift through relevant information to your problem statement(s)
  • Embrace creative thinking. You can always take inspiration from others and customize solutions to fit your needs but don't shy away from finding novel ways of doing things
  • If it is a big problem statement, isolate a time in your calendar to strive for its solution—you might need to invest more time and energy than for usual tasks

Research And Comprehension

How often did you Google something related to your work this week alone? Knowingly or not, we all keep learning new things, however trivial or complex, to keep up.

Having a solid foundation of research skills is empowering. 

It lets you make informed decisions, adapt to industry trends, plan strategically, and have a competitive edge. 

How do you improve your research and comprehension skills?

  • Develop the habit of reading—things relevant to your industry and whatever else you find interesting. If it's work-related, practice summarizing key points and taking relevant notes during active reading for better retention
  • Develop a structured research method, set clear objectives, and organize information systematically
  • Explore reputable journals, industry reports, and diverse perspectives to gain a broad understanding and to keep yourself up-to-date
  • Cultivate a mindset of continuous learning: stay curious about industry trends and dedicate time to ongoing education
  • Apply what you've learned whenever the opportunity arises, like contributing to projects and solving problems at work

Self-Management

When you can drive yourself effectively, how your role needs you to, it increases your reliability score in front of colleagues.

It involves taking ownership of your objectives—without relying on constant supervision—and delivering high-quality work.

But that doesn't mean not asking for help or clarifications when needed.

People who can manage themselves and their work experience job satisfaction and overall well-being. 

How do you improve your self-management skills?

  • Pay close attention to your emotions and try to introspect the reasons behind them, especially about your work. If you find negative emotions taking control over you, especially when you're exploring new or challenging tasks, reach out to a performance coach or seek help
  • A big part of self-management is energy management: realizing how different periods of the day and different kinds of work affect your energy levels
  • Plan and prioritize your work and proactively communicate about your progress to your supervisors; ask for clarification or direction when in doubt
  • Create a schedule for your projects and try to stick to them

Emotional Intelligence

Emotional intelligence is the ability to understand, manage, and express our emotions effectively. 

It also involves being able to recognize and respond to the emotions of others skillfully. 

Emotional intelligence is becoming increasingly important for professionals in various fields, as it impacts one's ability to work effectively with others, communicate clearly, and manage conflicts. 

It can help you build stronger relationships, improve leadership skills.

How do you grow your emotional intelligence? 

  • Engage in regular self-reflection to identify and understand your own emotions
  • Practice mindfulness techniques to stay present and aware of your emotional responses in different situations
  • Recognize patterns in your emotional reactions and their impact on your behavior
  • Build your empathy by actively listening to others and seeking to understand their perspectives and feelings
  • Practice non-judgmental communication, validating others' emotions even if you disagree with their viewpoint
  • Learn constructive ways to express emotions, especially in challenging situations
  • Develop conflict resolution skills, focusing on finding solutions rather than placing blame

Broad Vision

Irrespective of where you work, it's necessary to have a big-picture perspective on the company, its goals, audience base, and your role in making it all happen. 

When you see how your work fits into the bigger picture, it's easier to stay focused and motivated. 

Everything you do will be based on this vision: strategy, planning, prioritizing, and establishing targets or goals for yourself and your team.

This way, you can direct your efforts to where they'll create the maximum positive impact. 

How do you develop a broad vision?

  • Understand the organization's mission, values, and long-term goals
  • Align your professional goals with the strategic direction of the organization, and regularly revisit and update your objectives to ensure they remain in sync with the broader vision
  • Engage with colleagues from various departments to gain insights into their roles and responsibilities and build genuine relationships to avoid getting into a transactional mindset
  • Collaborate on projects that involve cross-functional teams, allowing you to understand the organization holistically
  • Stay informed about industry trends, market dynamics, and emerging technologies related to your work and the organization

Soft skills play a significant role in personal growth and professional success. 

They help us communicate, collaborate, and connect effectively with others in the workplace. 

It creates a mature work culture, driven by trust, care, and enthusiasm.

Click here to check out our open positions.
Mar 07 2024
Mar 07

In today's globalized digital space, multilingualism plays a huge role. Information resources are often popular among representatives of different nations and language groups. These people may have different beliefs and be followers of other religions, but they all have access to information on the Internet. Modern developers must always take the issue of universal access responsibly. The more versatile their site is, the more people they can reach the math, numbers, and facts. For example, 55% of pages on the Internet are in English, but only 19% of users are English-speaking.

Understanding Multilingual Requirements

Multilingual supported by CMS Drupal from the beginning and is constantly being developed. It is incredibly convenient that translations are stored in one place, on the official server, and updated regularly. The number of supported languages is also constantly growing (now more than 100). This is very convenient because you don’t have to translate manually every title and page. In general, the translation will be carried out automatically. However, there are some subtleties here. For example, translating content and translating the user interface are two different things. Below, the Golems web development company will talk about this in more detail.

Multilingual website disadvantages

If your website is made in only one language, then representatives of other language groups will not be able to gain any information, will not create traffic for you, and will not become your clients. Translating a website into other languages automatically increases the amount of traffic and customer base; this is a natural process.

Drupal Multilingual Features Overview

All text on the Drupal site is divided into certain blocks and categories. Each of them must be translated into another language. If a person translates the text, it takes a lot of time, but Drupal can do it automatically. However, you need to install modules for text translation and select the translation language. Also, you will need to add a language switcher to the site so the user can choose. Let's take a closer look at this process using specific examples.

Multilingual features in Drupal - adjustments

Well, first, you need to have four modules: 

After you have activated the modules, in the admin menu, click “configuration,” then “regional and language standards” / “languages”. After clicking, add a language. Once you have chosen to add a language, you will be presented with a menu with a selection of available languages. Once the translation is uploaded, you will receive a confirmation message and return to the languages page. Congratulations! You have added a new language to your site, as you can see - nothing complicated.

Don't forget to update your translations!

This is also relatively easy to do - Drupal will do all the work for you. You need to click on the right side of the "edit" button, after which you will see a list. This list has only two options - "translate" and "delete." We don't need to delete anything, we need to translate. When you click the "translate" button, Drupal will automatically download an updated translation version for the language you select.
Now, you need to add a translation for the content on the site, a translation for the configuration text, and a translation for the user interface.
Remember? We have just downloaded four modules. Let's briefly look at the basic concepts:

  • Text content. This is the text of the comments, user menu links, and other elements.
  • Configuration text. For example, this is the text that the developer sees. This is the text of your site's automated messages, field labels, view names, etc.
  • User interface. This text is initially present in the interface of themes, modules, headings, forms, and other elements. The user of your site usually needs to see this type of text.
  • Language module. It includes more than 100 languages, and the list is growing. This is where you select the language to add to the site.

Language switcher

We also need to add a language switcher to the site. There are two main conditions for this. First of all, you have to. You must first set the "hours and location" block. Additionally, the main theme must be set to "Olivero" before adding a switch. Now, you can proceed to install the switch. You can do it like this:

  1. So, you have the "Olivero" theme installed (the theme should be open in an additional tab).
  2. Next, select - admin/structure/block. You will see a list of available theme regions on the "block layout" page. 
  3. Okay, let's move on. We need to find the region sidebar in the list. Nearby, we see the value "place block" - click it. 
  4. After this, the "place block" window will appear in front of us, where all the available blocks will be. 
  5. Next, you must click the "place block" next to the "opening hours and location" block. 
  6. After this, you will see a "configure block" window with fields that must be filled out correctly.

In the admin panel, we need to go to:

configuration/regional and language/content language and translation

and select the types of objects for which translation will be available.

Text translation

All the steps we performed earlier were preparation. Now, we can move on to translating the content on the site. After you have installed the modules and made the necessary settings we discussed in the article, you will have an additional “translate” tab when editing the page.
A list of languages that you have downloaded will be available in the “translate” tab. Please note that the language is displayed because you downloaded it earlier, but has not yet been added to the page. To do this, click the “add” next to the “language”.
Once you have added a language, the translation will occur. All content types that you previously selected will be translated. Translation is carried out according to the basic concepts we have already discussed in the article. Therefore, you can see changes in the interface. Now, all you have to do is add the translated content to the fields. The last step is to click on the “save” button.

Best Drupal Practices for Multilingual SEO

The issue of SEO is crucial for website promotion. The growth of visitors directly depends on this. Here are some valuable tips:

  • Translating the text on the page and the text that may appear in the pictures is necessary.
  • Optimize your video. You can add subtitles in different languages if you have videos on your site. For example, you can add subtitles to a YouTube video posted on your website.
  • For some cultures and peoples, some types of pictures may be offensive; please be aware of this. For example, for a resident of India, the image of a swastika is a sacred symbol. Still, for residents of Germany, the image of a swastika has a completely different meaning.
  • Study your target audience and traffic statistics. Determine the language groups. This directly determines which languages you need to add to the site.
  • Don't forget about keywords. After the Drupal module does the translation, make sure that the content contains the correct keywords in the appropriate language. Sometimes, this has to be done manually with the help of online translators, AI, or even hired specialists.
  • Remember, customer support is no exception. At least you can add some of the most used regional languages to the FAQ page. 
  • Artificial intelligence. In order to add online customer support in other languages through a chatbot, many modern developers are actively using artificial intelligence.

How to prevent pages from sticking together? - URL & “hreflang” tags

“Hreflang” tags are used to ensure that pages with the same content do not get mixed up with each other. Also, you can specify not only the language version of the page but also the region for which this version is intended. There are a few simple rules for this:

  • kk - language
  • LL - region
  • URL - the correct URL of the alternative page

“Hreflang” is used together with the “alternate” tag, for example:

The use of special tags is a requirement of search engines, but there is no complete guarantee of protection against “gluing”. When adding this tag, you need to remember about page linking. On the English version, you indicate the German version, and on the German version, you indicate the English version.

More Drupal multilingual modules

In addition to the four basic modules that we talked about in our article, there are others. Here are a few modules that can help you make your website multilingual.

Words Online Connector
Allows you to send content for translation directly from the site to the WordsOnline translation service. You will not need to leave your workspace. For this module to work, you need to install the TMGMT module.

Language-Country Negotiation
A small module that performs an important function - it eliminates the need to register a region for each country. The module will do this independently—a precious solution when the site has many pages.

Open AI Translation Toolbox
It will help you translate website pages quickly and efficiently using artificial intelligence. It is a very convenient solution when you need to translate a large amount of text in a short time.

We have highlighted just several modules from the list of others. For complex projects with a large number of pages and a large audience, additional modules can be a huge help.

Conclusion or How do I make my Drupal site multilingual?

Drupal makes it possible to create a multilingual website and significantly expand your audience. A multilingual Drupal site is easy to maintain and update. Methods for promoting and translating pages are constantly evolving, which makes the owner's life easier. Plus, the international multilingualism in Drupal allows you to distribute your working time and achieve better results more effectively. Let`s make your Drupal site multilingual!

Mar 06 2024
Mar 06

Introduction

In 2015, Spotify launched Wrapped, initially named "Year in Music." The feature allowed users to view their listening activities in the past 365 days. The tool provided statistics such as the user's top-played songs and the total hours dedicated to music. 

Over the years, Spotify Wrapped has solidified its status as an annual tradition, eagerly anticipated by users as they revisit their musical journey and uncover personalized insights into their listening habits.

To create Wrapped, Spotify collects data all throughout the year via its app. To count as a stream, a song or podcast must be listened to for at least 30 seconds. Year-end rankings for top albums, songs, and artists are based on total streams, while top podcasts are ranked by unique listener numbers.

 

[embedded content]

In 1996, Oral B collaborated with IDEO on a project to revamp a children's toothbrush. Initially skeptical, Oral-B resisted IDEO's proposal for field research, deeming it unnecessary. IDEO carried on the field research anyway, uncovering some key insights.  

They noticed that kids didn't use their toothbrushes the same way as adults. IDEO designed a toothbrush with a bigger, squishy handle to better fit kids' hands. This design, adopted by Oral B in 1996, became the standard toothbrush design for kids. 

[embedded content]

These examples showcase how quantitative and qualitative data help guide product design and enhance market penetration.

Understanding The Role Of Qualitative And Quantitative Data in Design

Traditionally, designers relied on intuition and experience as their key assets. 

With both qualitative and quantitative data, they started deriving meaningful insights, helping them create innovative products.

Qualitative data in design refers to non-numerical information providing insights into the subjective aspects of a product or user experience. This can include user feedback, emotions, preferences, and observations.

Quantitative data involves numerical information and measurable metrics and includes metrics like page views, click-through rates, task completion times, or any other quantitative data that can be analyzed for statistical trends and patterns.

Qualitative-vs-quantitative-data-in-design

Source: Hubspot 

How Qualitative Data And Design Come Together

Qualitative data methods provide designers with a deep understanding of user experiences, preferences, and emotions. These approaches are invaluable for creating user-centric designs that resonate with the diverse needs and expectations of the target audience.

How Quantitative Data And Design Come Together

Quantitative data offers a structured approach to design insights, providing designers with numerical metrics and statistical analyses. These methods focus on measurable aspects, such as user interactions, click-through rates, and engagement levels. 

Quantitative data is essential for assessing the overall performance of a design, identifying patterns, and making data-driven decisions at scale.

Qualitative Data 

Quantitative Data 

Usability-Testing Usability TestingObserving users interact with a product in a controlled environment helps identify usability issues and areas for improvement.

Usability testing observes users attempting specific tasks with a product. This exposes usability issues like confusing buttons, unclear navigation, or frustrating workflows. Qualitative data comes from observing users' expressions, hesitations, and comments, which reveal the reason behind their actions.

User-InterviewsUser InterviewsConducting one-on-one interviews allows designers to explore user attitudes, preferences, and motivations in-depth.

User interviews probe into users' thoughts, feelings, and motivations before or after testing. This qualitative data sheds light on broader issues like product appeal, user expectations, and needs. It helps understand the "why" behind user behavior and preferences.

Design-AnalyticsDesign AnalyticsAnalyzing design metrics provides insights into user interactions and engagement.

Tracking conversion rates is a quantitative data that shows how many users complete desired actions, like signing up or making a purchase. This reveals which design elements influence user behavior and lead to desired outcomes.

Tracking bounce rates helps see how many users leave a website or app without engaging. It highlights areas of confusion or disinterest, prompting design changes to improve retention.

Tracking time spent on page helps analyze how long users interact with specific elements or sections. This helps identify engaging content and areas needing improvement.

AB-TestingA/B TestingTesting variations of a design helps identify the most effective elements.

It helps track how many users successfully complete forms or surveys and identify design elements to simplify the process.

It also helps compare how often users click on different design variations, like buttons or calls to action. This reveals which elements capture attention and drive user action. 

Heatmaps-and-Click-TrackingHeatmaps and Click TrackingVisualizing user interactions through heatmaps aids in identifying popular areas.

Overlaying color gradients on a design based on user clicks or mouse movements displays areas of high and low engagement, highlighting elements that attract attention.

Scroll depth tracking helps assess how far users scroll down a web page. This reveals if the content is engaging enough to hold their attention and if key information is readily accessible.

Fusion Of Data And Design: A Step Towards Success

Influence-Of-Data-On-Design

Data-driven design bridges the gap between creativity and user-centric functionality. Fusing data and experience design results in multiple benefits.

Understand-User-NeedsUnderstand User Needs

Data-driven design allows designers to delve deep into user behaviors, preferences, and pain points. YouTube analyzes user watch history and engagement metrics to recommend personalized content, creating a platform tailored to individual user interests. 

“To really make sure viewers are satisfied with the content they’re watching, we measure what we call “valued watchtime”—the time spent watching a video that you consider valuable.” Cristos Woodrow, VP Of Engineering, YouTube 

YouTube-Journey

Create-Effective-DesignsCreate Effective Designs

By leveraging data, designers can adopt a human-centric approach, ensuring impactful designs. Apple collects user feedback to continually enhance its products and website. 

Apple-Website-Feedback

Drive-InnovationDrive Innovation

Innovation thrives when fueled by data insights. 

Popular language learning app Duolingo ran research studies and collaborated with university researchers. The idea was to assess how well their learners acquire skills such as reading, listening, and speaking

The research confirmed that their courses are effective learning tools, according to standardized language tests.

According to the brand:

  • Learners who completed five units of their French or Spanish course on Duolingo performed as well on reading and listening tests as students who had completed four semesters of university language study
  • Learners who completed seven units on Duolingo scored as well as students who completed five semesters of study.

Duolingo-blog-data-analysis

The Key Challenges In Data Collection

The key challenges that designers face in collecting data include:

Collection and Privacy Concerns

The Challenge: Balancing the need for data with privacy concerns poses challenges. Users may resist data collection methods affecting their privacy.

Facebook had faced backlash for its data collection practices, leading to increased scrutiny and privacy concerns among users.

Facebook's extensive data collection practices, encompassing information from user profiles, online activity, and even browsing habits beyond the platform, have attracted significant criticism. This has led to heightened user concerns about privacy, with individuals questioning how their data is used and protected. These concerns increased scrutiny from regulatory bodies worldwide.

Data Biases

The Challenge: Inherent biases in collected data may adversely impact the fairness and inclusivity of designs. Drawing inaccurate conclusions from the biased data can lead to flawed design decisions.

Microsoft's infamous Tay chatbot incident, where it learned and amplified harmful language due to misinterpretation of user inputs, highlighted the risks of incorrect assumptions in data-driven systems.

Tay was designed to learn and chat like a teenager by interacting with users on Twitter. This inherently exposed it to unfiltered negativity and toxicity. While safety filters were in place, they proved inadequate for the coordinated, malicious attacks.

Tay, lacking appropriate filters and context awareness, internalized and repeated this harmful language, amplifying its spread. Within hours, Tay's tweets included racist, sexist, and politically charged remarks, leading to widespread outrage.

Microsoft was forced to take Tay offline within 16 hours of its launch. Tay served as a wake-up call for the tech industry, prompting a reevaluation of assumptions, bias, and accountability in AI development.

Putting Data Into Action For Innovation

Converting data into actionable insights is essential for innovation. Here are some steps that firms can take in this direction:

Step 1: Set Goals And Objectives

Clearly articulate objectives aligned with business goals and user needs. The finalized goals will provide a focused direction. 

Step 2: Collect And Analyze Relevant Data

Gather diverse and high-quality data relevant to your objectives. The richness and relevance of data is important and helps contribute to meaningful insights.

Step 3: Identify Patterns and Insights

Derive meaningful trends and insights from the collected data. Identifying new patterns can help you designers understand user behaviors and preferences in a better way.

Step 4: Making Data-Informed Design Decisions

Use data to make informed design choices. Don’t forget to balance qualitative data with quantitative data to drive your design considerations.

Step 5: Ideate And Prototype Solutions 

Generate creative solutions aligned with identified patterns. Ideation allows designers to explore various innovative possibilities.

Step 6:  Use Data To Iterate And Refine

Continuously refine designs based on iterative data feedback. Regular iterations ensure that the design aligns with evolving user needs and preferences.

Step 7: Test And Validate Solutions

Rigorously test and validate prototypes to ensure effectiveness before implementation. Testing ensures that the proposed solutions meet user expectations.

Pro Tip: Don't Solely Rely On Data

Balance data with design intuition. While data provides valuable insights, the human touch in design remains indispensable.

How Axelerant Leveraged Data For UEL  

University of East London (UEL) vision is to reshape education, giving all students the skills and opportunities to thrive in a changing world website. The UEL website needed features to enable the change it envisions.  

The Challenge

UEL’s old website existed on Sitecore, and the platform needed better system performance with the following ask:

  • An advanced course search to enable prospective students globally
  • Personalized content suited to each user no matter the demographic or location
  • A unified content hub for publishing content (including videos, events, and social media posts) for a complete user experience. 

Solution

Axelerant helped conduct an audit of the university’s existing Sitecore platform to assess the ease of use and functional agility for internal and external users.

Through a blend of Qualitative User Research techniques, our team worked on achieving the desired results. With a How Might We approach to product design, we focused on gaining in-depth insights into the users and well as the stakeholders. 

We followed two qualitative research methods, including:

  • User Journey Mapping: We used the research findings captured in earlier steps to chart a user’s journey on UEL’s website.
  • Stakeholder & User Interviews & Mapping: We understood the vision and the goals of the university and mapped the expectations of their user base with the same. We engaged UELs stakeholders and potential users such as students, alumni, staff, etc. 

Results

Axelerant’s collaboration with UEL resulted in a platform that offers a complete experience for its target audience. UEL was able to introduce advanced course search, personalized content, and a unified content hub.

Learn more about how data-driven research can boost innovation for your products by connecting with our team.

Mar 06 2024
Mar 06

Ensure you have the right expertise

Whether Drupal is a suitable solution begins with acquiring or hiring the right person or people.

  • You want to work with someone who has a lot of knowledge about Drupal and the available free modules (all Drupal modules are free and open source)
  • Drupal modules are easy-to-install pieces of code that extend the basic functions of Drupal 
  • Drupal shines best when you combine existing modules
  • This allows you to build a website faster and cheaper because you don't have to create everything from scratch
  • It's a matter of smartly using what other people or organizations have already created

If you have this expertise in-house or have someone on your team who does, then Drupal is suitable for virtually all types of websites.

Is Drupal suitable for a simple corporate website?

If you want a simple business website with a few pages, you can use Drupal for that. Especially if you have the expertise described above. If not, you might want to consider WordPress or services like Wix or Squarespace. However, note that with the latter two options, you take a risk because you never own your own website.

Is Drupal suitable for a slick, beautiful website with animations?

Absolutely. You can customize the so-called Drupal themes to your heart's content. Choosing Drupal doesn't mean you're limited in terms of look and feel. 

Additionally, you can even choose to completely decouple the front end from what Drupal delivers. This is also known as 'Headless'. This way, you have all the freedom to design and build the front end of the Drupal website as you wish while retaining the benefits of Drupal's back end.

Is Drupal suitable for a community?

100%. Drupal out of the box already offers many features important for a community, such as user registration, but it's also easily expandable with free open source modules like the Group module. With this module, you can create different groups within a Drupal website, designate group administrators, and make content available only through a Group. This way, you can create a website that functions similar to Reddit or Facebook in terms of features.

Is Drupal suitable for an intranet?

An intranet and community often have the same functional characteristics. In that case, Drupal is also suitable for building an intranet. I have personally built several intranets with Drupal where colleagues could share news among themselves. It's also possible, for example, to display colleagues' birthdays to show who is celebrating on that day.

Is Drupal suitable for an online magazine?

Drupal is also extremely suitable for an online magazine. As mentioned above, you can design and style the front end of Drupal as you wish. This means you can also display beautiful large photos as is customary on trendy magazine websites. Additionally, Drupal includes the ability to be extended with a powerful search system like Elasticsearch. Users can then easily search among a large number of articles.

Is Drupal suitable for an online shop?

When it comes to building an online shop, I must admit that I haven't always had the best experiences with Drupal (but this was more than 5 years ago). Building an online shop involves a lot, such as managing inventory, calculating shipping costs, and handling payments. There are modules available like Drupal Commerce that can handle many of these things out of the box, but configuring this module is quite a task. If you have a small online shop, you're probably better off with a specialized service like Shopify.

Is Drupal suitable for a large dataset that users can search through?

When you connect Drupal with the aforementioned Elasticsearch, and ensure you have enough server power, it is certainly possible to use Drupal for searching through large datasets. Elasticsearch is also used by notable companies such as Uber, the aforementioned Shopify, and Slack.

This allows you to leverage the modularity of Drupal to its fullest. Drupal's standard search engine is suitable for a few hundred records, but if you want more, it's possible to connect an external service.

Where else is Drupal suitable for?

Do you have a specific use case and want to know if Drupal is suitable for it? Let me know by leaving a comment below.

Mar 06 2024
Mar 06

This is the first episode of Skills Upgrade, a Talking Drupal mini-series following the journey of a Drupal 7 developer learning Drupal 10.

Topics

  • Chad and Mike's first meeting
  • Chad's Background
  • Chad's goals
  • Tasks for the week

Resources

Chad's Drupal 10 Learning Curriclum & Journal
Chad's Drupal 10 Learning Notes

Hosts

AmyJune Hineline - @volkswagenchick

Guests

Chad Hester - chadkhester.com @chadkhest
Mike Anello - DrupalEasy.com @ultimike

Mar 05 2024
Mar 05

Component-based web development has become the de facto approach for new Drupal projects. Componentizing your UI has multiple advantages, like modular development, improved automated testing, easier maintenance, code reusability, better collaboration, and more. Because of these benefits, we led the effort to create a component solution for Drupal core: Single Directory Components (SDC).

As part of that suite of modules, we created CL Server. Initially developed for the CL Components module (a contrib precursor of SDC in core), it eventually became the basis for SDC in core. 

In coordination with a Storybook plugin, this module allowed anyone to create a catalog of components using Storybook, an open-source project for developing UI components in isolation. It allows developers to build, test, and document their components without constant integration with the rest of the codebase. Storybook promotes consistency across components by providing a centralized location for designers, developers, and QA engineers to share their work, with documentation capabilities to help ensure that components are easily understood and maintained.

Our Drupal integration worked great for a while. But we started to feel its limitations.

Limitations with the current approach to Storybook

Storybook has the concept of decorators, which are divs that surround the components inside of Storybook. These are useful when your component needs some contextual markup. 

For example, a grid element. This component may not look correct when rendered in isolation. It needs more context. In general, the CL Server approach was coupling the HTML in the Storybook story to the HTML that a component generates. We needed to have more control over the markup rendered in Storybook.

Another issue was that CL Server worked with the YAML/JSON version of stories, as documented in the official docs. YAML and JSON are not programming languages and lack dynamic features that we missed, like setting variables, translating strings, looping over complex structures, and providing non-scalar arguments to Storybook (like objects of type Drupal\Core\Template\Attribute). You cannot instantiate a PHP object in JSON since JSON knows nothing about PHP.

Finally, we experienced issues upgrading the necessary addon @lullabot/storybook-drupal-addon after major releases of Storybook. We kept running into backward compatibility issues, tangled dependencies, and the need to support two major versions of Storybook simultaneously during this transition.

In search of an alternative

The initial implementation of CL Server started as an experiment that people liked and used. We started it before Storybook committed to their server-side framework. Still, it worked, thanks to the addon @lullabot/storybook-drupal-addon and some conventions in JSON/YAML stories format for SDC components.

During our research for an alternative, we realized that the Storybook team did not mean for us to write JSON stories. They only used JSON because all languages know how to read and write with it. We needed to generate the JSON from our stories, which should be written in our native templating language.

In Drupal's case, that’s Twig.

If a server-side application writes the stories in their template language, then stories can import components and generate contextual markup with front-end developers' tools. Using Twig to write stories would solve all of our current limitations.

Moreover, by generating the JSON, we can have Drupal add some finicky metadata that will make the Storybook addon unnecessary. All the problems of upgrading Storybook to newer versions would be solved. By adding this extra metadata, we would only need the native integration for server-rendered components maintained by the Storybook team.

But how do we make Storybook, a JavaScript application, understand our Twig-PHP components while avoiding Twig.js?

The proposal

The goal is to create a way to write several stories in a single Twig file, in line with the official Storybook documentation on writing stories:

 

A story is a function that describes how to render a component. You can have multiple stories per component, and the simplest way to create stories is to render a component with different arguments multiple times.

For this to happen, we created two new Twig tags, {% stories %} and {% story %}

{% stories %} is a container for each individual story, but it also allows us to add metadata to the file as a whole. This metadata will be included in the transpiled JSON version. 

{% story %} also contains metadata for Storybook, but it is the actual Twig template to render for that particular story. In other words, it contains the twig code we want to render in the Storybook canvas when the story is selected. Pretty intuitive.

Consider this extremely simplified example:

{% stories my_id with { title: 'Components/Examples/Card' } %}

  {% story first with { name: '1. Default', args: { foo: 'bar' } } %}

    {# Here, use any Twig you want, including custom functions, filters, etc. #}

  ...

  {% endstory %}

{% endstories %}

Two main things are going on. First, the data object after with in both tags will be sent to Storybook as the story metadata. See the Storybook docs for a complete list of the available options.

The second thing is that the code inside the {% story %} tag will be turned into HTML by Drupal and sent to the Storybook application to display. You can paste static HTML, embed a component using {% embed %}, loop over a data array, and more. 

Note that the variables available in this Twig code are the ones added via args or params. Watch this 5-minute video for more details on how to write stories that embed nested single-directory components.

After writing your template, transpile it from Twig to JSON. To do so, you can use the drush commands provided by the storybook module. You can compile a single template by passing the path to the template:

drush storybook:generate-stories path/to/your/file.stories.twig

Or, you can have drush find all the template files in your system and then transpile them one by one. The command for this is:

drush storybook:generate-all-stories

This command will also check whether the JSON stories exist and whether the file is newer than the Twig stories. If so, it will skip the transpilation process for that particular file, thus saving resources in repeated runs. This is useful when executing the drush command continuously in the background every few seconds. You can "forget" about the transpilation process. You can use watch in Linux and macOS (you may need to install it with homebrew in macOS).

watch --color drush storybook:generate-all-stories

Running Storybook

Once our stories are generated in JSON, it's time to do our initial one-time setup. This will configure Storybook to search for the stories in the correct folders in your filesystem and configure CORS for Drupal.

Check out the module's README for detailed documentation on how to do this. Alternatively, this video demonstrates a full setup in less than 5 minutes.

After setup, you will find your stories in the sidebar when you start Storybook. They will all be grouped by a folder with the name specified in the `title` metadata property for the {% stories %} tag, with the name used in name on the {% story %} tag.

Also, note how the Controls tab lets you update the variables passed into Twig in real time. These correspond to the `args` provided in the `{% story %}`.

From here, you can start using your Storybook for your purposes. Take a minute to explore the available add-ons, which add functionality like a language selector, automated accessibility audits, a breakpoint selector, and more.

For more information on this module, view the full demonstration video.

Mar 05 2024
Mar 05

Authored by: Nadiia Nykolaichuk.

Managing customer interactions touches on many aspects. Luckily, instead of using endless spreadsheets, notes, emails, chats, and form fills, you can rely on just one application — a CRM, or customer management system. A CRM will help you easily consolidate, manage, track, and analyze all customer interactions at every step of their journey throughout your sales funnel. 

Customer management becomes even more efficient when your CRM is integrated directly with your company’s website. This article is an invitation to discover more about CRM integration use cases and the benefits of connecting a CRM to your site. We’ll also discuss the ways to do it in the Drupal CMS and the modules that might come in handy, with a special focus on the Salesforce Suite module. 

CRMs: a steady upward trend in popularity

CRMs have firmly established themselves as long-term players among various software programs for businesses. As an illustration, there is some fresh data from Statista — a leading platform for statistical data and market research. According to it, revenue in the global CRM software market is expected to grow by an average of 10.59% every year from 2024 through 2028. The market volume is forecast to hit a whopping US$131.90bn by 2028.

 A chart showing the projected revenue growth in the global CRM software market. A chart showing the projected revenue growth in the global CRM software market.

A glimpse at CRM integration and its use cases

When it comes to CRM integration with a business website, it involves connecting the two systems to ensure seamless data flow between them. The goal is to create a streamlined approach to managing customer relationships across different touchpoints.

The data flow might include pulling data from the CRM to the website and/or pushing the data from the website to the CRM. Sometimes, CRM integration involves the embedding of particular components.

The specifics of CRM integration are based on the company’s business goals and requirements. Here are some integration use cases:

  • The CRM system user profiles can be consolidated with the website’s user profiles, with any CRM profile updates sent to the website.
  • Relevant information from the CRM, such as users’ order history, account information, interactions, etc., can be displayed on the website’s dashboard.
  • User activities on the website, such as page views, interactions, or downloads, can be captured and analyzed by the CRM system to create user segments. The CRM can also send the user segments to the website. 
  • CRM-generated lead capture forms, buttons, or banners can be embedded with the website, allowing visitors to submit their information, which is then automatically captured and analyzed in the CRM system.
  • Automated actions can be triggered in one system based on the users’ behavior in the other (for example, assigning a lead to a sales team member after a contact form has been submitted on a website).
  • Personalized recommendations (product suggestions, promotions, thank-you messages, etc.) can be displayed on the website based on the users’ activities within the CRM.
  • Customers can be allowed to access their accounts, order history, and other data from the CRM directly on the website.
  • The CRM can be integrated with the website's e-commerce platform to track and manage customer orders.
  • The CRM data can be integrated with the website’s support ticket system.

How CRM integration can boost your customer management

By integrating a CRM with your website rather than just using both systems separately, you achieve multiple benefits. You make your customer management workflows more efficient, get to know your customers better, enhance customer engagement, and potentially boost sales. Let’s take a closer look at what factors help achieve this.

  • Easier data management

With CRM integration, there’s no need to transfer the customer data between the website and the CRM, which otherwise happens by copying and pasting. All relevant information — such as contact details, purchase history, interactions, quotes, tasks, and more — is at your fingertips, and less time is needed for its management. 

  • A holistic view of data and valuable insights

Consolidating CRM data with the behavioral data from the website gives you a comprehensive picture of your customers’ needs, helps you address them more effectively, and gives you valuable insights for personalized and targeted marketing campaigns. When consolidated, the data from different touchpoints such as the CRM and the website, enhance each other in the most effective way. 

  • Timeliness and efficiency

Thanks to data synchronization, customer data is regularly updated, providing timely information about their activities and preferences. Timely updates lead to better responsiveness, faster issue resolution, and, as a result, improved customer service. Furthermore, automating various actions in one system based on specific triggers in the other provides invaluable input into the efficiency of your customer management workflows.

  • Better collaboration between the departments

Thanks to CRM integration, departments can easily collaborate on customer-related initiatives. Accurate, timely, and comprehensive data can be shared across departments, minimizing the chances of data discrepancies. The communication of all departments with the customers, such as marketing promotions, sales outreach, or customer service interactions, is more aligned and consistent. 

Ways to integrate a CRM with a Drupal website

Drupal boasts exceptional third-party integration capabilities, including extensive options for integrating a CRM with a website. The choice of the solution largely depends on what needs to be done, and how the tool is suited to the task. It’s also necessary to consider if the tool has a supported stable release that matches your Drupal website version.

  • Contributed modules for API integration. First, among a wide array of contributed Drupal modules for various integrations, there is a great choice of modules for CRM integration specifically. Some modules for CRMs also have submodules, making it possible to only choose what’s important by connecting to a specific subset of the CRM’s API endpoints. 
  • Modules for embedding CRM elements. Next, there are contributed modules or submodules that don't do full API integrations but make it easier to embed CRM forms with the website. They come in handy when the customer only wants to embed a form, with no syncing/pulling of the data.
  • Custom coding. Finally, it’s possible to develop custom integration modules for specific projects or create custom code for specific components based on customer requirements. This approach gives ultimate flexibility. It is also a reliable option when there is no relevant contributed module or it is not yet production-ready or robust enough for the goal.

Salesforce Suite: an overview of the module’s features

Let’s take a closer look at the work of a CRM integration module using the example of the Salesforce Suite. Our Drupal development team relies on modules like Salesforce Suite a lot because they provide extensive and robust integrations. Salesforce Suite facilitates every aspect of the integration of the Salesforce CRM with Drupal websites.

Salesforce CRM demo.Salesforce CRM demo.
  • A flexible structure

The Salesforce Suite is an example of a CRM integration module made up of submodules. This makes it easy to select only the needed features rather than use the entire package of all possible options. The main submodule in the suite is Salesforce Integration, while others add their specific functionalities.

The list of submodules in the Salesforce Suite.The list of submodules in the Salesforce Suite.
  • Data sending/retrieving

The module can provide data exchange between the CRM and the Drupal website in one or both directions. The Salesforce Pull submodule pulls data from the Salesforce CRM into Drupal, while the Salesforce Push submodule sends Drupal data to Salesforce.

  • Accurate data mapping

The Salesforce CRM has objects as the main type of data, while Drupal has entities. How to associate them with each other? The Salesforce Suite helps map and synchronize Salesforce objects and Drupal entities. More specifically, Salesforce contacts can be mapped to Drupal users, Salesforce leads, accounts, and opportunities are mapped with the respective Drupal entity types, and so on.

Furthermore, the mapping accuracy is provided by a field-by-field approach. This means that when mapping an object to an entity, you can map specific Drupal entity fields to the corresponding Salesforce object fields.

Mapping is the responsibility of the Salesforce Mapping submodule in the Suite. The Salesforce Mapping UI submodule provides a user interface for doing it seamlessly.

The data mapping interface provided by the Salesforce Suite.The data mapping interface provided by the Salesforce Suite.
  • Data synchronization options

Whenever there is a modification or update in data in one system, it can be reflected in the other. This can be based on two different approaches in the Salesforce Suite. First, the changes can be reflected immediately, without delays. Second, they can be synchronized at specific intervals of time by Drupal’s automated task runner — Cron.

  • Salesforce event logging in Drupal

Salesforce Logger is responsible for logging the Salesforce events within the Drupal administrative interface. The logged events are related to Salesforce interactions (successful or failed Salesforce API requests, data synchronization events, authentication events, and so on). This provides a comprehensive record of activities and changes.

The Salesforce event logging settings.The Salesforce event logging settings.
  • JWT authentication

The Salesforce Suite supports key-based JWT (JSON Web Token) Salesforce authentication. For this purpose, there is the Salesforce JWT Auth Provider submodule.

In JWT authentication, a digitally signed token is generated and sent to Salesforce. The token includes information about the Drupal user, the Salesforce-connected app, and additional details. Salesforce checks the token’s authenticity and gives the user access.

A private key is used to sign the JWT, adding a layer of security and ensuring that the JWT has not been tampered with during transmission.

  • User-agent-based authentication

There is also support for user-agent-based Salesforce OAuth authentication. It involves redirecting the user to the Salesforce login page where they enter their credentials. Upon successful authentication, Salesforce redirects the user back to Drupal with an access token, granting access.

In the Salesforce Suite, there is the Salesforce OAuth user-agent Provider submodule that is responsible for this authentication.

Selecting the authentication provider via the Salesforce Suite module’s UI.Selecting the authentication provider via the Salesforce Suite module’s UI.
  • Connecting to the SOAP API

The Drupal website can seamlessly connect to the Salesforce SOAP API with the help of the Salesforce Soap submodule. The Salesforce SOAP (Simple Object Access Protocol) API is a web service-based interface that allows Drupal websites or other third-party apps to interact with Salesforce.

  • Creating webforms

Salesforce Webform integrates with Webform — a remarkably feature-rich and user-friendly contributed module for form building. This helps extend the functionality of Drupal webforms created with this module so they can connect and interact with the Salesforce CRM. This streamlines data capture and submission processes.

  • Address field widget

The Salesforce Address submodule provides a field widget for handling address fields in Drupal. This widget incorporates Salesforce-specific features into Drupal address fields, ensuring a seamless and standardized approach to capturing and managing the address data.

  • Examples provided

The Suite also includes the Salesforce Example submodule that offers practical examples and guidance to help site builders get started with the Drupal-Salesforce integration.

Some other contributed Drupal modules for CRM integration

Of course, it’s also worth reviewing the diversity of the tools for CRM integration that the Drupal community has created. Their robustness, maturity, and production-readiness for a specific Drupal website version vary a lot from one module to another. However, as far as the readiness of Drupal modules, this may be subject to fast change. 

  • Webform CiviCRM Integration. This popular Drupal module is a powerful, flexible, and user-friendly form builder, enabling seamless integration of Drupal webforms with the CiviCRM system.
  • RedHen CRM. This module represents a Drupal-native CRM — RedHen. It's a fully functional, lightweight CRM, initially designed for common nonprofit website needs. In addition to offering the standard CRM features, RedHen can be used as an integration point to enterprise CRMs like Salesforce or Blackbaud.
  • HubSpot. This module integrates with Webform to submit Drupal online forms directly to the HubSpot CRM’s lead management system.
The Hubspot module: selecting a handler to a webform.The Hubspot module: selecting a handler to a webform.
  • Hubspot API. This module provides a Drupal-friendly API integration with the HubSpot CRM. It relies on a third-party PHP SDK.
  • HubSpot Client. This one provides a client for the HubSpot API v3 SDK, helping other modules integrate with the HubSpot CRM.
  • Zoho CRM Integration. This tool helps provide communication between your Drupal website and your Zoho CRM account using the Zoho PHP SDK.
Zoho CRM Integration module’s settings.Zoho CRM Integration module’s settings.
  • Bigin CRM integration. This module adds new Drupal users as prospects into the Bigin CRM — the new product from the Zoho family. It uses the Bigin Rest APIs for integration.
The Bigin CRM integration module’s settings.The Bigin CRM integration module’s settings.
  • CiviCRM Drush. This tool provides support for actions associated with the CiviCRM in Drush 9 and 10.
  • CiviMember Roles Sync. This Drupal module synchronizes CiviCRM contacts that have some membership status to specified Drupal roles.
  • ActiveCampaign. This module makes it easy to send data to the ActiveCampaign CRM, display this CRM’s data in Drupal dashboards, and embed its forms.

Final thoughts

Give your customer management workflows a chance to reach the highest possible level of efficiency thanks to CRM integration! Whichever CRM you’d like to rely on, and whatever specific use cases you’d like to implement, the most seamless implementation will be found for you in the Drupal CMS. 

Mar 04 2024
Mar 04

To give users a true power tool in their daily work, the most important thing is, that editors must be able to see at all times, what their content will look like in real life. At the same time, the interface must be intuitive and easy to understand.

blökkli offers exactly that. The content looks exactly as it will ultimately appear on the website. With a click on the respective sections, they can be edited and improved immediately.

Liip developed the blökkli editor for the relaunch of bs.ch, the website of the Canton of Basel-Stadt, and published it as an open-source project.

Live editing of the site

In the blökkli editor, editors can place the page sections directly on the page using drag & drop and insert the content. You can immediately see what the content looks like.
To change a title, simply click on it and change the text.

In addition, the editor offers many functions that support the content creation and editing process. Images can be inserted directly from the computer, a mobile preview can be displayed or accessed directly via a QR code on the smartphone.
In addition, a search function can be used to link directly to other pages or insert images and documents.

There is also a function for viewing a live preview on the smartphone. This can be opened via a QR code and dynamically displays the current status of the page.

Flexible and clear design options

The appearance of the page sections can be changed directly in the page. This makes it easy for editors to design versatile pages and see directly how they look. The display follows the defined design, but at the same time offers editors the flexibility to design their content in a visually appealing way.

In many page builders or editors currently available on the market, users have too many options. They can change colors and font sizes, which unfortunately often leads to content becoming confusing or even illegible. blökkli solves this problem with pre-defined design options that are easy to find. This gives editors flexibility, but the content is still consistent and fits the brand.

blökkli also supports drag & drop of images. Images can therefore simply be dragged into the page and are placed directly in the content. In addition, links (for example to YouTube) can be inserted directly. blökkli recognizes these and embeds the corresponding content directly into the page.

Efficient team processes and easy onboarding of new users

With its comment function, the blökkli editor offers an optimal basis when content is edited by multiple people. blökkli also offers a visual timeline that allows the last changes to be undone.

For websites with many editors, it is always a challenge to introduce new people to a system. At blökkli, the most important functions are explained interactively with a 'tour'. This helps editors to quickly find their way around and reduce their anxiety.
Numerous keyboard shortcuts are available for editors who frequently edit content on the site. This makes work even faster and more intuitive.

Compatible with Drupal and any other CMS

blökkli already works excellently with the open-source CMS Drupal. The Paragraphs blökkli module is available for Drupal. Based on Nuxt.js, however, blökkli can be used with any CMS system if an appropriate adapter is available.

Try it yourself!

You can try blökkli yourself on the website:
https://blokk.li/

Mar 04 2024
Mar 04

Today we are talking about the cost around Drupal, common misconceptions, and how you get what you pay for with guest Jeff Robbins. We’ll also cover Module Instructions as our module of the week.

For show notes visit:
www.talkingDrupal.com/440

Topics

  • What is new!
  • How did you get started with Drupal
  • Selling Drupal and the cost
  • How much is the technology vs the complexity of projects that lend themselves to Drupal
  • Value of Drupal
  • What can the Drupal community do to make it more widely attractive
  • Versionless Drupal marketing

Resources

Guests

Jeff Robbins - jjeff.com jjeff

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan
John Picozzi - epam.com johnpicozzi
Ivan Stegic - ten7.com ivanstegic

MOTW

Correspondent

Martin Anderson-Clutz - mandclu

  • Brief description:
    • Have you ever wanted to have easy access to the README, CHANGELOG, and INSTALL files for the contrib modules on your Drupal site? There’s a module for that.
  • Module name/project name:
  • Brief history
    • How old: created in Apr 2012 by Ales Rebec of Slovenia
    • Versions available: 7.x-1.0 and 2.0.3 versions available, the latter of which works with Drupal 9 and 10
  • Maintainership
    • Actively maintained?
    • Security coverage
    • Test coverage
    • Number of open issues: 4 open issues, none of which are bugs against the 2.0.x branch
  • Usage stats:
    • 1,238 sites
  • Maintainer(s):
    • Current maintainer of the 2.0.x branch is Viktor Holovachek a.k.a Aston Victor of the Ukraine Drupal Community
  • Module features and usage
    • The usage of the module is pretty straightforward. Once the module is installed, anyone who has access to the Modules page on a Drupal site will see links on that page to any README, CHANGELOG, or INSTALL files that are available for the contrib modules in the codebase
    • It also provides a cron job and drush command to generate the links, stored in the site state, so the application isn’t doing all the work of parsing through all your contrib modules looking for the files every time someone wants to load the Modules page
    • It does override the template for the module page to add those links, so be aware that if you’re doing something very custom and have overridden that template in something like a custom admin theme, you may need to manually add some extra markup to see the links
    • The module does also define new permissions, to manage the settings for these links, or to view them
    • The settings really consist of specifying which of the links you want to appear, if the relevant files are available. By default it will show all three, but you could, for example, only have it show README links
Feb 29 2024
Feb 29

Note: This blog was first published on December 15, 2021, and has been updated to reflect new information and insights.

Takeaway: Optimal user experience is an essential aspect of web development, and the key to that is the assurance of correctly sized images. If your visitors are using a mobile device, the use of large images that are suitable instead for desktop viewing is not optimal.

Ensuring the right-sized image for the right device is what's referred to as "responsive images."

Responsive image styles are standard practice for us, and they greatly benefit website performance and user experience. So, it's a no-brainer to include them in any website build.

Responsive images speed up loading times, save bandwidth, and give visitors a better experience overall. This post will focus on setting responsive images in Drupal 10.

If you need to set responsive images for Drupal 7 (and of course, we’re hoping you are already planning your migration from Drupal 7 to Drupal 10), you can check our blog Picture Module: Building Responsive Images in Drupal 7.

For Drupal 10, the key steps that need to be executed are as follows:

  1. Install the Responsive Image module (using Composer or Drupal UI).
  2. Set up the breakpoints.
  3. Create image styles.
  4. Set up the responsive image.
  5. Assign the responsive image style to the image field.
  6. Export configurations to code.

Person succeeding while another watches them

GO FROM DRUPAL ZERO TO HERO WITH OUR TRAINING EXPERTS

Step 1: Install the Responsive Image module

As was also the case with Drupal 8 and 9, the Responsive Image module is part of Drupal core. For this reason, additional modules do not need to be added in Drupal 10.

The Responsive Image module provides an image formatter and breakpoint mappings to output responsive images using the HTML5 picture tag. This allows devices to display larger or smaller images based on the screen size.

Steps via Composer

  1. Open up your command line tool (we like to use iTerm with oh-my-ZSH).
  2. Travel to your site directory using cd.
  3. Run the command: drush en responsive image.

Steps via Drupal UI

  1. Once logged in as admin, go to Extend in the Drupal admin menu, or visit the URL path: /admin/modules.
  2. Then, in the list of modules, scroll down until you find “Responsive Image” and click the checkbox next to it. Helpful tip: you can also search for the module name in the search box at the top.
  3. Click on “Install” at the very bottom of the list.

Step 2: Set up the breakpoints

This is where we decide our breakpoints. How many will we have? At what size will we show a different-sized image? Some default themes already have the breakpoints.yml file. It might be worth checking for that in your theme first. 

If you have a custom theme, go to your editor of choice. We like to use Sublime Text, Atom, or Visual Studio code.

In Drupal 10, the root of your theme directory will be located at /themes/my_theme_name or /themes/custom/my_theme_name, depending on your setup. In the root of your theme directory:

  1. Create a file called my_theme_name.breakpoints.yml
  2. Replace my_theme_name with the real name of your theme

For this tutorial, I will call my theme "myd10demo."

Below you will find an example of a breakpoint setup for this theme. We’re setting up three breakpoints. One we would use for mobile phones, one for tablets, and one for desktops.

But this is just an example, please choose a breakpoint that works best for your website, and your theme, as you may already have a grid system with breakpoints configured in your CSS.

 
myd10demo.small:
  label: small
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 2x
myd10demo.medium:
  label: medium
  mediaQuery: 'all and (min-width: 768px)'
  weight: 2
  multipliers:
    - 1x
    - 2x
myd10demo.large:
  label: large
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 2
  multipliers:
    - 1x
    - 2x

Each breakpoint will tell Drupal what image size to load for each assigned mediaQuery.

For example, we can load an image for mobile devices using a smaller image style for the breakpoint at min-width: 0px. When the browser is at min-width: 768px we can load our "tablet" image style, and at min-width: 1200px, we can load our desktop or full size images.

It is important to note that the breakpoints weight should be listed from smallest mediaQuery to largest mediaQuery. This allows you to follow a mobile-first approach, as your Grid system (if you have one) is likely following a mobile-first approach as well.

The multipliers attribute allows us to display a crisper image for HD and retina display. A great example of that would be to have an image style of 1000x1000 for a normal screen, but on a retina-ready screen, you might load an image at 2000x2000.

Step 3: Create your image styles

Now we need to create the image sizes for the different breakpoints and different resolution sizes. To do that, in the header:

  1. Go to Configuration> Media > Image Styles or go to /admin/config/media/image-styles.

Next, you'll need to create an image style for the breakpoint and resolution sizes you set up in your my_theme_name.breakpoints.yml.

We created three breakpoints in our breakpoint.yml file. We are setting up two resolution sizes for retina and non-retina screens. So, we will have six image styles. You could label them as follows:

  • Mobile 1X
  • Mobile 2X
  • Tablet 1X
  • Tablet 2X
  • Desktop 1X
  • Desktop 2X

To start creating your image styles, follow these steps.

  1. Click the "Add image style" button in the top left corner.
  2. Type in the name of your image style. It’s better if your image style name is descriptive. You will likely be setting up several image styles throughout your project.
  3. Click “Create new style.”
  4. When you’re redirected to your new image style, using the dropdown under “Effect,” choose scale and crop. Another helpful tip: For even better transparency and cropping capabilities, try adding the “Focal Point” Module. It will allow you to select which area/direction your image would scale and crop.
  5. Click the “Add” button.
  6. Enter the size of your image style. As an example, our mobile image might be 400x200, and our retina-ready mobile image would be 800x400.
  7. Click "Save."
  8. Repeat steps 1-7 until you’ve created all six image styles.  

For each image style, we have used the scale and crop effect to resize and crop the images uploaded automatically.

Step 4: Set up the responsive image styles

Now we will assign the image styles to the breakpoints.

  1. Go to Administration > Configuration > Media or go to /admin/config/media/responsive-image-style.
  2. Click on "Add responsive image style."
  3. For this tutorial, I will call it "Article Image" since this will be used for the main image in our article content type.
  4. Select the theme we created earlier (myd10demo).
  5. Select the correct image styles for each breakpoint.

The Drupal UI will display the breakpoints from largest to the smallest.

  1. For our retina-ready desktop image, open up the dropdown called "Large 2X."
  2. Select the image style "Desktop 2X."
  3. For our non-retina Desktop, select "Desktop 1X."

So on and so forth until you’ve selected the correct image style for each breakpoint and screen resolution.  

At the end of the form, you will find the "Fallback" option. This will be used in case the responsive images are not available.

  1. Select the smallest image style you created here, the same as for mobile.
  2. Select the smallest responsive image style effect you created in the "Fallback" option.

Step 5: Assign the responsive image style to the image field

Let's recap. So far we’ve set breakpoints and resolution sizes in our theme to be used for our images. We then created six image styles, one for each screen size and resolution. Then we connected the created image styles to our created breakpoints.

Now it's time to attach the responsive image style to one of our image fields. This way, when an image is printed using the "display" of a content type, it will be printed using this responsive image style.

  1. Go to Administration > Structure or go to /admin/structure/type in your address bar.
  2. On the content type you want to change (in this example, the article), click on the arrow next to "Manage fields" and select "Manage Display."
  3. On the Manage Display form, on your image field, click on the dropdown under the "Format" for your image and select the "Responsive image" option.
  4. After that, click the gear icon located on the far right-hand side, and select your responsive image style ("Article image" in our example).
  5. Click save and we are almost done!

To check:

  1. Add a new content piece and add an image to the image field (make sure you are in the right content type).
  2. Resize your browser to view the page like a tablet or a mobile device.
  3. Right-click on the image and click "Inspect."

You should see an HTML5 attribute with many different image styles within breakpoints.

HTML picture element

Step 6: Export your configurations to code

The very last step is to export all of these Drupal configurations into code. We do this for several reasons, two of which are:

  • To ensure our settings are saved and can be imported to your sites in the future while allowing you to overwrite configuration if they are modified in the future.
  • To allow us to commit something to git, leaving us a nice trail/breadcrumb of our work.

There are two ways of doing this. Either through the UI and exporting all configs, or through your command line using Drush (this is the recommended way if you have a server running Drush).

Below are the steps for both.

Via command line with Drush

  1. Use your command line tool cd into your website's root directory.
  2. Then run the following command: drush cex. If you’re running your site locally, you might be using something like Docker and docksal. In this case, you would run fin drush cex.
  3. Once this is run, you will get a list of modified configurations and files that will be overwritten in your /config/default directory. 
  4. Press the enter key to accept.

Via UI

  1. Go to Configuration > Development > Configuration Synchronization > Export or go to the path admin/config/development/configuration/full/export.
  2. Click the export button.
  3. This will export the entire configuration folder into a zip.
  4. Push your code up to whatever git repository you use, and celebrate your achievement.

Frequently asked questions

Why is a mobile-first approach essential in modern web development? How do responsive images fit into this idea?

A mobile-first approach is pretty standard across our industry. It allows for:

  • Faster mobile load times
  • Mobile-viewing optimized content and images

Responsive design fits into it by following suit with the mobile-first approach. When you create responsive images, it sets breakpoints and loads different image sizes at these points.

You can also set fallbacks. For example, having mobile as the default ensures that smaller images are loaded instead of large files that may slow down loading times.

What is the difference between implementing responsive images in Drupal 9 vs Drupal 10?

There is no difference. Setting Drupal responsive images is consistent across versions 8, 9, and 10.

Is there a difference in how we set responsive image styles in Drupal versus other CMSs?

There is a difference. Drupal makes it easy because it's essentially built-in.

With Drupal, you start by creating image styles. For example, let's take a look at a large banner for both desktop and mobile. Each of these image styles is set with a focal point scaling crop, ensuring specific sizing while maintaining the center focal point. For instance, the mobile large banner might be set to 420x619 pixels.

Focal point for large banner

Then, we set up a responsive image style within our theme, aligning breakpoints with container sizes and content behavior. We can specify which image style to load based on the minimum width, ensuring that the appropriate image is displayed for different screen sizes.

Breakpoints for responsive images

This process is specific to Drupal. While other CMSs may offer similar functionalities, they often require additional coding or plugin installation to achieve the same level of ease.

How else can setting responsive image styles in Drupal be easier?

Provus® is our Drupal component-based platform. In Provus®, we have enabled the focal point by default. This usually isn't enabled. However, our clients request it because it ensures that important elements of the image, like faces, remain centered during scaling and cropping for mobile viewing.

SEE HOW THIS WORKS WITH PROVUS®—BOOK A FREE DEMO

How do responsive image styles in Drupal enhance site performance and user experience?

Responsive image styles ensure that appropriate image sizes are loaded, reducing loading times and improving performance. We also lazy-load images, meaning they're only loaded when they come into view, further enhancing user experience by reducing unnecessary asset loading.

Learn all about Drupal through our training classes

Our team here at Promet Source is devoted to channeling our collective brainpower toward helping the Drupal community take advantage of all that Drupal 10 has to offer. If you want to learn more about Drupal and optimize your skills, sign up for our training classes!

How to subscribe to the Promet newsletter

Feb 29 2024
Feb 29

We sit down with Greg Dunlap, Lullabot's Director of Strategy, who not only shares his latest endeavor on Kickstarter but also discusses with us the art and science behind "Designing Content Authoring Experiences."

As we learn about content creation and management, Greg provides unique insights and practical advice, drawing from his extensive experience in the field. (He's been doing Drupal for almost 18 years!)

Also, we learn what Drupal is doing right (and wrong) when it comes to content authoring experiences.

Greg would certainly appreciate your support of his book on Kickstarter.

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web