<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 }}
      
  </div>

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
 

Trigger

When content is updated

condition

Text comparison

Data selector:  @rules.current_path_context:current_path.path

Operator: contains

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

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.uid.entity.name.value }}

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

Example of my rule message body:

Hi {{ node.uid.entity.name.value }},

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.

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%;

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.

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: http://yoursite.site/product/add/webinar?destination=/node/{{node.nid}}/products

Token is {{node.id}}

Basic GET example

URL: http://example.com/jsonapi/node/article/{{article_uuid}}

Response

HTTP 200 response. The response body contains the JSON:API object of a single article node, including attributes, relationships, and links.

The expressions:

outputs('Get_file_content_using_path')?['body']['$content-type']

outputs('Get_file_content_using_path')?['body']['$content']

The Html for the body:

<img src="data:@{outputs('Get_file_content_using_path')?['body']['$content-type']};base64,@{outputs('Get_file_content_using_path')?['body']['$content']}" />