Rector is a PHP tool that automates refactoring your code to take advantage of the latest language-level features in PHP or automated usages of deprecated code when upgrading your dependencies. The Drupal community has relied heavily on Rector via the drupal-rector extension to automate major version upgrade fixes. Also, Tomas Votruba, the creator of Rector, is consistently blogging and creating tooling to elevate the developer experience. Rector is a great tool, but there are a lot of consequences when using it for contributed code.

Having an attractive and engaging website is crucial to success in today’s digital age. One way to achieve this is by using dynamic layouts that allow for flexibility and creativity in designing your website. Fortunately, Drupal provides a powerful set of tools that can help you create dynamic layouts with ease.

In this article, we will explore how to use Layout Builder, CTools, and View Modes to build custom layouts for your Drupal website. Whether you're a beginner or an experienced Drupal developer, this guide will provide you with the knowledge and skills to take your website design to the next level.

New to Layout builder? Explore more articles to gain a deeper understanding.

Leveraging Entity View Modes and CTools Module for Dynamic Design Strategies

When using the Drupal layout builder, we may develop a number of strategies to maximize its effectiveness. Contributed modules like paragraphs, views, CTools, and others can be used in conjunction with Layout builder to develop these strategies. We can also make use of the content types' entity view mode. We have discovered that employing entity view modes is an excellent strategy for sites that require the most versatility.

In this lesson, we'll discover a technique that makes use of the entity view modes and the CTools module's features. To accomplish this, a set of components will be created. It is similar to component-based design methodologies.

We'll make use of Drupal's Basic Page content type, which is available right out of the box. To render various items, we will add new view modes for the Basic page content type. Using the CTools module's capability, we will render an entity as a block in the layout builder. Using view modes, we will add a banner image to the homepage of our website.

Installing CTools module

In the Drupal framework, Chaos Tools, sometimes known as CTools, is a significant and well-liked module. It is essentially a collection of APIs and technologies that construct libraries for other modules to use and make code easily accessible to developers. Several Drupal modules rely on it in one way or another.

In order to create the view modes pattern for the Basic page content type, we will first need the Chaos tools suite (ctools) module.

Install the CTools modules by using the composer command shown below:

To use the module, go to Extend and install the module.

The following command can also be used to install the module using the drush command line as an alternative:

View Modes Pattern

After installing the module, enable the layout builder under "Manage Display" for the Basic page content type.

We need two things in the basic page content type in order to apply the view modes pattern.

• Banner Field
• Banner View mode

Banner Field:

Add an image banner field using the setup below to the basic page content type:

Banner View mode:

To add a view mode, go to Structure > Display modes > View modes > Add view mode

Create a view mode called Banner Image for content entity type:

This page will now display the newly created view mode: Structure > Display Modes > View modes

After defining the view mode, we must enable it for our Basic page content type. To do so, navigate to the content type's "Manage Display" section and enable the view mode "Banner Image" under the "Custom display settings" section, as shown below.

After enabling the view mode, you'll note that our custom view mode is now accessible to use in the content type's "Manage Display" area.

Next, go to Banner Image view mode and disable all fields except the Banner field that we defined earlier.

Following this step, to add the Banner image to the homepage, overrides the default layout of the basic page content type by clicking on the Layout tab displayed in the homepage's primary tabs.

In the following steps, we'll add the Banner Image view mode and show the picture using the ctools block. To achieve this, click "Add Block" and a panel with a list of the available blocks and fields to add to the layout will appear on the right side of the page.

•  Choose Entity View (content) to add the view mode.

•  Add the block after configuring it and choosing the "Banner Image" view mode.

Our home page's final layout will appear as follows after adding the Banner Image view mode:

Final Thoughts

This is how you can use Drupal layout builder and CTools module to apply the view modes pattern for various use cases in accordance with your needs.  While this is a powerful approach, it can be difficult to keep track of all the changes you make and the various view modes. To facilitate better control over your view modes, consider leveraging modules like CTools Exportables or Features that enable you to export and import your view modes with ease.

From dynamic layouts to advanced functionality, we have the Drupal skills and expertise to bring your vision to life. Contact us today to learn more about how we can help you build the website of your dreams.

Author: Mustakim Farooqui

Meet Mustakim Farooqui, Drupal Developer, and our own Chess master. He dreams of visiting Europe and enjoys reading novels and tech articles. When not working, you can find him with a game of chess, solving puzzles, or checking out new Linux distros. Give him a strong cup of coffee and he’ll set sail for anything!

Leave us a Comment

Recent Blogs

How to Create Dynamic Layouts with Layout Builder, CTools, and View Modes

A Journey of Persistence - Shreeganesh’s Career Story

What You Need To Know About Continuous Integration and Testing in Drupal

Featured Case Studies

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

Explore

A Drupal powered multi-site, multi-lingual platform to enable a unified user experience at SEMI

Explore

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

Explore

Sometime during the mid-90s, I remember attending a media camp organized for journalism aspirants. A speaker, whom I don’t recall, talked to us about writing newspaper columns. One piece of advice still lingers is that the note should always begin with a pleasant tone and end with a satisfying élan. But what will one do when the heart is heavy, and the news is unpleasant? 

“In the dark times
Will there also be singing?
Yes, there will also be singing.
About the dark times.”

—wrote Bertolt Brecht. 

