Adding Google Tag Manager Datalayer elements for Drupal 9 webform

1. First copy and paste the confirmation twig template for webforms in the webforms module.

Then add a div to the twig template like this.

<div id="learning-objective-data">  </div>

In the div place your webform submission data token for the field you would like to grab

{{ Webform Field }} 

So it looks like this:

<div id="learning-objective-data">
{{ }} 


Twig Trim Body Summary for templates Code

<div class="summary">
 {% set text = content.body['#object'].body.summary|render %}
{{ text|length > 80 ? text|slice(0, 80)|raw ~ '...' : text|raw }}
{% set text = content.body['#object'].body.summary|render|striptags %}
{{ text|length > 80 ? text|slice(0, 80) ~ '...' : text }}

ColorBox, Paragraphs, Media Types and fun stuff.

Recreating the process that's on our site.

 Create Media type for the Colorbox image.
 a. Add media type
b. I named mine Lightbox image
c. Media Source
d. Media source configuration = -Create - 
e. Field mapping- I only used "Name" as "Name"
f. Publish options = "Published" is ticked
g. Click the sprocket and change the image size to what suits you
h. sAve

Re-direct rule to make edit display form save and stay on itself and not go to /node/nid


When content is updated



Text comparison

Data selector:  @rules.current_path_context:current_path.path

Operator: contains

Matching text (direct input mode) : /yourdisplaypath.  (For instance, mine was /steps)


Node Tokens for Rules Drupal 9

For reference:


Node Author's email address:  {{ node.uid.entity.mail.value }}

Node created:  {{ node.created.value }}

Node Title: {{ node.title.value}}

Author's Username: {{ }}

Node Edit Link:  your website/node/{{ node.nid.value }}/edit




Example of my rule message body:

Hi {{ }},

Over-riding the Node Preview button in Drupal Node Edit form

I had to make a pretty easy change so yours may be more complex than what I needed.

I need the user to view a piece of content that had the start on our front page so they could follow the flow from the start. So I had the "Preview" button in the Node Add and Node Edit form re-direct them to the front page.
I found the code I needed to adjust in the node.routing.yml in Core Module Node.

We had a custom module where I put the below code into the MyModule.routing.yml file. I changed the path to '/'. which is the path to the front page.

Gin Theme Menu CSS Drupal 9- Horizontal Menu

Create Menu in Structure.

Place menu as a block where you need it and configure it in "Blocks Layout"

Here's the CSS: (Note: I had to save the css directly to the Gin styles.css for it to work. It would not work in my custom theme)

#block-YourMenuMachineName > ul{
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin-top: 50px;
  margin-bottom: 25px;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  width: 100%;

Disable Submit Button on Forms PHP with Jquery - Drupal 9

Case use: We had a form that was a memory hog so it took a long time to load the next step. Users kept clicking the Next button which was really a "Submit" button that created a user account, so we had duplicate user accounts being made.
So this solution will disable the button, change the test of the button to "Processing" so users will not keep clicking on it. :)

Your JS file

Mine is in my custom themes folder in a JS sub-folder with the title scripts.js.

Drupal 9 Rules Redirect with twig token

1. After saving a new content item entity of type Event
2. User has role(s)

Parameters: user: @user.current_user_context:current_user, roles: [reg_admin], operation: AND

3. Page redirect

Parameters: url:{{node.nid}}/products



Token is {{}}


Subscribe to Melinda Cozza - Power Platform and CMS Developer RSS