Drupal feeds

PreviousNext: Creating a cards section with Layout Builder

Drupal Planet -

In this post, we explore building a cards section with Layout Builder.

 

by lee.rowlands / 9 May 2024

The component will look something like the 'Services' section on our homepage*. If you've built websites over the last decade, you've probably built a component like this many times.

The key aspects of the component are

  • A title
  • Some intro text
  • A series of cards. Each card has a URL, title, image and teaser text

If you've previously used paragraphs for modelling landing pages, you may immediately be thinking that your content model will be made up of paragraph type 'cards' with three fields as follows:

  • A title
  • A teaser field for the intro text
  • A multi-value cards field, which is itself another paragraph type 'card'.

Or rather, because this is Layout Builder, you might be thinking of a block-content type called cards with those fields on it — leaning on paragraphs for the multi-value cards field.

Whilst that approach works well for paragraphs, it isn't the best approach for Layout Builder:

  • There are some gnarly bugs with Layout Builder + Block Content + Paragraphs + Content moderation
  • It requires content-editors to fumble in the off-canvas editor to rearrange each card using drag-and-drop. We want a nice re-order experience like this:
Making the most of layout plugins

Let's instead pivot to a layout plugin for the cards component and think of it in terms of regions.

We have:

  • A layout title
  • An introduction region
  • A cards region

We probably already have a block-content type that consists of a WYSIWYG field — e.g., something like the Basic block content type in core. We can use that for the intro text.

So we need a card block content-type. But we probably want two. A lot of our cards will just point to other pages on the site — and it makes sense for the card to be built from fields on that page. If we put a teaser image and teaser text field on all our node-types, we can make use of them when creating a card for that page. We can also use these for meta-tags like the OpenGraph image. And all our node-types already have a title and URL. The second block-type is if we need to link to pages outside the site. So, the content models for those two block types are as follows:

  • For the internal card block-type, we need an entity-reference field to allow the content-editor to select the content to generate the card for
  • For the external card block-type, we need all the fields — title, image, teaser, URL
Defining layout plugins

Next, we need to define our layout plugin. We start with a layouts.yml file in our theme or module.

cards:   label: Card grid   category: Layouts   template: layouts/cards   icon_map:     - [intro, intro, intro]     - [c1, c2, c3]     - [c4, c5, c6]     - [c7, c8, c9]     - [c10, c11, c12]   regions:     content:       label: Cards     intro:       label: Introduction   library: 'your_theme/card'

Note: the icon_map isn't needed here, but it gives us a nice icon in the 'Add section' form.

With those pieces in place, we can use Layout builder restrictions to ensure only the right block-types can be placed in each region. The introduction region can be limited to the basic WYSIWYG block-type. The cards region can be limited to the internal and external card block-type.

This layout will use the default layout plugin, but we want a custom layout plugin with a title field in the configuration form. You can read more about creating a custom layout plugin from our previous post about creating a dynamic layout with flexible regions. This one will be much simpler. We just need a title field in the configuration form and a preprocess hook to expose that to our template. 

The first step of this is to add a 'class' entry to our layout definition.

cards: // ...   class: \Drupal\your_theme\Layouts\Cards   // ...

Then, we need to create that class. 

<?php namespace Drupal\your_theme\Layouts; use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Layout\LayoutDefault; /** * Defines a class for a layout that has a title option. */ class LayoutWithTitle extends LayoutDefault { /** * {@inheritdoc} */ public function defaultConfiguration() { return parent::defaultConfiguration() + ['title' => '']; } /** * {@inheritdoc} */ public function buildConfigurationForm(array $form, FormStateInterface $form_state): array { $build = parent::buildConfigurationForm($form, $form_state); $build['title'] = [ '#weight' => -10, '#type' => 'textfield', '#default_value' => $this->configuration['title'], '#title' => $this->t('Title'), '#description' => $this->t('Provide an optional title for this section'), ]; return $build; } /** * {@inheritdoc} */ public function submitConfigurationForm(array &$form, FormStateInterface $form_state): void { parent::submitConfigurationForm($form, $form_state); $this->configuration['title'] = $form_state->getValue('title'); } }

Then, in your theme you can preprocess to make this variable available to the template.