I don’t want to paint the times dark. I do not think any particular time is darker than the darkest. But unforeseen things happen all the time, and some of them might be unsettling to us. 

For the team-TDT, Jayesh’s demise was such a moment. We lost a brother. I take this moment to offer condolences to his grieving family. Every death gives rise to a new carbon cycle. Let the wheels of life roll. 

I need to break this grimace. So let us talk about new product announcements. Pantheon has published 2023 first-quarter updates. It includes front-end sites update, support for PHP 8.2 and Drupal 10, and performance improvement in the site listing page. They have also announced EOL for their built-in LocalDev feature. 

Hinto group is conducting a webinar on April 4 to popularise a new module incorporating OpenAI functionality with CKEditor5, providing users with a powerful and user-friendly editing experience. It would make content editing more fun and more powerful. 

In April, many major camps are happening. We had earlier updated about us being an In-Kind sponsor for MidCamp. Apart from that, both Drupal South and DrupalCamp Poland have added us as their media partners. 

DrupalCamp Colorado, scheduled for August, has called for speakers. The 8th edition of Backdrop Live happened the last weekend, and the subsequent unconference-style Backdrop Live conversations in 3-hour blocks of interactions are tentatively scheduled for the 48-hour course on September 22 and 23, enabling anyone at any timezone to attend at least one of the sessions. 

You could register for the Open-Source North conference in Minnesota at a 20% reduced price until April 7. Early bird pricing for DrupalCon North America, happening in Pittsburgh on June 5 to 8, 2023, will end at 23:59 UTC on April 2, 2023. From April 3, you may have to purchase regular tickets. DrupalCon Europe, happening in Lille, France, from October 17 to 20, 2023, has launched sponsorship sales. Drupal Developer Days 2023, happening in Vienna, Austria, from July 19 to 22, 2023, has started an early bird ticket sale at €60 but will be available only for the first 100 registrants. The regular price is €132. 

A11yTalks announced their next meetup on April 12 at 6:00 pm EDT. Hidde de Vries would discuss “Shifting Left: How CMS Accessibility Can Help.” On March 22, Black Girls Code and VMWare came together to host their monthly speaking series with the topic, “See It, Be It – A Black Unicorn’s Journey.” The Brisbane Meetup to learn, share and explore WordPress and Drupal together will happen on April 7. Pune Drupal Meetup will occur on April 14. 

We had published the news about ICFOSS partnering with Zyxware to impart Drupal training for women who needs to rejoin their careers after a break. Von Eaton, director of programs at Drupal Association, had addressed the students. The training ended on March 19. Zyxware has released Von’s presentation at the event as a YouTube video. 

Evolving Web is celebrating Women’s History Month in March. Droptica will publish the first live stream of Droptica Webinars on Thursday, April 13, at 3:00 pm CEST. On blogs, Opensource.com has published an article busting the myths surrounding Open-Source CMS.

There end the week’s updates. Thank you. 

Sincerely,
Sebin A. Jacob
Editor-in-Chief 

Today we are talking about Public Speaking with Marjorie Freeman & AmyJune Hineline.

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

• Why Public Speaking is important
• Why people are afraid of Public Speaking
• Tips to overcome
• Imposter Syndrome
• What makes a good experience
• Never do’s
• Favorite Public Speakers
• Alternatives
• Podcasting as Public Speaking
• Writing Workshop
• How to get started

• Diverse Speaker Training Group Handbook (Jill Binder)
• SFDUG Writer’s Workshop
• Drupal Camp Asheville Neurodiversity Initiative
• A11yTalks
• SFDUG is looking for speakers
• Dak Prescott Walter Peyton acceptance speech
• Pedro Pascal monologue
• Matt Kleve
• opensource.com
• Enable architect

Marjorie Freeman - @the_mjfreeman AmyJune Hineline - @volkswagenchick

Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Kat Shaw - drupal.org/u/katannshaw @katannshaw

Stephen Cross @stephencross Environment Indicator Adds visual indicator to identify which admin environment is being accessed.

To demonstrate the best content authoring and administration user experience, I created a dedicated Schema.org Blueprints Demo module. The Schema.org Blueprints Demo module does a lot more than content modeling. For example, the demo switches Drupal's admin and site theme to the Gin Admin Theme with Dashboards. The Schema.org Blueprints Demo module provides a fully progressive decoupled working instance of Drupal. To build this demo, I examined a few popular decoupled Drupal distributions for ideas and inspiration.

Distributions

I refrain from using distributions because they can become challenging to maintain and manage. At the same time, distributions are invaluable learning resources for understanding the modules and custom code required to build a fully working instance of Drupal. I am looking forward to Drupal's Recipes initiative, which will be a modernization of Drupal's distribution system to allow site builders to assemble Drupal site features and functionality for their specific needs.

To build my Schema.org Blueprints demo, I spent hours reviewing different distribution's module selections and custom code. I am sharing what I found when comparing two very popular headless/decoupled distributions.

Contenta

Contenta was first released in 2017. Contenta is a fully decoupled implementation for Drupal. It is a community maintained distribution supporting several front-end starter kits, including Gatsby, Next.js, and Vue. Contenta CMS is a fork & go solution, which means the installation profile enables some modules with default configuration; from there, the site developers are responsible for maintaining the site.

Pros

• Minimal...Read More