Tag Archives: Drupal 10 development

How to set up Responsive Images in Drupal 9?

An essential aspect of web development is optimal user experience, and a pivotal factor of that is the assurance of perfectly sized images. If your target audience is using a mobile device, then the use of large images is suitable, on the other hand for desktop it is not optimal. Ensuring to provide the correct size of image for the right device is known as “responsive images”. These kinds of images help you with a faster loading speed and provide your visitors better user experience. 

The Problem

One of the major issues with the images for web development is basically, the browser which you are choosing is unaware of the exact size that should be there matching the customer’s viewport of various screens. This sustains JavaScript and CSS are loaded. However, the browser can understand the environment in which the images are rendered including the exact size of the viewport and the resolution of the screen. 

The Solution 

This was previously mentioned that responsive images always use the picture element that has the perfect size which plays a major role in rendering signals to the browser. It sends the direction to choose from the best images based on the identified image style selections. 

With the inclusion of the responsive pictures module in the core, Drupal 9 development has done a fantastic job. This will speed up website loading time and enhance performance by enabling the browser to download smaller-sized graphics for devices with lower screen resolution. 

Steps to Reproduce

Enable Responsive images and breakpoint module.

Set up the breakpoints for your project’s theme.

Set up image styles for responsive images

Creating a responsive image style for your theme

Assign the responsive image style to an image field.

Step 1: Enable Responsive images and breakpoint module

There is no need to install either module because it is already a part of Drupal 9’s core. Because the breakpoint module will already be installed with the standard profile, all you need to do is enable the Responsive images module. Activate the breakpoint module if necessary.

Step 2: Set up the breakpoints for the theme of your project

You won’t need to generate a new breakpoints file if you are using a core theme like Bartik, Seven, Umami, or Claro because it already has one.

However, it is crucial that you declare the breakpoints in the “yourthemename.breakpoints.yml” file, which can be found in your theme’s directory, if you are using a customized theme for your project, usually found in “/themes/custom/yourthemename”.

Each breakpoint will apply a media query to the pictures. For instance, photos that are displayed on mobile devices may be smaller, or less than 768 pixels wide, but larger screens will have a width between 768 and 1024 pixels wide.

Step 3: Set up image styles for responsive images

Let’s now develop a picture style for every breakpoint. At Admin -> Config -> Media -> Image-styles, you can set your own image styles.

Then select “Add picture style.” Give your image style a meaningful name, and then use the Scale and crop effect to produce cropped photographs. Several image styles should be included for various viewports if the photos are stretched.

Step 4: Create a responsive image style for your theme 

Here, you may provide the browser a variety of picture style alternatives and let it pick the best one from the bunch.

Go to: to build a fresh responsive Drupal 9 image style.

Click “Add responsive image” under Home -> Admin -> Config -> Media -> Responsive-image-style.

Give your responsive image style a meaningful name before choosing the breakpoint group (choose your theme). Next, link the listed breakpoints to the image styles.

The setups for the image style come in a variety of options.

Where you can select a single image style that will be displayed on the specific screen.

Pick various image styles: where you can choose different image styles and also set the image style’s viewport width

Step 5: Assign the responsive image style to an image field 

Once all the configurations are complete, apply the responsive image style to the image field before moving on. To do this, navigate to the Manage display area of the field and choose the formerly established responsive image style.

Add content and examine the outcomes using a responsive image style on the page.

Ultimate Guide: Migrate From Drupal 7 To Drupal 9

Assuming you are a website proprietor, designer, services, or client, you might be already exploring the benefits of Drupal 10, the latest version. The upsides of choosing to migrate from Drupal 7 to Drupal 9 is that you get the most refreshed form of the CMS platform. Besides, when you have a community of open-source lovers pursuing a single objective of further developing Drupal every day, you should believe that migrating to the most recent version will be quite possibly the best choice you will make. 

If your site is still on Drupal 7, or any other version, the time has come migrate to a newer version. There are numerous approaches to migrating your site from Drupal 7 or other versions. Here is a step-by-step manual for migrating your Drupal 7 site from a data set source. 