/** * Implements hook_preprocess_HOOK(). */ function your_theme_preprocess_layout(array &$variables): void { // Add the title from LayoutWithTitle. $variables['title'] = $variables['content']['#settings']['title'] ?? NULL; }

For optimum UX, we'd probably want to make Layout Builder Browser blocks, too. You can read more in our previous post about our approach to Layout Builder UX.

All that remains then is to theme the block-content types to match the design. For more on that, see our previous post on theming block-content types with Layout Builder.

As an extra enhancement, you could add integration with Layout Section Classes module to give content editors additional options like the number of cards shown across the page in the card grid.

Note: this component on our website is automated and built with Views, but there is often a need to build out curated equivalents.

Tagged Layout Builder

Acquia Developer Portal Blog: DrupalCon Portland Day 2 Recap

Drupal Planet -

Welcome to Day 2 at DrupalCon!! Today is another exhilarating day packed with cutting-edge sessions, collaborative workshops, and unparalleled networking opportunities. There are few better ways to enhance your skills and connect you with the vibrant Drupal community. Let's dive deeper into the world of Drupal and check out a few highlights from Day 2:

Keynote: Open Source AI Now: Why Open Must Win the AI War

Evolving Web: Inside Access: Stories of the 12 Stars of EvolveDrupal Atlanta

Drupal Planet -

Last month we took EvolveDrupal—a unique summit that fosters digital transformation and open source collaboration—to Atlanta for its first appearance in the United States.  

Couldn’t attend? Well, no need to feel left out! You can get the inside scoop right here. I’ve shared stories about 12 summit stars that’ll have you smiling, chuckling, or taking notes.

Attendees will find this a worthwhile read, too. Because unless you harnessed an AI bot to put you in three rooms at once, we’re betting there’s plenty you missed!

Ready to meet our stars? First, a quick refresher for those who need it.

Wait, What’s EvolveDrupal Again?

Ok, let’s rewind. About a year ago our digital agency started EvolveDrupal in our hometown of Montreal. After years of remote meet-ups, it was a way to finally reunite the tech and design communities in person. 

People were overjoyed to socialize in the same room as their peers again! Because let’s face it: sharing a beer on Zoom just isn’t the same. There’s none of those silly stories and spontaneous oversharing that really bring people together. 

After that first summit, we built on EvolveDrupal’s success with events in Toronto and Ottawa, before heading across the border to Atlanta. (Psst... a little birdy told me we're coming back to the U.S. in September for EvolveDrupal NYC.)

Meet the Stars of EvolveDrupal Atlanta

Now that you’re up to speed, here are all the juicy details you’re waiting for. Meet the standout stars who made EvolveDrupal Atlanta absolutely stellar. 

1. Our Event-Planning Extraordinaire, Maya Schaeffer

Maya wears multiple hats at Evolving Web. On top of taking care of us as our Employee Experience & Operations Manager, she’s the de facto Chief Event Organizer for EvolveDrupal. Maya learned on-the-job to orchestrate big corporate gatherings and she tirelessly ensures their success. You can find her at EvolveDrupal looking like she’s in her element.

Unforeseen challenges and setbacks are an inevitable part of events—like the time a well-known office supplies company printed all of our participants’ name tags upside down! But Maya has learned to roll with the punches and adapt quickly.

Maya’s can-do attitude means she sometimes tries to do everything herself, but she’s learned to delegate more over the past year. Her charming smile means that few people can say “no” to her requests. 

 

No one is a match for Maya's organizing skills!
2. Our Boss Baby: Sofia 

Just 15 months old, Sofia has been to more Drupal conferences than most seasoned developers. She has accompanied her parents (our co-founders Alex and Suzanne) to DrupalCon Pittsburgh, DrupalConLille, GovCon, High Ed Web, and all four of our previous EvolveDrupal summits.  

With this trajectory, in 20 years she’ll have the elusive combination that so many employers seek: a freshly minted college degree and two decades of Drupal experience. 

Expect to see Sofia in Forbes 5 Under 5 very soon.

 

Sofia loves showing her Drupal pride, accompanied by Alex (her dad), Maya, and Sammy the Eagle.
3. Artificial Intelligence  

I’d like to thank ChatGPT for writing this blog post. Joking! I’m a real person, I swear. Yet everywhere we look it seems that AI is popping up as a way to generate content, code, images, and so much more. So it was really helpful to get some perspective from the experts.

Nikhil Deshpande, Chief Digital & AI Officer at the Georgia Technology Authority, sat down for a Q&A session with our co-founder, Suzanne Dergacheva. Their discussion hit on a crucial dilemma: how to accelerate innovation through open source while retaining integrity and managing risk.

Some key takeaways from their talk include:

  • AI has progressed beyond analytical tasks to creative endeavors like writing poetry.
  • Its role in the workplace is expanding: over half of the U.S. workforce now uses AI tools to enhance productivity.
  • AI is also shaping public services and government operations. In Minnesota, AI translation has improved accessibility for non-English speakers.
  • In this age of AI, ethical considerations and good content governance are more important than ever. 
  • The integration of AI technologies into existing systems will foster a new era of innovation—one where these tools not only enhance existing processes, but optimize creativity and problem solving.

We also heard from Misha Sulpovar, Head of AI at Cherre & Wired Cognition. In This Is not a Drill: Seeing the Real Opportunities Among the AI Hype, Misha debunked some common myths about AI. No, robots are not going to take over. No, the robots didn’t tell us to say that. In the face of concerns that machines will take our jobs, Misha argues that AI is actually enhancing—instead of replacing—human capabilities. It’s time to embrace the robots. They’re your new work besties. 

4. A11y (a.k.a. Accessibility)

Championing open source goes hand-in-hand with advocating for accessibility. At Evolving Web we’re committed to making the web a better place for all. So we were thrilled to host not one, but two accessibility sessions at EvolveDrupal Atlanta!

Mary Blabaum, Senior UX Manager at Acquia, gave a great overview of accessibility in her session 5 Ways to Grow Your Inclusive Design Approach

  • Understand your user needs
  • Activate by including inclusive strategy into your day to day
  • Set standards such as adhering to WCAG
  • Create with intent by baking inclusion into your design process
  • Measure what matters using transparent accessibility conformance reports

 

Mary Blabaum from Acquia offered strategies to make accessibility the default in every design.

 

Penny Kronz, VP of Client Services at DubBot, gave us the rundown on the new success criteria in WCAG guidelines 2.2  with her session WCAG 2.2: What Changed? What Do I Need to Know? so that we can meet the latest accessibility requirements. Some notable changes include new criteria for increased touch target size, consistent focus appearance, and easy dismissal of pop-ups. While WCAG 2.2 retains the same structure as previous versions, it offers more specific guidance for building inclusive digital experiences.

5. OOUX  

So much more than a pleasing acronym, object-oriented UX (OOUX) is a proven method for making user experiences more human-centric. Sophia Prater taught us how to shift our UX process to turn complex processes into intuitive user flows in How to Fix UX Fails with Object-Oriented UX. The room was packed, with every seat taken and more participants standing at the back to catch the talk! 

One great takeaway from the talk was "ORCA". No relation to the whale. ORCA is an acronym that highlights great questions to ask when designing a single screen: 

  • O: What are the objects in the users' mental model?
  • R: What are the objects' relationships to each other?
  • C: What calls-to-action do objects offer users?
  • A: What are the attributes that make up the objects?
6. Our Creative Director, Morgan, and His Infallible Attention to Detail

Morgan decided to take a steamer to our backdrops. There wasn’t a single wrinkle to be seen when he was done with them. Not that he’s a Monica or anything (from the TV show Friends for those who—gasp!—don't get the reference.) 

Morgan also delivered From Chaos to Clarity: The Benefits and Challenges of Design Systems with Bryenne. They dived into the complexities and challenges our team has encountered over the years, offering up some invaluable best practices for creating a sustainable design system.

Finally, Morgan captivated a creative audience at our EvolveUX Unconference, an interactive session with real-time feedback from the audience. Morgan showcased the Planned Parenthood Direct app and took participants behind the scenes of the project. 

 

Creases? Not on Morgan's watch.
7. Sammy the Eagle

You read that right—the official mascot of Drupal GovCon swooped in to steal the show at EvolveDrupal Atlanta. I guess it’s easy when you have wings. Naturally, we set aside a free ticket and cleared his visit with the civil aviation authorities. 

 

The Eagle has landed. Sammy the Eagle, that is.
8. Steve Persch’s Twister Board

Steve Persch is a seasoned Drupalist and the Director of Developer Experience at Pantheon. He’s also a theater grad! Which explains why he brings a dramatic flair to even the most technical of presentations.  

In his talk The Fourth Decade of Web Deployments, Steve literally bent over backwards to illustrate how complex web pages have become. It certainly woke people up to see Steve pretzeling on a Twister board first thing in the morning. We’ve never seen a more visually stimulating illustration of a technical concept. Proof that majoring in theatre is useful, no matter what the haters say. 

 

Always stretch before attending EvolveDrupal.
9. The EPIC Page Builder Battle 

The boxing gloves came out when five speakers went head-to-head, each of them representing a different page building tool. And if you thought Drupal would have a leg up at an event with Drupal in the name, think again! It was no match for the ease with which our designer Yue Lu could build a site in Webflow.

Nevertheless, the key takeaway from our Page Builder Battle was that no single tool is perfect for everyone or every project. Choosing the right tool depends heavily on your unique needs.

We also learned that while Drupal’s content creation experience has room for improvement, the Drupal community is aware of this fact and actively working on it.

 

We duked it out to see which page builder tool is the ultimate champion.
10. Josh, Our Magic Weatherman

Our Atlanta-based team member, Josh, seems to have a mysterious ability to control the weather. Who knows how he did it, but Josh ordered some darn good weather for the event. 

Booking the rooftop patio three months in advance was always going to be a gamble. So we were biting our fingernails as rain poured down the day before… but the summit rolled around with nothing but the bluest of skies! Honourable mention to Josh because we're sure he had something to do with it. Definitely a wizard.

 

Team members Adrienne and Josh enjoying suspiciously good weather at the Zivtech rooftop after-party. 
11. The Drake Quote in our Brand Colours

As we left the elevator for the rooftop after-party, what did we see but a big quote from Drake on the wall! Way to make a canuck feel at home. And way to make us feel special, because it was in our brand green.  

 

We're definitely not team Kendrick.
12. The Airbnb Deer

This is becoming a weird trend for us. It all started with the Airbnb we stayed in for DrupalCamp Florida. Our team walked in to find a huge taxidermy deer on the wall. After initially feeling creeped out, they named him Luke and accepted him as part of the gang.

Would you believe it, when we turned up at our Airbnb for DrupalCamp New Jersey—oh dear, another deer! This one was named Frosty because he seemed a little aloof.

And then in Atlanta, what did we find but yet another deer! Perhaps we should just listen to the signs from the universe and get one for our office.
 

What should our Atlanta deer be called? Send name suggestions on a postcard.
Join the EvolveDrupal Adventure

Tickets are now on sale for EvolveDrupal Montreal on June 14. We're also heading back to the United States for EvolveDrupal NYC on September 20. 

Want to stay in the loop? Sign up for EvolveDrupal updates. You'll be among the first to hear about ticket sales, early bird discounts, and competitions for free stuff!

Here's what to read next: 9 Ways to Make the Most of EvolveDrupal

+ more awesome articles by Evolving Web

Tag1 Consulting: Migrating Your Data from Drupal 7 to Drupal 10: Assumptions of the API

Drupal Planet -

As pointed out in the first article, the Migrate API scope is to move over content and configuration. Porting modules and themes are out of scope. With that in mind, let’s take a closer look at some of the assumptions and limitations. In addition to what will be presented in today’s article, I highly recommend reviewing the official documentation for upgrading from Drupal 7. Drupal is ever-evolving and the Migrate API documentation gets updated regularly. Of particular importance, review the page on known issues when upgrading from Drupal 7, as things get added and removed from that list as issues are discovered and fixed.

mauricio Wed, 05/08/2024 - 17:13

The Drop Times: Which CMS Powers Your Country's Official Website? A Global CMS Usage Analysis

Drupal Planet -

A growing trend is seen in governments favouring free and open-source solutions (FOSS) for their official websites. The potential benefits of FOSS include enhanced security, flexibility, and cost savings. But how widespread is this trend, and which specific systems are gaining traction? To understand the scope of this trend, we examined the official websites of 195 countries globally. This analysis digs deeper into the trend of governments favouring free and open-source solutions for their online presence, uncovering which CMS systems—including Drupal, WordPress, and others—are most preferred for official government communication.

The Drop Times: Drupal Iberia 2024 Unites Portuguese and Spanish Communities

Drupal Planet -

Drupal beria 2024 brings together Spanish and Portuguese Drupal communities for the first time. Set in Évora on May 10th, this event, organized by Associação Drupal Portugal and Asociación Española de Drupal, aims to foster collaboration and unity. With a biennial format, it promises engaging sessions and keynotes, supporting both seasoned professionals and newcomers.

Dries Buytaert: State of Drupal presentation (May 2024)

Drupal Planet -

This week, approximately 1,400 Drupal enthusiasts came together for DrupalCon North America in Portland, Oregon. As a matter of tradition, I delivered my State of Drupal keynote, often referred to as "DriesNote". In case you missed it, you can watch the video or download my slides (385 MB).

This year's keynote was inspired by President John F. Kennedy's famous "Moonshot" speech. After being global leaders, the U.S. had fallen behind in the Space Race. Challenged by the Soviet cosmonaut program, President Kennedy rallied Americans around the ambitious goal of landing on the moon before the decade was out.

Drupal Starshot, a new version of Drupal

Drupal has always been known for its low-code capabilities. However, many competitors now offer similar features, and in some areas, they even surpass what Drupal provides. While Drupal is celebrated for its robustness, it can be challenging for newcomers, especially those with limited technical expertise. So in my keynote, I was excited to introduce Drupal Starshot, our "Moonshot" to make Drupal more accessible and easier to use.

Twenty-three years after Drupal's inception, we are preparing to launch a second official version of Drupal. For the time being, we're calling this second version "Drupal CMS". It will be built on top of Drupal Core and common contributed modules, and available as a separate download alongside Drupal Core. Wireframe of the Drupal.org download page featuring two options: Drupal CMS (Drupal Starshot) and Drupal Core, with Drupal CMS being promoted as the preferred starting point for most.

Drupal Starshot will be designed to have a great out-of-the-box experience. It will enable Ambitious Site Builders without Drupal experience to easily create a new Drupal site and extend it with pre-packaged recipes, all using their browser.

The vision for Drupal Starshot is the outcome of highly productive brainstorming sessions with Drupal Core Committers, the Drupal Association, colleagues at Acquia, various Drupal agencies, and others.

From an implementation standpoint, it will primarily rely on the Project Browser and Recipes initiatives, while also incorporating elements from the Experience Builder initiative. We actually started prototyping Drupal Starshot a few weeks ago and showcased our progress at DrupalCon. Our goal is to launch a first version of Drupal Starshot within 8 months.

At DrupalCon, hundreds of people pledged to get involved, and we had two "super BoFs" with over 50 people each. If you're interested in getting involved with the Drupal Starshot project, you can register your interest at https://drupal.org/starshot. Additionally, join the conversation in the #Starshot channel on Drupal Slack.

Drupal's brand refresh and marketing strategy

Alongside our technical efforts, we've launched a bold marketing strategy. At DrupalCon Lille, I discussed the need for a fresh marketing approach. Since then, we've made tremendous progress.

I introduced a Drupal brand refresh, which includes updated brand guidelines to ensure a consistent and modern visual identity. This refresh aims to invigorate our brand – making it more vibrant and appealing to newcomers, while still honoring our history and representing our diverse, global community.

I couldn't cover all the details around the brand refresh in my keynote, so I'm expanding on them in this blog post. For a detailed explanation of Drupal's refreshed brand, check out this video by Shawn Perritt: Drupal 2024 brand refresh explained.

Our efforts went beyond just a brand refresh. The Marketing Committee has also guided the community in developing a comprehensive marketing toolkit, which includes messaging guides, pitch decks, and more. All these resources will be available at https://www.drupal.org/marketing.

Let's reach for the stars

As we advance with Drupal Starshot, I recall President Kennedy's famous words:

We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.

Embracing the Drupal Starshot initiative reflects a similar ethos; we're not choosing the easy path, but the one that tests our strength, creativity, and ability to do hard things. The success of Drupal Starshot will be a testament to the incredible collective power of the Drupal community. It's a challenge we are also unwilling to postpone, and intend to win.

Drupal Starshot is more than a technological leap; it represents a shift in how we think, innovate, and collaborate. It's about reaching for the stars and making the Open Web accessible to everyone.

Thank you for being part of this journey. I can't wait to see where it takes us together. The feedback from the last two days at DrupalCon has been overwhelmingly positive. I am more committed than ever and excited to pledge a significant amount of my time to this mission, and to the future of Drupal.

Acquia Developer Portal Blog: DrupalCon Portland Day 1 Recap

Drupal Planet -

DrupalCon Portland (2024 edition) kicked off with a bang at the Oregon Convention Center yesterday. This is the third time the conference has been at this venue–and I’ve been fortunate enough to attend all three. And, this year’s iteration is shaping up to be a really significant entry in the DrupalCon codex. 

The Drop Times: Detailed Overview of the 2024 Drupal Developer Survey Results

Drupal Planet -

The 2024 Drupal Developer Survey, led by Jeff Geerling, Chris Urban, and Michael Richardson, provided a comprehensive overview of the global Drupal community. With 648 developers from 65 countries, including significant contributions from the United States, France, and India, the survey showcased a mature developer base, with 76% aged between 30 and 49. Despite regional variations in sentiment, community engagement remained strong, with 65% participating in Drupal events, and 80% expressing optimism for Drupal's future. Notable trends included the rise of decoupled architectures and the endorsement of DDEV as the preferred choice for integrated development environments (IDEs) and local environment managers. The survey also highlighted opportunities for the Drupal Association to enhance its visibility and communication efforts. These insights will inform strategies for fostering growth and innovation within the ecosystem.

Specbee: Using Drupal 10’s Asset Library to Streamline Asset Handling

Drupal Planet -

Drupal 7 lacked a streamlined mechanism for handling assets, which necessitated the development of more efficient solutions like the Asset Library introduced in Drupal 8 and the latest versions. Asset library solves the problem of loading JS and CSS files on every page. However, unless specified, Drupal does not load these assets as it can affect front-end performance. Let’s learn more about asset libraries in Drupal 10 and how to work with them. What is an Asset Library in Drupal An Asset library in Drupal is nothing but a YAML data structured inside a THEMENAME.libraries.yml file and they contain only CSS and JS files. They are the bundles of CSS and JavaScript files that present inside a module or theme and perform together for style and functionality. The Asset Library in Drupal provides a centralized and organized repository for managing various types of digital assets. Assets Library boasts various features designed to enhance usability, scalability, and flexibility. Asset Library in Drupal is designed to support responsive web design, ensuring that assets are displayed consistently on various devices. Drupal places a strong emphasis on accessibility, and the Asset Library follows these standards to ensure a positive user experience for all. Drupal's Asset Library includes version control features, allowing users to manage and track changes to assets over time. Performance Optimization Define an Asset Library Let’s declare a new Asset library named custom-slider. custom-slider:   version: 1.0   CSS:     theme:       css/custom-slider-theme.css: {}   js:     js/custom-slider.js: {}Some of the attributes used include: Minified: If the file is already minified, set this to True to avoid minifying it again, else default value is False. Preprocess: Default value is True, set to False to exclude a file from Aggregation. Type (Javascript Only):        ◦ The default value is a file, if you leave it blank.       ◦ For external files, use type as external like: //cdn.com/js/example.js: {type: external}Assets Loading Order By default, all JS files are loaded in the order in which files are listed. By default, JS files are loaded in the footer. Set header: true for a library to get loaded in the header. For example: jquery.ui:   header: true   js:     assets/vendor/jquery.ui/ui/core-min.js: {}SMACSS Categorization Drupal follows a SMACSS-style categorization and all CSS files are loaded first based on their category and then by the order. SMACSS categorization is used to set the weight of CSS files, this will not work for JS files. To set CSS weights there are 5 different levels:       ◦ base – This rule consists of styling HTML elements only. CSS_BASE = -200       ◦ layout – Macro management of page or arrangements of elements on the page, including any grid system. CSS_LAYOUT = -100       ◦ component – Components are reusable and discrete UI elements. CSS_COMPONENT = 0       ◦ state – Styles that deal mostly with client-side changes such as hovering links, opening modal dialog, etc. CSS_STATE = 100       ◦ theme – This is purely visual styling such as box-shadow, backgrounds, borders, colors, etc. CSS_THEME = 200 Attach an Asset Library 1. Globally:  We can attach the asset library globally via the THEMENAME.info.yml file, but this approach would work only for a Theme. For any modules you should use hook_page_attachments_alter() or similar. For example: name: 'My Custom Theme' type: theme description: 'A custom Drupal 9 theme for demonstration purposes.' package: Custom core_version_requirement: ^8 || ^9 || ^10 base theme: false libraries:   - THEMENAME/global-styling   - THEMENAME/global-scripts2. Conditionally, via a preprocess function using #attached:  If you need to restrict the library to a particular page or element, then this is the best way to add libraries. For example:Taking a case where we need to attach a library to our page, then we can use hook_page_attachments_alter(): /** * Implements hook_page_attachments_alter(). */ function custom_module_page_attachments_alter(array &$attachments) {   // Adding stylesheet to the page.   $attachments['#attached']['library'][] = 'custom_module/custom-styles';     // Add a custom JavaScript file to the page.   $attachments['#attached']['library'][] = 'custom_module/custom-scripts';   }Or hook_preprocess_page(): /** * Implements hook_preprocess_page(). */ function custom_module_preprocess_page(&$variables) {   // Adding stylesheet to the page.   $attachments['#attached']['library'][] = 'custom_module/custom-styles'; }Similarly, with different preprocess functions we can attach a library using the #attached render array property like: /** * Implements hook_page_attachments_alter */ function custom_module_attachments_alter(array &$page) {   // Get the current path.   $path = $current_path = \Drupal::service('path.current')->getPath();   // If we're on the node listing page, add our retro library.   if ($path == '/node') {     $page['#attached']['library'][] = 'custom_module/custom-styles';   } }3. Inside a Twig template file: Use attach_library() in twig template. {# Attach a CSS library #} {% attach_library('my_theme/global-styling') %} {# Attach a JavaScript library #} {% attach_library('my_theme/global-scripts') %}Final Thoughts Assets Library in Drupal (versions 8 and above) has a profound impact on web development. It centralizes the management of CSS and JavaScript files within modules or themes, ensuring consistency and ease of maintenance across a website or application. By bundling these assets together, developers can efficiently control the presentation and functionality of their digital creations. If you’re looking to implement fantastic features of Drupal like this one in your next project, we have a team of Drupal experts who can help you. We’d love to talk!

Horizontal Digital Blog: Try this one weird trick with the Migrate API

Drupal Planet -

One of the key concepts of the Drupal Migrate API is the so-called process pipeline, in which we pass a value that is transformed by a series of process plugins. From time to time we find ourselves in the middle of a process pipeline wishing we could easily reference the current value in the process pipeline. I even created an issue on Drupal.org asking for this feature. As it turns out, the feature already exists! That is, as long as you know this one weird trick...

Talking Drupal: Talking Drupal #449 - Agile Methodologies

Drupal Planet -

Today we are talking about Agile Methodologies, How to pick the best one, and why they matter with guest Chris Wells. We’ll also cover CKEditor Text Transformation / AutoCorrect as our module of the week.

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

Topics
  • Drupal FL Camp talk
  • Fundamentals of Agile
  • How do you square long term planning
  • What is Redfin Solutions's preferred methodology
  • What is Crystal Agile Methodology
  • Do other methodologies have web specific versions
  • Would you agree that large companies can use different agile methodologies
  • Have you ever used Scrumban
  • Listener Question: Shivan xamount:: Story points are usually equated to fibonacci numbers. These are not supposed to correlate to hours, what do you think about that?
Resources Guests

Chris Wells - chrisfromredfin.dev chrisfromredfin

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Matthew Grasmick - grasmash

MOTW Correspondent

Martin Anderson-Clutz - mandclu

  • Brief description:
    • Have you ever wanted CKEditor to autocorrect symbols like the copyright mark, the “not equals” sign, and fractions, from their text equivalents? There’s a module for that
  • Module name/project name:
  • Brief history
    • How old: created in Mar 2024 by Gedvan Dias of Redfin Solutions
    • Versions available: 1.0.0-alpha1, which works with CKeditor 4 on Drupal 8, and 2.0.0-alpha1, which works with CKEditor 5 on Drupal 9 and 10
  • Maintainership
    • Actively maintained, was released just a few weeks ago
    • Not much documentation of its own, but the module leverages CKEditor’s Automatic text transformation, which has a fair bit of documentation on CKEditor.com
    • Number of open issues: only 1 open issues, which is the Project Update Bot’s automatically-created Drupal 11 compatibility issue
  • Usage stats:
    • 8 sites
  • Module features and usage
    • By default the module enables four categories of transformations: 'symbols', 'mathematical', 'typography', and 'quotes'
    • You can override the module’s plugin if you want a different set enabled, but the module also provides a hook you can use to alter the active sets or define custom transformations, similar to using emojis in Slack, for example

Drupal Association blog: Drupal lead Dries Buytaert announces a completely new Drupal CMS 23 years after its creation

Drupal Planet -

PORTLAND, Ore., 6 May 2024—Twenty-three years after creating Drupal as a university student and hundreds of thousands of websites later, Dries Buytaert announced today that a new version of Drupal will launch at the end of 2024. Drupal is an Open Source CMS that is foundational to a great digital experience platform. Its reliable, highly secure, and flexible tools build the versatile, structured content needed to create dynamic web experiences.

This new version of Drupal will incorporate the best of the 50,000+ modules created over the past decade into a curated, out-of-the-box experience for organizations wishing to build powerful websites quickly.

“We built this amazing platform to power the most robust digital experiences. And now we will make it more accessible to non-developers,” said Dries. “Drupal Starshot is an initiative that will deliver this new version of Drupal within eight months.”

“The Drupal Association is excited to support the Drupal Starshot initiative and to begin marketing the new version of Drupal as the first, best stop for those interested in understanding what Drupal can do,” said Owen Lansbury, Chair of the Drupal Association’s board of directors.

On 6 May, founder and project lead Dries Buytaert gave an inspiring keynote—also known as the Driesnote—introducing this completely new version of Drupal: Drupal Starshot.

Dries described how, much like the race to space in the 1960s, Drupal is also in a race. The web is moving forward, with or without Drupal. Drupal has a long history of being a leader in the Open Web, but it needs its “Moonshot” moment. Dries reiterated how the future of Drupal’s success will come from broadening its usability to a wider audience. The way to do this, Dries said, is to open Drupal’s powerful tools to non-developers.

What is Drupal Starshot, and how does it differ from the traditional version of Drupal? Drupal Starshot will leverage Drupal Core but have a different governance model to move fast, allowing for more innovation more quickly. 

After Drupal Starshot is introduced, when someone visits the Drupal.org download page, both traditional Drupal Core and Drupal Starshot will be available (under a different name, still to be determined). When Drupal Starshot is selected, it will automatically download the features that the user wants for their use case, making it easier for new users to try and test out Drupal, all from right in their browser. Drupal Core will still be the fundamental building block of Drupal Starshot and can still be used independently from Drupal Starshot for custom builds.

How will this new Drupal be different?

The Drupal that exists today, known as “Drupal Core,” will continue to exist and will be maintained by core maintainers. The Drupal Starshot initiative will introduce a new version of Drupal with a fully featured out-of-box experience.

Features that Drupal Starshot will include are:

  • Next generation page builder
  • Project Browser + Recipes
  • Automatic updates
  • Key contributed modules
  • Easy configuration
  • Default content
  • And possibly more!

Drupal community members who are interested in contributing to the development of Drupal Starshot can submit their interest via this interest form or join Dries at several Birds of a Feather sessions happening during DrupalCon Portland.

Watch the full Driesnote on the Drupal Association YouTube Channel. 

About DrupalCon

This year, DrupalCon North America is a four-day conference held in Portland, Oregon, from 6-9 May. Over 1,300 professionals and Drupal users collaborate on the project for a week. The Drupal Association is a non-profit organization that caters to the needs of Drupal and its worldwide community. It focuses on the growth of the Drupal community and supports the project’s vision to create a safe, secure, and Open Web for everyone. 

About Drupal and the Drupal Association

Drupal is a powerful open-source content management system for everyone, from small nonprofits to enterprises. It is used by millions of people and organizations worldwide, made possible by a community of 100,000-plus contributors and enabling more than 1.3 million users on Drupal.org. The Drupal Association is a non-profit organization dedicated to accelerating the Drupal software project, fostering the community, and supporting its growth.

Pages

Subscribe to www.hazelbecker.com aggregator - Drupal feeds