What is Drupal 9

What is Drupal 9?

Drupal 9 web development is only the shortfall of deprecated code in the Drupal 8.9 form. It is indistinguishable from Drupal 8.9 for everybody editors, site manufacturers, and developers, and Drupal 8.8.0 will be the last delivery to deplore for Drupal 9. Worked with an API-first development approach, you should have an understanding of the process on how to migrate from Drupal 7 to Drupal 9 by lifting primary instruments that can characterize publication work processes. However, it is just no time like the present for the clients to give us genuine criticism. 

For what reason was the code depreciated

For what reason was the code depreciated?

For what reason was the code depreciated? 

Did it appear glaringly evident to deprecate the code while Drupal 9 Development was WIP? Perhaps. However, it had reasons received as rewards to the spectators of Drupal 9, such as: 

  • Sending the code inside Drupal 7 migrations to Drupal 9 helped take care of the problems even before the arrival of Drupal 9. 
  • It didn’t need refactoring like the past renditions that had a modified API. 
  • What’s more, the migration cycle won’t turn into a temporary obstacle for locals still in fluctuating renditions of Drupal. 

The ETL Process 

Regardless of what your source or objective is for migration, a Drupal migration will follow the ETL cycle or the Extract – Transform – Load process. The initial step is the Extraction step where the data is remigrated from the source module. The subsequent platform is the Transformation step where the extricated information is handled by the prerequisites by the cycle module. Furthermore, finally, the Loading step where the data is stacked into the capacity by the objective module. 

Process Plugin 

Migration Plugins and Modules 

  1. Source module

A bunch of data, called lines from the source. They assist with getting information from the source like a data set, CSV, XML, or JSON. 

  1. Process module

Line information will be handled and changed as required. It portrays how the objective is to be worked from the source information. 

  1. Objective module

When handled, the changed line is saved to the objective in the Drupal site. 

Plugins Required 

  • Migrate Module – Contains APIs to relocate content and design to Drupal 8. 
  • Migrate Drupal Module – Helps in migrating content and design from a Drupal source site to Drupal 9 Development. 
  • Migrate Drupal UI Module – A UI to play out the migration. 
  • Relocate in addition to Module – Provides abilities to change source information and APIs for gathering migrations. 
  • Migrate tools Module – A contributed module that offers stretched-out rush orders to oversee Drupal 8 migrations. 
  • Drupal update – A contributed module used to make the migration of YML scripts. 

Ground working Before Diving In 

Since we have a genuinely decent comprehension of a portion of the essential migration ideas and have introduced the fundamental modules required for the migration (as examined over), we should take a look at a couple of easy points before really initiating a Drupal 7 migrations to Drupal 9: 

  • Review the Drupal 7 site for contributed modules. A large number of the fields in the Drupal 7 substance types will rely upon contributed modules. Thus, we should check for those modules and introduce something very similar in Drupal 8 or Drupal 9. 
  • Introduce the contributed modules on the off chance that it isn’t consolidated in the Drupal 9 center. 
  • Introduce the strong center modules like updates, interpretations, and so forth if necessary. 
  • Have the Drupal 7 data set and records available by the Drupal 9 case. 
  • Select the strategy for migration Bulk or Individual painstakingly founded on the intricacy of the site. 

Conclusion 

However Drupal 9 was sent off a month back, and the method involved with refreshing conditions and eliminating deprecated code will go on for the following couple of months. What’s more, the same old thing is supposed to emerge until the Drupal 9.1 adaptation gets delivered. 

As indicated by the local area, Drupal 9 necessitates another default frontend topic. What’s more, a new, current, clean frontend topic, Olivero, is underlying the contributed project for consideration in the Drupal center. Subsequently, we can anticipate that Olivero should be added as a trial subject in the looming update. 

Drupal 9.1.0 will be delivered toward the finish of 2020. It will present new expostulations and elements that will prepare for Drupal 10 since it is normal to be worked inside Drupal 9.