Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Sep 02 2021
Sep 02

Maps are a common feature many websites want to implement, and depending on requirements, often it is enough to simply embed the map. However, what if you want to create map markers using your own site data or use custom overlays to display additional geographic information? Drupal makes this quite easy with modules like Views and Gmap for Drupal 7.

A Drupal 8 port of GMap is in the works, and there is also the Geolocation D8 module which has Views and Google Maps support. For this article we will review a D7 implementation, although the Javascript code should be easy to adapt for D8 and Geolocation.

Getting Started: Location Markers

Maps require GPS or similar type formats to generate location markers. While you could enter GPS coordinates directly it is more user friendly to use a standard postal address and have Drupal geocode the address using a mapping service like Open Street Map, Google Maps, etc. The Drupal 7 modules used to create our map display are:

  • Address Field
  • Geofield
  • Geocoder
  • GMap
  • Views

This allowed us to create an address field of type "Postal address" and a geofield using the "geocode from another field" widget type. Now a user can enter a regular postal address and the geocode module will query a map service such as Open Street Map or Google Maps to create a map friendly coordinate. With our location data points we can build a View using the GMap format, add our geo field, then update the GMap format settings and select the geo field which should now be available.

Add a few items with addresses and the Geo modules generate the GPS coordinates for Gmap to display as you can see in the screenshot below. The drop down Legislation Category above is a standard Drupal Views filter, while the Location Boundaries checkboxes on the right are some custom HTML added as a “Global: Text area” field in the View’s footer section with layout and styling done via CSS.

Map of San Francisco with three markers


Here are some screenshots of the View configuration. The View format is set to Gmap which requires at least two fields, one with the content’s Node ID and one with the location coordinates. The title field was added to give some information for the marker popup, but you can add more data by using the “rewrite results” option for any field in the View’s config. Simply check “Rewrite the output of this field” and use the Replacement Tokens to combine other field data, and usually you will exclude those other fields from the View display so you don’t have redundant content.

Drupal 7 Views configuration with GMap module

There are some settings required for the Gmap format. We must select the field containing the map coordinates (geotag from the geofield module for our setup), the field with the Node ID, and a field with information to display in a popup when a map marker is clicked.

Gmap Views configuration Gamp configuration continued

Building Custom Overlays

For our custom layers we created arrays of GPS coordinates that could be used to define map polygons, and then attached event listeners to HTML elements such as buttons and select lists to control the behavior of our custom polygon layers. In our case we set the fillOpacity of the desired layer to 35% so the markers would be visible underneath, but you could toggle only the border or a variety of other actions. Note that the layer configuration and click handlers are added through the bind and init functions. This makes sure your customizations are added before the map is built:

gmap_object.bind('init', function () { ... code inside here ... });

The Javascript code must be added to your map display. You can attach it through a custom module, theme layer, or even through the Javascript Injector module. The JS Injector module works well, but it is generally advised against because it stores code in your site’s database. It is useful for users that do not have access to the site’s codebase, just restrict access to trusted users only.

All of the JS code should be added inside the obj.bind(‘init) function which is wrapped by the Drupal.gmap.addHandler function. This makes sure all of your JS is ready before the map gets loaded. In the init function we set up the coordinates for our layer boundaries, then use those to create a layer with our desired options. Our layers start out hidden with fillOpacity set to zero, then the sidebar controls are used to control options like borders, fill color, and transparency.

The sidebar controls are simple HTML added in the View’s footer section with a global text field with the functionality added through a jQuery ready function. We use jQuery(document).ready to make sure all the elements are rendered before we attach the interactive functionality. With each button you can specify different actions, so our “Districts” grouping checkbox turns on the borders for all the district layers. The same can be done with pure JS, or your framework of choice, but jQuery is readily available in Drupal 7.

Map of San Francisco with layer borders


Clicking “District 1” zooms in and pans to the level specified in our jQuery button handler while toggling all the other districts to be grayed out by looping through the rest of the items using our custom highlightItem function to set their opacity to 35% then setting our target layer to transparent:

neighborhoods.forEach(highlightItem);
neighborhood_01_layer.setOptions({fillOpacity: 0.0});

Map zoomed to highlighted layer


Here is a basic example of the JS code, make sure it is only added to your map page.


// GMap module customization for neighborhood map
Drupal.gmap.addHandler('gmap', function (elem) {
 
  var obj = this;
  obj.bind('init', function () {
    /*** Neighborhood Layers ***/
    // Neighborhood 1
    const neighorhood_01_coords = [
        { lat: 37.76351, lng: -122.51965 },
        { lat: 37.78172, lng: -122.52265 },
        { lat: 37.79393, lng: -122.51210 },
        { lat: 37.79312, lng: -122.50107 },
    ];
    const neighborhood_01_layer = new google.maps.Polygon({
      paths: neighorhood_01_coords,
      strokeColor: "#000000",
      strokeOpacity: 0.0,
      strokeWeight: 2,
      fillColor: "#333333",
      fillOpacity: 0.0,
    });
    neighborhood_01_layer.setMap(obj.map);

    // Array of layer names so we can easily loop through
    // and make changes to all layers, such as hiding all
    // layers except for the one selected by the user
    var neighborhoods = [
      neighborhood_01_layer,
      neighborhood_02_layer, //not created in this example
    ]
 
    /*** Map controls ***/
    jQuery(document).ready(function($) {
      /*** Neighborhood highlight controls ***/
      var buttonN1 = document.querySelector('.neighborhood-1');
      buttonN1.addEventListener("click", function() {
        neighborhoods.forEach(highlightItem);
        neighborhood_01_layer.setOptions({fillOpacity: 0.0});
        obj.map.setCenter( {lat: 37.77810413996199, lng: -122.48471403048961 } );
        obj.map.setZoom(13.4);
      }, false);
     
      // Helper functions below that can be used to loop
      // through many layers to modify display options
      // Only "highlightItem" used in this example
     
      function showBorders(value, index, array) {
        value.setOptions({strokeOpacity: 0.5});
      }
      function hideBorders(value, index, array) {
        value.setOptions({strokeOpacity: 0.0});
      }
     
      function highlightItem(value, index, array) {
        value.setOptions({fillOpacity: 0.35});
      }
      function highlightClear(value, index, array) {
        value.setOptions({fillOpacity: 0.0});
      }
     
    });
   
  });
});

Conclusion

Increasingly, customized maps that highlight neighborhoods, featured locations, and other specific, bespoke points of interest are being sought after by governments, nonprofits and businesses. Drupal allows you to respond quickly and effectively with custom map overlays using GMap and Views. Please feel free to contribute some of your examples in the comments.

Sep 02 2021
Sep 02

The world of technology is constantly evolving and strives to create new solutions, as well as to improve the old ones. Consequently, the life cycle of every software sooner or later reaches its inevitable end. Such a fate awaits the distinguished and still popular Drupal 7 with the end of its official support by the developers. This is a great moment to recall the novelties it brought in relation to the previous versions and to shed some light on what's next.

General information

Released on 5 January 2011, Drupal 7 was the successor to Drupal 6, obviously, and brought many awaited and – above all – necessary changes. Here are some of the most important ones.

  • The concept of entity was introduced, known from many other solutions. Hereafter, entities can be anything – from a user profile and a node, to things like a comment or a taxonomy term.
  • Support for multisite appeared.
  • Content Construction Kit (CCK) became a module in the Drupal 7 core.

In addition, there were many smaller, but no less important improvements, such as: improvement of performance and security, changes in hooks and API, reduction of system requirements, ability to create shortcuts, scheduling tasks using cron, and many, many more.

Drupal 7 end of life - change of date

Originally, Drupal 7 end of support was planned for November 2021. However, this date has been changed to 28 November 2022. Where did this change come from? As we may learn from the official information on this topic, the main reason for postponing it is COVID-19 and the impact it has had on the international market – especially on companies and their budgets. In practice, this means an additional year of support covering the security and development of patches for Drupal 7 websites. It also means extra time to move your projects to newer and dynamically supported and developed versions of Drupal.

End of support for Drupal 7

From the end of November 2022, no further official patches will be published. Therefore, if we don't update our pages to a higher Drupal version, we'll be left on our own and at the mercy of hackers, to whose attacks our page may become vulnerable. Of course, this isn't the only reason why you should jump to version 8 or 9, which I'll try to convince you of in the next paragraph.

Drupal 7 vs Drupal 8

The introduction of Drupal 8 meant a very big and significant change towards the development of the system. Let's take a look at some of the most important changes and improvements when compared to the previous version.

  • Drupal has been rewritten using the Symfony framework. For those unfamiliar with the topic, Symfony is one of the most popular PHP frameworks. Therefore, from the very beginning Drupal could boast that it gets a lot of support from the community and creators associated with Symfony. This change is actually so big, because the earlier Drupal versions weren’t based on any such powerful frameworks.
  • A new engine for creating templates has been introduced - the well-known and popular Twig (this is the result of switching to Symfony, where this engine is also used). This streamlines the work when creating templates, and brings the way of implementing them closer to modern standards, abandoning the previous themes and PHP templates.
  • The lack of a sensible text editor in Drupal 7 has been solved in version 8 with CKEditor - an extremely powerful and multifunctional tool for working with content.
  • The Views module has become a part of the system's core.
  • Drupal 8 brought almost 200 changes and patches that you can read about on Drupal.org.

You may also be interested in: 10 tricks to work efficiently with the Composer in Drupal 8

Then is the change from version 7 to version 8 or even version 9 (which you'll read about further down) a good idea? To put it simply: YES! From the very beginning, switching to Drupal 8 seemed like a necessary move. The number of novelties and possibilities introduced at that time by version 8 was stunning, and the obsolete solutions known from Drupal 7 were starting to be a drag in combination with the raging development and progress in the field of web development.

Then what is the cause of such a large number (about 560 thousand active installations - as of July 2021) of websites still operating on Drupal 7 and of the many years of support from the developers provided for such an old version of software (we'd like to remind you that Drupal 9 released in June 2020 is currently the default version)? It's all the result of how great a revolution Drupal 8 was and what great changes have been made to the very logic that underlies the entire system. The introduction of Symfony as the base framework for Drupal was a double-edged sword. Although it actually brought only good changes, it led to practically no compatibility with the previous versions. Upgrading from Drupal 7 to 8 couldn’t be done automatically, and sometimes even required rewriting the entire page from scratch. As you can imagine, this could be very problematic for systems maintained over the years, not to mention the cost that such a change could generate.

Today, however, we are already richer with years of experience. Upgrading from 7 to 8 doesn't have to be as titanic a job as it initially was. There are many tools on the market that can help us with the migration and make it easier.

Drupal 8 EOL - What’s next?

Let another fact be evidence for the popularity of Drupal 7: the official support for Drupal 8, its older brother, ends on 2 November 2021 – a year earlier. The reason for this decision is primarily that updating Drupal 8 to 9 is much simpler and often doesn't require any additional work from us. Hence, moving our website from version 7 to 8 is the first step to updating to the latest version that's being currently developed. Drupal 9 in relation to 8 is simply an evolution, not a revolution of the ideas behind the premiere of Drupal 8. For more information on this topic, you can visit the official page of version 9 and our post on the transition to Drupal 9.

End of life of Drupal 7 will be in November 2022, and of Drupal 8 in November 2021

 

Drupal 7 EOL - professional help

As we've already established that the transition to the latest version of Drupal is actually a necessity, and with the transfer of the planned Drupal 7 support end date, we've gained some additional time, I'll introduce you to this process. I'll try to distinguish two possible paths here: for those less knowledgeable on the subject and for the advanced users who want to learn about our methodology.

Transition from Drupal 7 to 8 for beginners

As already mentioned, the updating process isn't automatic here and requires at least basic technical knowledge and experience in carrying out similar migrations. If you don't feel up to it, we recommend that you contact the professional Drupal support team for help. Using the services of specialists experienced in this type of migration can significantly shorten the entire process, as well as dispel any doubts related to it.

Transition from Drupal 7 to 8 for advanced

Now we'll show you, based on our experience, how to handle such a process. First of all, it'll be easier for us to migrate the page to version 8, and after that – to version 9. We should avoid large jumps (i.e. from Drupal 7 to 9), because they may cause more needless chaos than necessary.

  1. Let's start by reviewing the available modules and making sure that all the ones we have we’re actually using. It's also important to first make sure that we understand the functionalities of the page in order to be able to fully translate them into the new Drupal version.
  2. Changing the version is a good time to clean up and redesign the layout of our page, which may be outdated.
  3. Custom modules need to be rewritten. There is no other option here but to simply rewrite the modules, following the new method of implementing them.
  4. As is the case with modules, rewriting the custom themes is also necessary. The introduction to the Twig template engine is a big change, and translating the old templates into this solution is fully obligatory.
  5. Drupal 8 has changed the way data is stored in the database, as well as its structure, so data migration is a must. Such modules as Migrate, Migrate Drupal, Migrate Upgrade and Migrate Plus will help us with this.
  6. THE MOST IMPORTANT POINT: backup, backup, backup! Before making any changes (let alone as crucial as this one), it's necessary to create a backup. It'll save you trouble in the event of an unforeseen failure during the migration. It seems trivial, but this issue is often underestimated.
  7. It's worth ensuring that our Drupal is updated to the latest possible version of Drupal 7. This should minimize any difficulties in transferring the configuration.

If we manage to migrate the website to Drupal 8, upgrading it to version 9 itself shouldn't cause any major problems. First of all, we need to replace the obsolete methods in our code with new code or just get rid of them. Drupal-check is one of the tools that can help us find such a code.

Sep 02 2021
Sep 02

Drupal 6 just might live forever.

This isn't so much an announcement as it is a reminder: if you know of any sites out there running Drupal 6, they probably want to make sure we keep supporting it!

Drupal 6 Long-Term Support (D6LTS) until at least February, 24th 2023!

Why February 24th, 2023?

Well, we've been using the February 24th date, because Drupal 6 orginally reached it's End-of-Life on February 24th, 2016, and we've been taking it one year at a time.

Drupal 7's community support End-of-Life will be in November 2022. We know that D7ES will have a long life ahead of it as there are still hundreds of thousands of important sites running it. Similarly, we see no reason to stop our Drupal 6 support any time soon.

There's still TONS to do Drupal 6

While it can be a little hard to predict the challenges that Drupal 6 site owners will face in the future, don't worry. If the past is any indicator, I'm sure there will be plenty to do!

What are the "Thoughts" on Drupal 7?

Recently, we've been really planning and working towards developing what's needed for Drupal 7's End-of-Life and the Drupal 7 Extended Support (D7ES) program.

We still don't know the full details of our offering, but we can say this:

  • It will be very similar to our D6LTS offer
  • We want to be able to support even more sites!
  • We want our service to be even more valuable to site owners!
  • We want to offer plans for sites of all types, sizes, and needs! 
  • We'll be providing Drupal 7 support until at least November 2025.

We're hoping to have the first bits of this ready to announce soon enough that you can start making your long term Drupal 7 plans.

Contact Us About Your Drupal 6 or Drupal 7 Site Now!

Sep 02 2021
Sep 02

Drupal 8 has lot of inbuilt functionality within it, one of the main important features is Configuration Synchronization. It will help us to migrate full setup properly on site deployment. But the main problem is that, According to the Drupal 8 CMI documentation,

The Configuration Manager module in Drupal 8 provides a user interface for importing and exporting configuration changes between a Drupal installation in different environments, such as Development, Staging and Production, so you can make and verify your changes with a comfortable distance from your live environment.

The same idea appears in this article,

Perhaps the most important concept to understand is that the configuration system is designed to optimize the process of moving configuration between instances of the same site. It is not intended to allow exporting the configuration from one site to another. In order to move configuration data, the site and import files must have matching values for UUID in the system.site configuration item. In other words, additional environments should initially be set up as clones of the site. We did not, for instance, hope to facilitate exporting configuration from whitehouse.gov and importing it into harvard.edu.

So Still we hardly depends on the Features module, But we can use the CMI (Configuration management Interface between two different sites with simple hacking solution.

The CMI works with based on the site UUID, If the sites have different UUID then, it won’t work, So changing destination site’s UUID with Source site’s UUID would solve the problem.

Just follow the below steps to use CMI between two different sites,

1. Export Configuration from your source site (Site A)

2. Extract the file, Open the system.site.yml file and get the Source site (Site A) UUID

3. Run the drush command in your destination site (Site B)

drush config-set "system.site" uuid "Your Source Site UUID here"

4. After that, try as usual Import Process in destination site (Site B)

It will accept the Site A configuration in Site B. So we can migrate all datas into our another site.

FYI : I am not sure, It is a effective / Proper way to do it.. If there is any problem with this method please mentioned in the comment.

Sep 02 2021
Sep 02

One of the most favourite and  valuable features in drupal is multisite configuration, Drupal 8 provide simple way to create multisite it reduced lots of works. The following steps shows to configure multisite in drupal 8,

  • Should have more than one domain and databases, I am going to use the domain (www.domain1.com, www.domain2.com) and databases (domain1, domain2).
  • Create two folders in drupal-8/sites/ folder with domain1, domain2 name, the folder path would be like this drupal-8/sites/domain1/ and drupal-8/sites/domain2/
  • Create files/ folder in both the folder (drupal-8/sites/domain1/files)
  • Copy the default.settings.php file and paste it into the both folder then rename it as settings.php ( drupal-8/sites/domain1/settings.php, drupal-8/sites/domain1/settings.php)
  • Edit the settings.php file for domain1 to adding the database,
$databases['default']['default'] = array (
  'database' => 'domain1', // Change value to domain1 for www.domain.com and domain2 for www.domain2.com.
  'username' => 'root',
  'password' => 'root',
  'prefix' => '',
  'host' => 'localhost',
  'port' => '3306',
  'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
  'driver' => 'mysql',
);
  • Copy the drupal-8/sites/example.sites.php file and paste in on the same location then change the file name to sites.php (drupal-8/sites/sites.php)
  • Add the following line in the bottom of the drupal-8/sites/sites.php file
$sites = array(
 'domain1' => 'domain1.com', // Folder name => Domain name.
 'domain2' => 'domain2.com',
);

Thats all, both domain would works well with the different db with a single instance.

Sep 01 2021
Sep 01
  • 02 September 2021
  • Anca Verniceanu

DrupalCon Europe 2021 is less than two months away – and we can already feel the enthusiasm rising.The conference is packed with value from start to finish: innovative topics; inspiring speakers from all corners of the tech world and in-depth workshops.

On top of a diverse range of sessions at DrupalCon Europe, there are two workshops on creating great user experiences with Drupal and building a website with low code. A single DrupalCon ticket gives you access to all this and you will have the chance to do this among other developers, designers, editors, content strategists, marketers, end-users or leaders from the Drupal community.

Apply for offered tickets

This year, Liip wants to make DrupalCon even more widely available and accessible by offering free tickets. At Liip we always strive to help level the playing field for women and minority groups, who have been underrepresented in the tech industry for far too long. That is why we are thrilled to announce that we are sponsoring Grants and Scholarships that will help cover costs for many to attend this event.

Eligibility criteria

Participants must meet the following background requirements:

  • be a member of an underrepresented group in tech — this includes, but is not limited to people of colour, LGBTQIA+ people, women, disabled people or be unable to attend without financial assistance
  • be unable to get funding from the companies they work for
  • be 18 years of age or older
  • agree to follow DrupalCon code of conduct

First-time attendees might be given priority, and you can even apply if you already bought a ticket, but you feel you qualify to receive a scholarship.

What you will learn

If you’re chosen for a scholarship and get a free ticket for DrupalCon 2021, you will have the chance to:

  • gain knowledge and skills
  • expand your network
  • learn from companies that leverage technology transformation opportunities within their industries
  • share your thoughts, opinions and perspectives with other people from the Drupal community
  • help drive Drupal’s continued evolution and success by actively engaging in the program at DrupalCon

How to apply

Submit your application by 20th of September 2021.
We hope to see you there and remember - when you win, we all win!

Anca Verniceanu

Frontend Developer

  • Topics
  • Tags
Sep 01 2021
Sep 01

Interactive websites help in engaging more users. For example, watching a popup video, solving a puzzle or quiz, or viewing compelling infographics can make users spend more time on your website. In addition, these kinds of interactive things help users remember your company name and contact you back. In this article, let’s explore the elements that help in making interactive website design & what are the benefits of having that.

Businesses are always looking for newer avenues for growth and increasingly focus on their website to reach out to their audience. Therefore, there is an inherent need to ensure that the website breaks the clutter and helps in having an improved interaction with the visitors. It will negatively impact visitors if they have static content before them and cannot interact with your website.

You must provide a personalized experience for your audience, and one of the best ways to achieve this is by making the website more interactive. Studies show that interactive content provides two times greater engagement than static content. (Source: HubSpot) An interactive website design can automate each visitor's experience and use specially crafted content to create a customized experience.

What are interactive websites?

These websites allow better interactions with the visitors, and they can actively communicate with the elements and the content on the website. For example, it could enable the users to leave comments, initiate a chat with them, or suggest preferences that can alter their experience while they are on the website.

The business must think strategically about what the visitors will be looking for on the website. You must utilize historical preferences and analytics and understand the right website features that can help better engage with the website visitors.

Benefits of an Interactive Website Design

There must be a robust communication platform and provide an excellent user experience. Companies can also receive feedback from the audience by engaging with their clients online. Let us know the benefits that businesses have through an interactive web design.

Create a Unique Customer Experience

The website visitors will look forward to a self-service feature that will allow them to receive responses to their queries. This feature can help you provide visitors with a fantastic experience as they interact with your website. It also allows the users to be in charge and feel empowered as they can search based on the location chosen, ask a question, and respond to or vote to an inquiry that relates to them.

Enhanced Conversion Rates

As the visitors interact more with the website, it increases a sense of trust. For example, if the website contains the logo colours, the trust factor gets raised, and the visitors tend to interact more. As the trust increases, they are more likely to become a paying customer. Moreover, as the visitors increase the dwell time on the website, the bounce rate also decreases.

The Content Looks Smart

When you create interactive web pages, they will have designs that can draw the visitor's attention. For example, interactive infographics and animation can ensure better engagement with the visitors. You can also use a rating system that will allow the content to engage with the users. Accordions can also help to show your content better without cluttering the web page.

Improves SEO and Search Rankings

When you make an interactive website, it will bring in more visitors. Hence, you will readily receive requests from other entities to link to your website. These backlinks form an integral part of the SEO process, and they can ensure an increase in search rankings. Interactive websites also see a surge in visibility, enhancing search engines' perception of your website. An improved user experience can even ensure your website to be on the first page during search rankings.

Interactive Features for your Website

You must have come across the interactive web design of renowned brands. They provide the ideal visual experience, and you can implement these features on your website. Let us discuss some of the ideas that you can implement too.

Webchat

The web chat feature will allow the users to ask any additional queries after going through the FAQ section. They can directly connect to your customer support team and initiate an online chat. It can provide the ideal interaction needed by the users. You can also utilize a chatbot that can respond to pre-configured questions.

The Hover Selector

It is an essential website feature that selects the element once you hover the cursor over it. Web designers can utilize various ways to ensure that the visitors consume the content. For example, they can apply varying styles or use dynamic and colourful states or animation to make it interactive.

User-Generated Content

You can allow users to comment on various sections of the website. The comments will enable you to find out what you must do to generate newer and better forms of content that appeal to users. You can allow social sharing of specific pages on the website or enable users to share your blogs on their personal social media channels. Having a community or forum on the site is another way of encouraging interaction.

Using Forms and Ratings

You can induce feedback from the visitors on different sections of the website. It is necessary to receive their opinion that can be useful for making appropriate changes. It helps to identify any issues in your operations or the website too. Creating a survey is another way of inducing visitor contribution. You can also use the rating feature to generate participation from visitors and is a necessity for e-commerce websites.

Other Ways to Make your Website Interactive

You can make the content creative by adding interactive infographics and videos at appropriate places on the website. You can also create surveys to extract the required information from visitors that can help you in future decision-making. Using the benefits of interactive newsletters and slideshows can ensure repeat visits from users. Data visualizations and diagnostic tools can also help in e-commerce sites.

Using Drupal for Interactive Websites

Several renowned brands choose Drupal for their website development, as it helps create beautifully designed interactive websites. Drupal has a ready-to-use module to make an interactive website. We will discuss some of the elements that can help in having interactive Drupal website designs.

Social Media Sharing

Social sharing buttons allow users to share content on their personal social media pages readily. The AddToAny Share Buttons Module can provide handy social media sharing buttons and readily integrates with your website. It can integrate with Google Analytics too.

Allowing Users to Comment

You can allow users to comment on your website to ensure more interaction with them. The Comment module enables this feature, and the admins receive a notification for all new comments.

Creating Forms and Surveys

Using forms and surveys on the website can also lead to more interaction with the visitors. You can use the Webform module to create forms that collect the required data and forward it to any downstream application.

Using Slideshows on the Website

One of the best ways to ensure an interactive website is to have slideshows. The Views Slideshow module can help to create a slideshow of any user-defined content.

Creating Carousels and Videos

Using videos and carousels on the website can help your showcase your expertise effectively to the visitors. Media and Media Library modules allow web developers to embed these interactive media types on the website easily.

Conclusion

Companies are continuously looking for ways to break the clutter and effectively reach out to their audience. Therefore, they must have an interactive website design that can induce more visitor participation. It will also lead to increased conversions and revenues.

The website must make users confident about your brand, and it requires a well-defined strategy from you. You must utilize historical data and come up with adequate features that can make the website interactive. You can use various Drupal modules for this purpose. Be in touch with our Drupal experts.

Sep 01 2021
Sep 01

More so than ever before, the public sector is relying on websites to handle a depth and breadth of heavy lifting -- serving as a central information hub, providing a venue for taking care of official business, advancing civic pride, alerting citizens to weather and public health emergencies, and a lot more. 

Covid-19 sharpened the focus on the importance of government websites being able to step up and multi-task. That trend is shows no signs of reversing.

Essential objectives for government sites share much in common with private sector sites -- easy navigation, robust search capabilities, and a consistent application of design elements -- but in the current environment, government websites present distinct challenges and opportunities.

Drupal for Government

Leveraging the power of Drupal to design and develop expectation-exceeding websites for public sector clients at every level, we at Promet Source have honed a distinct expertise in the build of government sites that can function on many levels.

The process begins with a true understanding of the evolving role of public sector websites and the value of an open source CMS, followed by a  commitment to diligent discovery and active listening to the needs to stakeholders. 

Here are the top five factors that we’ve identified as the essential differentiators between government and private sector sites.

1. Public sector sites need to serve every demographic group.

While the targeted niche for a private sector site often encompasses a wide spectrum, government sites, have an inherent need to serve everyone. Creating web experiences that appeal to and accommodate the user journeys and needs of every age group, education level, income level, and comfort zone with technology, as well as people with disabilities, requires a significant balancing act. 

An in-depth discovery process is required to set the stage for a successful outcome. Adept information architecture skills also very much come into play in the process of creating a user experience that streamlines navigation and simplifies access to a wide and disparate range of information and resources for the full spectrum of users.

And easy navigation is just the start. Public sector sites also need to be engaging, reassuring, familiar, service oriented, and always aim for a subtle "WOW!-that-was-easy" factor.

Southern District of New York website

Southern District of New York websiteThe Southern District of New York's redesigned site focuses on the needs of a wide range and disparate range of of personas including staff, jurors, attorneys, judges, the local and national media, as well as individuals caught up in the court system.    

 

2. Community building is a core objective.

In many respects, government sites are now serving as a virtual town square --  the place where connections are made, information is exchanged, essential tasks are completed, and messages concerning what sets the community apart and what it stands for are reinforced. 

While private sector sites tend are likely to have one, clearly defined and singularly focused mission, the success of government sites hinges on multiple factors. 
The design of a government website needs to account for the likelihood that it might be visited and viewed simply for purposes of checking in, and that the content and experience on the site will serve as a source of conversation. 

Marin County prevention and outreach websiteFriendly fonts and consistent reinforcement of key messaging drive home the high-stakes, communitywide mission of the Marin County, California Prevention and Outreach site.    

 

3. All constituents view themselves as stakeholders.

Whether searching for information about trash pickup schedules, looking into the city’s permitting process, learning about local government initiatives, paying bills, or a myriad of other tasks, expectations are high among all visitors that the site needs to work for them. The optimal UX on a government website offers immediate access to the most frequently sought topics, with robust search capabilities that easily lead to everything else. 

Beyond information gathering and essential task-related factors, the site needs to reflect the county or municipality its very best light, for both citizens and potential tourists. Just as citizens have high expectations that the grounds and interior of their city hall, county courthouse, or state capital will be well tended and impressive, expectations are high for a modern, easy to navigate, beautifully designed website that reinforces civic pride. 

Martin County Florida websiteCentral to Promet's redesign of the Martin County Florida website is a carousel of images on the home page that features the area's spectacular beauty and attractions for both residents and tourists.                                                                     

4. The need to offload a wide range of administrative tasks is paramount.

If there is one, overarching truth among all government entities in the current climate it's this: budgets are tight and everyone needs to find ways to do more with less. Multi-tasking websites are stepping in to fill that void, and their success in doing so hinges on the degree to which taking care of tasks online proves to be a value-added process and free of frustration.

Martin County Fla homepageKey to the success of the Martin County, Florida website, which was recently migrated to Drupal 9: Prominent access to most the frequently searched tasks within an aesthetically pleasing user experience.

 

5.  The content management system needs to enable easy updates along with a high degree of content editing flexibility. 

For a public sector website to serve as a single source of truth, site managers and content editors need to be able to make updates on the fly. Weather alerts or public health emergencies can emerge with no warning, and for a government site to be counted on as a provider of up-to-the-minute accuracy, site managers and content editors need to be able to easily make updates or add new pages. 

Simple and streamlined content editing capabilities contribute to a consistent and reliable user experience throughout the site and across all desktop and mobile platforms. Another factor fueling the need for simplified and more robust content editing experiences: the opportunity for continuous improvements and citizen-centric enhancements based on community  feedback and ongoing intelligence gathering. 

Check out the possibilities of Provus -- Promet's new drag-and-drop content editing platform.

Marin County covid site  Since the onset of the pandemic, daily alerts and updates have been the essential mission of Marin County, California's Health and Human Services Covid-19 site.  

The best state and local leaders are well aware that every positive web interaction represents an opportunity to serve citizens and fuel vast new possibilities for connection and operational efficiencies. Partnering with the public sector to create next-level web experiences that address the full spectrum of citizen needs and expectations is what we do here at Promet Source.

Interested in what we can do for you? Let’s talk!

Aug 31 2021
Aug 31

https://www.drupal.org/project/security_review

Warning: As of the date of this writing, this module is still in alpha release, but appears to work as needed. Exercise caution and conduct extra testing should you decide to move forward installing this module during it’s alpha release.

Credits & Thanks

Thank you to:

Security Review Module

The Security Review module automatically tests for many security problems in the configuration of your Drupal site.

The Security Review module reviews your basic security settings and tells you if there need to be any changes that will make your website more secure. More often than not, security breaches come from un-updated Core software or basic settings that are exploited and turned into a breach. If you close those holes, hackers often move on to an easier target.

Install and Enable the Security Review Module

  1. Install the Security Review module on your server. (See this section for more instructions on installing modules.)
     
  2. Go to the Extend page: Click Manage > Extend (Coffee: “extend”) or visit https://yourdrupalsite.dev/admin/modules in your browser.

    drupal security review module installation
     

  3. Select the checkbox next to “Security Review” and click the Install button at the bottom of the page.

If necessary, give yourself permissions to use the Security Review module.

  1. Click Manage > People > Permissions (Coffee: “perm”) or visit https://yourDrupalsite.devadmin/people/permissions .

    drupal security review module permissions screen
     

  2. Select the appropriate check-boxes for  
     
    • “Access security review pages”
    • “Run security review checks”
       
  3. Click the Save permissions button at the bottom of the page.

Configure the Security Review module

  1. Go to the Security Review module admin page by clicking Manage > Reports > Security Review (Coffee: “security”) or visit https://yourdrupalsite.dev/admin/config/security-review in your browser.
     
  2. DO NOT CLICK the Run Checklist button. Instead, go to the Settings tab.

    drupal security review module configuration
     </span>

  3. Set any untrusted roles. The default selections are for typical site visitors. Your site may need to add more.
     
  4. Under Advanced, you can skip any tests that aren’t appropriate for your site. If you are unsure, don’t skip any of the tests.
     
  5. Click the Save configuration button at the bottom of the page.

Using the Security Review module

  1. Go to the Security Review module admin page by clicking Manage > Reports > Security Review (Coffee: “security”) or visit https://yourdrupalsite.dev/admin/reports/security-review in your browser.
     
  2. Expand the RUN section.

    expand the run checklist section
     

  3. Click the Run checklist button.
     
  4. The Security Review module will run. It can take several minutes before it will present its results:

    drupal security review module test results
     

  5. As you can see, the Security Review module shows where your site might be vulnerable to attack.

You’ll want to work with your developers to fix the items in red to harden your website against malicious attacks.

Did you like this walkthrough? Please tell your friends about it!

twiter social icon linkedin social icon pinterest social icon

Aug 31 2021
Aug 31

14 minute read Published: 31 Aug, 2021 Author: Matt Parker
Drupal Planet , Migrations

This is the fourth in a series of blog posts on writing migrations for contrib modules:

Stay tuned for more in this series!

Background

While migrating off Drupal 7 Core is very easy, there are still many contrib modules without any migrations. Any sites built using a low-code approach likely use a lot of contrib modules, and are likely blocked from migrating because of contrib. But — as of this writing — Drupal 7 still makes up 60% of all Drupal sites, and time is running out to migrate them!

If we are to make Drupal the go-to technology for site builders, we need to remember that migrating contrib is part of the Site Builder experience too. If we make migrating easy, then fewer site builders will put off the upgrade or abandon Drupal. Plus, contributing to migrations gives us the opportunity to gain recognition in the Drupal community with contribution credits.

Problem / motivation

In my experience as a consultant, clients who are willing to be early adopters of Drupal 7 to 9 migrations tend to want to make a bunch of other changes to their site at the same time… so configuration has often been overlooked in favour of setting new config from scratch on the D9 site. But from an end-user-of-Drupal’s standpoint, when the budget is tight, and/or Drupal 7 already functions the way you want it, it makes more sense to spend your time and money on verifying the site’s content, and updating the website’s theme!

As a Site Builder migrating a site from Drupal 7 to Drupal 9, I want as much of my Drupal 7 configuration to be migrated as possible, so that I can spend my time on the theme and content of the site.

Proposed resolution

Define a migration for simple configuration from Drupal 7 to Drupal 9.

As mentioned briefly in the last post, migrations are defined by YAML files inside a module’s migrations/ directory that look something like…

id: MIGRATION_NAME
label: A Human-Friendly Name
migration tags:
  - Drupal 7
  - A Migration Tag
source:
  plugin: # a @MigrateSource plugin id
  # some config for that @MigrateSource plugin
process:
  # some process config
destination:
  plugin: # a @MigrateDestination plugin id
  # some config for that @MigrateDestination plugin

As you can probably guess, id, label, and migration tags are metadata.

Each migration definition includes a source plugin and its configuration, which states where to find data in the Drupal 7 source database. Each migration also defines a destination plugin and its configuration, which tells Drupal 9 where to store the migrated data. Each migration also contains a number of process instructions, which describe how to build the destination data, usually by taking data out of the source.

Steps to complete

Before we can write a simple config migration, we need to understand how config is stored in both systems; and do a bit of planning.

How Drupal 9 config works

In Drupal 9, the standard way to handle configuration is to store it as configuration entities, using the configuration management API.

Most configuration migrations into D9 use the config destination plugin, which uses the configuration management API to write the data. You configure the config destination plugin by specifying the machine name of the configuration entity that you want to build from the migrated data. If we look at the example migration we wrote tests for in the last blog post (i.e.: migrating config for the Environment Indicator module), you can see in its destination section…

destination:
  plugin: config
  config_name: environment_indicator.settings

… that the migration is going to be building the config object named environment_indicator.settings.

Note that each migration has one destination plugin; and the config destination plugin only lets you specify one config entity. To start a configuration migration, I usually look at the Drupal 9 module’s code for configuration objects. If there is more than one, I start with the one containing general configuration settings.

Once I’ve chosen a destination configuration object to focus on, I look at its definition in the module’s config/schema/MODULE_NAME.schema.yml file and where the config is being used (because the schema file isn’t always kept up-to-date). I start an inventory of the fields in that config object, their data type, and their default values from config/install/*.yml. A spreadsheet is a great tool for this inventory (just be aware that it can be helpful to show the spreadsheet to the community).

How Drupal 7 config works

In Drupal 7, the standard way to handle configuration was to store it in Drupal 7’s variable table in the database; and interact with it using the variable_get(), variable_set() and variable_del() functions.

My next step in writing a configuration migration is to search the D7 module’s code for the string variable_, examine the different variable names, and update my inventory with the D7 variable names and data types (to determine a variable’s data type, you may have to look at how the D7 code uses it). Some modules construct their variable names by concatenating strings and variables, so one string match (for variable_) may correspond with a handful of possible variables. If the way that variable names are constructed is particularly convoluted, it can be helpful to install the module on your D7 site, configure it, and see which variables are added to the variable table in the database.

When writing our migration definition for Drupal 7 variables, we can use the variable source plugin to pull data from the D7 variables table. You configure the variable source plugin by specifying a bunch of variable names to read data from; and optionally, specify which D7 module you’re migrating from (which is useful when you’re migrating config from a bunch of D7 modules into one D9 module).

If we look at the example migration we wrote tests for in the last blog post, you can see in its source section…

source:
  plugin: variable
  variables:
    - environment_indicator_integration
    - environment_indicator_favicon_overlay
  source_module: environment_indicator

… that the migration is going to copy data out of the environment_indicator_integration and environment_indicator_favicon_overlay variables.

Mapping out the migration

At this point, your inventory should contain the names, data-types, and default values for a bunch of D9 config object fields; plus the names and data-types for a bunch of D7 variables.

The next step is to process the inventory: for each D9 config object field, see if you can find a corresponding D7 variable, and mark the relationship in the inventory. It is always worth comparing how a config variable is used in both versions of the module, just in case it is unrelated but happened to be given a similar name. You should expect to find D7 config which does not have corresponding config in D9 and vice-versa. If you see D9 config that is related to the D7 config, but isn’t an exact copy (e.g.: a single value in D7 is the first value in an array in D9), add a note… we’ll talk about this shortly.

When you are done, your inventory might look like this…

D9 field D9 field data type D9 field default value ← How to process ← D7 variable D7 data type Notes toolbar_integration array [] ← (copy) ← environment_indicator_integration array (n/a) favicon boolean FALSE ← (copy) ← environment_indicator_favicon_overlay boolean (n/a)

At this point, you have enough information to start writing the migration test, which we covered in the previous blog post.

Migration process configuration

Now that we know how to migrate the data, we can write the process part of the migration configuration. Each instruction in the process section is a mapping (i.e.: hash, dictionary, object) whose name is the destination field. Inside the mapping is a list of migrate process plugins, to be run in order from first to last. The value after the final process plugin has run gets inserted into the destination field.

To get data from the source, you use the get migrate process plugin, which you configure by specifying which source fields to use…

process:
  toolbar_integration:  # i.e.: the destination field in the 'environment_indicator.settings' config object
    - plugin: get
      source:
        - environment_indicator_integration  # i.e.: the source field
  favicon:
    - plugin: get
      source:
        - environment_indicator_favicon_overlay

… this configuration copies the data in the environment_indicator_favicon_overlay variable from D7, performs no other processing on it (i.e.: because there are no other instructions), and inserts it into the favicon field in the environment_indicator.settings config object.

Since copying data from a source field to a destination field without any processing is so common, there is a short-hand for this particular case. For example,

process:
  favicon:
    - plugin: get
      source:
        - environment_indicator_favicon_overlay

… is equivalent to…

process:
  favicon: environment_indicator_favicon_overlay

After converting the plugin: get lines to the shorthand, your migration config should look identical to the sample one that I gave in the previous blog post. If you replace migration given last time, with the one you just finished building (don’t forget to set the migration id — it must match the filename and be in the $this->executeMigrations(['...']); line in your test). You can verify this is the case by running the test again.

Multiple process plugins

If you do need to modify the D7 data before it gets saved to D9, it is possible to add additional process plugins. For example, the following configuration would get the data stored in the source’s my_d7_label field, URL-encode it, convert that URL-encoded data to a machine name, then store the resulting data to dest_field

process:
  dest_field:
    - plugin: get
      source:
        - my_d7_label
    - plugin: urlencode
    - plugin: machine_name

… put another way, given the data A name in source field my_d7_label, the data written to destination field dest_field would be a_20name (i.e.: A name -> A%20name -> a_20name).

If you are performing other processing steps, Core and many Contrib process plugins will allow you to take a shortcut by replacing the stand-alone get step by specifying a source in the first processing step. For example,

process:
  dest_field:
    - plugin: get
      source:
        - my_d7_label
    - plugin: urlencode
    - plugin: machine_name

… is equivalent to…

process:
  dest_field:
    - plugin: urlencode
      source: my_d7_label
    - plugin: machine_name

… but you may find it easier to keep the stand-alone get step until you’ve completed the whole migration and you are certain that it works.

When you write tests for a migration that involves process steps which modify data, the data you add in your test fixtures will be different from the data you verify at the end of the test — explicitly calling this out in a comment can be helpful to other people reading the test (or yourself 6 months later, when you’ve forgotten why).

Default values

Once a Drupal 7 module has been ported to D9 for the first time, that module’s D7 and D9 codebases diverge. Features added to the D9 version aren’t always backported to the D7 version for various reasons. As a result, when preparing your inventory, it’s not unusual to find that the D9 config object has fields for configuration which doesn’t exist in D7 (note the converse — where D7 variables have no D9 equivalent — is possible too, albeit less common).

When you’re writing a migration for the first time, it’s easy to focus on the config that you can migrate from D7, and ignore the D9 config which has no D7 equivalent. But if you don’t specify a value for those fields, the config destination plugin will set them to NULL when it constructs the config object from the migrated data.

But, many modules assume that those configuration object fields will be set to their default configuration (i.e.: from config/install/*.yml) — not NULL — which can lead to bugs, errors, warnings, and crashes later on.

The solution is to specify default values for that configuration in the process section of the migration definition, using the default_value process plugin.

For example:

process:
  d9_only_feature:
    - plugin: default_value
      default_value: 'some_default_value'

When you specify default values, you should still test them, by verifying them when you verify the migrated data. I tend to separate these into their own section with a comment, so that I don’t get confused about why those verification lines don’t have a corresponding fixture…

// Verify the fixtures data is now present in the destination site.
$this->assertSame(['toolbar' => 'toolbar'], $this->config('environment_indicator.settings')->get('toolbar_integration'));
$this->assertSame(TRUE, $this->config('environment_indicator.settings')->get('favicon'));

// Verify the settings with no source-site equivalent are set to their default values in the destination site.
$this->assertSame('some_default_value', $this->config('environment_indicator.settings')->get('d9_only_feature');

Putting it all together

  1. Make sure your Drupal 9 environment is set up as described in the last blog post:

    1. Clone Drupal core, run composer install, set up the site.
    2. Find a migration issue and module to work on.
    3. Clone the module to modules/, and switch to the branch in the migration issue’s Version field if necessary.
    4. If the migration issue is using an issue fork, then switch to the issue fork using the instructions in the issue.
    5. If the migration issue is using patches, download the patch, apply it to a branch named after the issue ID and comment number the patch was uploaded to (we’ll call this $FIRST_BRANCH below).
    6. If the migration issue is using patches, then create a second branch named after the issue ID and number of comments in the issue plus 1; and apply the patch, but don’t commit it yet.
  2. Create the migration inventory.

  3. Write the migration test.

  4. Write the migration itself, running tests frequently.

  5. Spin up your D7 site, install the D7 version of the module, and run a manual test, as we did in part 1 of this series.

    The automated tests only test for very specific problems on a simulated “clean” environment — which make them great for catching regressions — but not very good for catching problems you weren’t specifically testing for (that is to say, things likely to crop up in the real world).

    Note that Drupal 9 core’s Migrate Drupal UI module has no way of knowing if you’ve written all the migrations that you intended to write for this module. So, the module you’ve written the migration for will still show up in the list of “Modules that will not be upgraded” for now — we’ll fix that in the next blog post. Don’t worry though, your migration will still run.

  6. When you’re satisfied, stage all the changes to the module (i.e.: git add .), and commit your changes. In the commit message, describe what you did. The commit message will be visible to other members of the community.

  7. If the migration issue is using an issue fork, then push your changes to the issue fork, and leave a comment in the issue describing what you did.

  8. If the migration issue is using patches, then:

    1. Generate the patch with git format-patch 8.x-2.x (where 8.x-2.x is the branch specified in the “Version” field of the issue with the patch).

      Generating a patch in this way way adds some metadata which will help avoid merge conflicts in the future.

      The patch will appear in the current directory, and will be named something like 0001-YOUR-COMMIT-MESSAGE.patch.

    2. Rename the patch according to Drupal.org’s conventions for naming patches.

      I like to move the patch somewhere that I can easily find it (e.g.: my Desktop folder) at the same time that I’m renaming it.

    3. Generate an interdiff between your current patch and the previous one with git diff $FIRST_BRANCH > interdiff.txt (where $FIRST_BRANCH is the branch with the previous patch applied and committed).

      I like to move the interdiff somewhere that I can easily find it (e.g.: my Desktop folder).

    4. Start a new comment, upload the patch and interdiff, and describe what you did in the Comment.

      If you set the issue status to “Needs review”, then automated tests will run on your patch — but once they pass, change the issue status back to “Needs work”, because your migration won’t be finished until you’ve verified there’s nothing else to migrate, and indicated that to the Migrate Drupal UI module.

If you’ve been following along with our example to migrate configuration for the Environment Indicator module, please be aware that there’s already a migration to do that in issue #3198995 — so please do not create a new issue, and please do not leave patches in that issue.

Next steps

At this point, you should have all the tools that you need to contribute patches which migrate simple configuration from the Drupal 7 version of a module to the Drupal 9 version of the module, so try it out!

Next, we will talk about how to tell Drupal core’s Migrate Drupal UI module that you’ve written all the migrations that you intended to write, which will move the module from “Modules that will not be upgraded” to “Modules that will be upgraded” in the migration wizard.

We’ll also talk about how to migrate more complex configuration and content in future posts in this series.

The article Easy commit credits with migrations, part 4: Migrating D7 variables first appeared on the Consensus Enterprises blog.

We've disabled blog comments to prevent spam, but if you have questions or comments about this post, get in touch!

Aug 31 2021
Aug 31

[Drupal] What is Symfony in Drupal 8

Symfony in Drupal 8 changes the structure to MVC with the help of Symfony. Symfony is an open source framework. It is created using object oriented concepts. Drupal Technical Drupal 8 Symfony 1

Aug 30 2021
Aug 30

open waters podcast logo

In this episode, we're joined by Damien McKenna to talk about open source security and how that has changed over the years in Drupal core as well as in newer versions of Drupal. Damien directs internal initiatives that strengthen Mediacurrent’s commitment to open-source principles, collaboration, and sharing knowledge to strengthen the Drupal community and is regularly ranked as one of the ten most active contributors on drupal.org.

Episode Transcript

Mark Shropshire: Hi, I'm Mark Shropshire and with me is my cohost Mario Hernandez. We are very excited about this episode of the Open Waters podcast as we welcome Damien McKenna, a prolific Drupal contributor and community leader. We will be talking about open source security, specifically the ins and outs of Drupal security.

Mario Hernandez: Thanks, Shrop. Thank you very much, everyone, for joining us and a special thanks to Damien for joining us today to talk about security and contribution to the Drupal project. So Damien, before we get started into the technical aspects of your role, why don't you tell us a little bit about your role on Mediacurrent and your involvement in open source?

Damien McKenna: Thank you for having me. So I've been involved in Drupal since 2007, but open source as a whole, since around about 2000. I got into it because I had been building my own websites that expanded into building custom content management systems, and I realized I couldn't be the only person who wanted to have a simple CMS to manage their site's content or their clients' content. Discovered hey, there's a whole bunch of people who were uploading complete open source, complete PHP projects, as they were at the time to the net on SourceForge. I can just download it and customize it how I need.

Over the years, I saw a number of patterns emerge with open source communities. A big one was that for any given software project, if it didn't have a security team put together fairly early on, they would need one fairly soon. I saw so many projects that didn't have decent security practices and they eventually ran into a major security problem and had to scramble together the processes to deal with it properly. So I've been very glad that Drupal started their security team fairly early on, and it has been continuing ever since. So at Mediacurrent, I juggle both being a backend developer and project lead along with I lead, cat herd, on some internal initiatives around open source offer and contributing. We try to have a contrib first process so that we are contributing back improvements and things to open source communities and software when it's suitable rather than leading projects to have to maintain more and more custom code and documentation and things.

Mario: I'm gonna go with a follow-up question on that because that's very important what you just said there, Damien, the contribute first. So does that mean when you are tasked with analyzing the project that you about to work on, do you figure out ways in which maybe through this project you can contribute to the Drupal project or the open source in general? Or how does that work?

Damien: Exactly. So there are lots of different situations where it comes up. One example was a few years ago, one of our clients needed to have, requested documentation on how to set up their site to be able to pull in tweets from their Twitter account. And it was just when Twitter had changed the API process. So you used to be able to just pull an RSS feed of the tweets and they changed it to needing to set up a developer account and this custom application in their system.

And it was a bit elaborate and you had to do it from the account that was pulling the tweets because of security best practices. You didn't want to be sharing around these passwords for everybody to log into your Twitter account and accidentally post some screenshot of a picture of a meal out or being with some friends accidentally to a business account. So we put together documentation on how to go through the steps with screenshots and everything, but instead of putting it into a document and sending that to them, we uploaded it to the documentation section for the project that was being used to pull down the tweets so that everybody could then have the same documentation. It was the same amount of work, it was just putting it in one place versus another. So the client appreciated it, they had all of the details they needed, and then everybody else in the world who ran into the same situation then could benefit from the same work.

Shrop: Yeah. That, that's, that's a fantastic example. I mean, I know you have a lot of examples of contrib first, Damien and, personally you're a mentor to me and I appreciate all the guidance you've given me over the years and continue to on how to work in open source overall, but also in the Drupal community. And so I just want to say that I appreciate you and everybody else that does that for the community. It's, it's really great. So I want to jump a little bit into your involvement with the Drupal security team and I think that's an interesting aspect here, since we're talking about open source security today, what's it like being on the Drupal security team and then from a day-to-day standpoint? I know there's lots of things that you have to embargo til advisories come out, but you know what you know, what's it like day day-to-day, what's it look like?

Damien: Sure. So we have different processes that we've, for the most part, documented on drupal.org/security-team. There's lots of details in there, but we have a team of, I forget if it's 20 or 30 so odd people, and one step, I guess, an initial starting point is that we take turns being the initial point of contact. And as it happens, I'm on duty for the next two weeks, so timely. What that means is when somebody opens a security issue for a project, module, theme, or even Drupal core, that we're the first person to respond to that, to review what is submitted, and try and do a little bit of analysis on maybe the person just had one of the settings misconfigured. Maybe they have the PHP module enabled and they're inadvertently letting anybody write PHP code on their website.

Not that that has ever happened, but we do an initial bit of triage on the issues that are opened and then get the maintainers involved, presuming that it requires it, presuming it's a legitimate issue. And then try to guide the conversation between the maintainers and the person who reported the issue and potentially anybody else who's pulled into the conversation. So we might have an issue that is focused on the control module, but it might say affect core or affect somebody in the backdrop community as well, because there's a lot of overlap between the two. Occasionally there might be an identical issue for a similar module, and we try to get conversation focused on moving towards a solid, reliable fix, and then work with the maintainers to prep for release. We also have a mailing list where people can post questions to.

And that is often used as a step towards then having a proper issue in our security issue queue. So then it's, whoever's on duty then is the first person to respond to questions when they come in.

Shrop: How many of those do you think you get in a given week?

Damien: On average, not too many new ones each week. One thing that I found is that sometimes you'll have, especially in the contrib world, somebody will spot...Hey, there's this one situation where this module leaves a security vulnerability open or vector open, and they'll go and check some other modules that have, say, similar functionality or some similar approaches and then they'll, they might discover, say five modules have basically the same bug. But that doesn't happen very often.
Mario: What would you say is the most common security and the Drupal open-source work?

Damien: So the most common one is cross-site scripting, and this is going back to, at least a few years ago, there was an article published on Wiley by Greg Knaddison who wrote the book Cracking Drupal, and he went through and cataloged at all and cross-site scripting was the most common by a good margin where basically the output from a field or some data input was not being properly filtered during display, o that would leave it open for somebody to, say, throw in some JavaScript that would then get executed when the page was viewed. And so that one comes up quite often, and there are some relatively simple means of fixing those bugs. Biggest issue I found is forgetting where in your code something might be filtered already by the time you get it at this one piece.

So sometimes you've got a settings form and it might be available to people who aren't administrators, and you might forget to filter the output because somebody who's an administrator to the site is kind of assumed that they're not going to cause problems for that site. Generally, as a company, employees, don't go bananas and start throwing filing cabinets around. Likewise, they tend not to start throwing in a really bad JavaScript into a site for the purposes of stealing data, et cetera. It's technically possible, I'm sure it has happened, but tends not to happen. So when you're writing code or writing code for a site or for a project, or for a module, you might forget in this one situation, I'm outputting a variable or a configuration object or something and you might forget to filter that one time because when you're testing it, you never try throwing in JavaScript because what silly person would do that? But from the point of view of trying to keep it secure, you need to cover for the situations where somebody might want to do that.

Shrop: If you can execute JavaScript on a site, it's pretty powerful.

Damien: Yes. It's not as bad these days, because Drupal Core and eight and nine don't have the PHP module in core anymore. It was a lot more dangerous when the PHP module was in core because there were so many situations where people inadvertently had that available to all text fields including, say, a comment box for submitting a comment to the webmaster or owners. Yeah.

Shrop: Oh, wow. Yeah, you can think of all kinds of terrible situations that could come with that. Like just reading the settings file in PHP or something. Well switching gears just a bit, because I'm always interested in this and, as you know, in our teams at Mediacurrent, we, we have discussions, we have a security channel in Slack where we discuss when a security advisory comes out, we're always wanting to read it and dissect it as a team and figure out like, all right, what are our next steps for those? Are there mitigations and things like that? I'd love to hear from your standpoint, Damien, in your expertise around this, tell us a bit about those Drupal security advisories and the details they contain. And I mean, just curious about, you know, that coverage for that. I know it's well-documented but there is a lot of information in these advisories, right?

Damien: So there's always a balance between giving enough information and giving too much because you don't want to give people who want to write scripts to attack sites step-by-step instructions on how to do that. You just want to kind of give enough clues that people who are maintaining sites can tell whether or not this is going to affect them right now, and that they need to update right now ahead of anything else they're doing versus, say, it can be just included in the next scheduled deployment.

That could be a week or three from when it comes out. The security advisories will try to give some at least hints on what causes the vulnerability and then, if there are any available, some details on how it can be mitigated. So sometimes it'll be the security problem only happens if you turn off these options or if the person does not have a particular permission. So we'll indicate in the advisory any workarounds that might exist. Oftentimes there won't be obvious workarounds that are feasible, so the only step is to just update the module or theme or whatever it is, or core. We used to do one security advisory per project per week. So per week that there was a security update. So if there were multiple vulnerabilities, they would all be lumped into one security advisory. That policy was changed so that every individual security issue gets its own advisory. And that was to fit with industry standards because Drupal was, I think, just about the only major project still doing it that way.

Shrop: But from my standpoint, it's made it easier for me to comprehend what's going on. I can, you know, read one focus on it. All right. How does that apply mitigations? Are there any, and then you just move on to the next one. And so that's been great from my standpoint.

Mario: Switching gears a little bit here, Damien. So we know that with the release schedule that Drupal has in place, you know, there's a lot of benefits and people have seen things improve, you know, once the new release schedule was implemented. But can you tell us how these release schedule has helped with security, with the Drupal project?
Damien: The schedule has really helped from the point of view of having a plan or a schedule ahead of time that, you know on certain days of the month or certain months of the year, you're going to have security updates available.

Damien: So every Wednesday, starting by the simple thing of all of the security releases are done on Wednesdays. Almost always. There can be some occasional out of schedule updates when there's, say, a third-party library or something that has an update, and we have to scramble to do a core update on a different day, but almost always they're on Wednesdays. And then the core updates are done on one day and contrib updates. So one day a month, there's a window for core to have security updates, and if there isn't one on that day, then there won't be that month. Again, unless there's some or some other issue with a third-party library. And so site maintainers or site owners have a bit of relief knowing that there isn't, almost isn't, going to be a major security release dropping any time of the week, any time of the day, so they can rest easy and just go about their normal business the rest of the week, the rest of the month, and just be able to plan Wednesday afternoon, timezone depending, they will have to do some security updates.

Mario: Good. So what's the story with the Drupal eight reaching end of life? What's, what's going on there?

Damien: Well, it's a standard thing that, or it always has been a standard thing that when a new major release of Drupal core comes out, that the previous release goes into kind of a security updates only mode and then the version before that is marked as end of life so that there won't be any more security updates on that, and pretty much at that point, the community stops maintaining core and contributed modules and themes for that version. In practice, (it) historically meant when triple seven came out, that Drupal five was no longer given security updates and support. When Drupal eight came out, I think it was like eight years after Drupal seven, sorry, after Drupal six had been released, they gave and, if I remember correctly, they gave an extra six months of support just to help bridge the gap of time for sites to upgrade because the development cycle from seven to eight had been so long.

But then, when Drupal nine came out, Drupal seven was still around and still had support. When Drupal 9 came out, the majority of Drupal sites were still on Drupal 7. I forget if it was like two thirds or so of the sites in the world that were on Drupal were still using Drupal seven. So we couldn't just say no Drupal seven is not going to have anymore support, io it was given extra support. Then the plan is that Drupal Ten is going to be released next year, and so there's the knock on effect of you need time to upgrade from core version to core version. And so Drupal eight will be, we'll reach end of life this year. The nice thing is that upgrading from eight to nine is a very, very simple process, especially in comparison to previous sites or previous versions.

We've done some upgrades where a site was fully up to date on contrib modules and was able to be upgraded to from eight to nine with just a few hours of work, and most of that was just poking at Composer to get the right combination of dependencies.

Mario: You're saying that Drupal seven's end of life is actually going to happen after Drupal eight's end of life, yes?

Damien: Yes. So Drupal eight's end of life is tied to the dependencies it has, and its dependencies will run out this year. So I think, it's the big dependency that is causing it is Composer.

Shrop: I think Symphony symphony is part of it, too.

Damien: Composer, symphony. Yes.

Mario: So these end of life decisions are made mainly based on those dependencies, in the case of Drupal seven, it was probably because of the, the adoption that Drupal seven has had gotten, yeah?

Damien: The reason for continuing to support Drupal seven was because of the volume of sites out there that had not upgraded yet and because there wasn't the technical requirement. The dependencies for Drupal seven were still continuing for longer. Drupal seven had fewer third-party dependencies than Drupal eight. So it's easier to say, yes, we're just going to continue it.

Mario: And the future that as the dependencies get shorter and shorter, right, that the actual analyze for future versions may even become shorter than what they are now, perhaps, especially if the upgrade path is such, that is seamless there becomes time where it's just a matter of upgrade and the next installing the next update. And now you're in the next version.

Damien: Yeah. So, keeping a site up to date with the latest version of core, for the major release that you're using, and then keeping all of the contrib module updates, will ultimately mean that it doesn't matter if it's six months or three years between major versions, if it's up to date and you keep it current, it should be a relatively straightforward process. So Drupal eight will hit its end of life this November. Drupal seven has an extra year of support to November '22. So there will be more time for sites to finish upgrading to Drupal nine at that point.

Shrop: I'm glad you mentioned that. They'll just, that'll be the recommended path, just to go straight to nine. You, you won't even have to go through eight at that point, or actually even today, you'd want to go, I think (Drupal) ten is in June, June next year. Yeah. So, so it's moving fast, but it, and I'm glad you mentioned that, Damien, that the upgrade paths are smoother, and that doesn't mean a complex site could have some complications and if you haven't kept things up to date, but from any of us who've been in the community a long time, it, you really don't have to approach it like we're going to build a new site and then migrate all the content. Now it's like actually true upgrades and there's migration paths and it's really great.

Damien: Yeah. So it's more of a traditional once you get onto Drupal eight, plus it's more of an upgrade rather than a rebuild. That's the last major upgrade. Yeah.

Shrop: So get up, get on the new Drupal train then, and I think train is a good visual representation that the community's used to illustrate the end of life for some of these, the train tracks end at a certain point, you want to be on the train track that keeps moving forward. Damien, what kinds of Drupal security resources do you think folks listening should know about?

Damien: So the most important one, I would say, is the security advisory newsletter that everybody can subscribe to off of their profile on Drupal.org. There's just a nice, if I remember correctly, a nice checkbox for that. The security advisories are also available through an RSS feed, and they're also published on Twitter through the website. There are separate feeds for core, contrib, and public service announcements.

So depending on how you like to get your security updates, do all three. Then there's also, as mentioned before, documentation on the security team's processes, and under the Drupal eight documentation, there are pages that describe best practices for writing secure code. So you can avoid security problems while you're building the site rather than dealing with them later. There are a number of books out there, most notably the Cracking Drupal book by Greg Knaddison mentioned earlier. It was written before Drupal eight came out, so it's a bit out of date, but the general practices are still reasonable. And for every function it mentions, you can find the equivalent Drupal eight or nine replacement through documentation online.

Shrop: Well, Damien, we really appreciate your your time on the podcast today and for coming on and talking about, you know, specifically Drupal security, but also, you know, a lot of these concepts, like you were mentioning about Greg's Cracking Drupal book, you know, security is evergreen, it does change over time, there's maybe new things, of course, we learn about securing our systems, but some of those old things are still out there like cross-site scripting. They just are probably going to be for a long time.

Mario: They don't go away.

Shrop: Yeah, exactly.

Mario: Well, Damien, thanks again for joining us today and sharing with us your expertise when it comes to security and the Drupal project. I also personally want to thank you for always being available and helping us with any security or contrib questions that we have. You recently helped me contribute to a project, and that was pretty rewarding to be able to do that.

Damien: You're very welcome.

Shrop: Thanks for listening. You can find us at mediacurrent.com/podcast and subscribe with your favorite podcast app. If you enjoyed this episode, share it with your friends and tag @Mediacurrent on Twitter. For more resources on open source technology, web design, and web strategy. Visit us at mediacurrent.com.

Resources

 

Aug 30 2021
Aug 30

As customer experience and expectations evolve alongside the growing digitalization, digital personalization has transformed from a nice-to-have feature into an essential element of positive digital experiences.

From targeted ads to strategies like account-based marketing, personalization pervades every step of our digital journeys. However, as demand for personalized experiences grows, so does users’ awareness of how their privacy is treated online, which is being accompanied by a surge in important updates to privacy regulations worldwide.

In this peculiar landscape, it thus becomes essential to provide heartfelt personalized experiences, while at the same time taking care to respect your customers’ privacy and avoid strategies that come off as creepy. This article will take a look at how to achieve this balance by going through some essential dos and don'ts of personalization.  

Doing it right

First we’ll look at some tips and examples of personalization done right. Remember that, since personalization is all about maintaining balance, some of these approaches can actually have detrimental effects if you overdo them.

Use first names and personal pronouns

This is the number one rule of personalization which predates data-driven and/or highly automated digital approaches. Using your customer’s first name is the quickest way to establish a personal connection. 

Where it makes sense, you should also opt for the use of personal pronouns over words like “customers” (e.g. instead of “all our customers get free delivery” say “you’ll get free delivery”).

Depending on your business/industry, you may want to be more formal and use the person’s last name together with a title such as Mr/Ms/Mrs. However, this can pose challenges when you’re not aware of their status or preferred gender, or an appropriate title doesn’t exist for the gender that they identify with.

One thing to note is that, with the rise of highly personalized experiences, this has now become an essential part of personalization that all customers expect. You’ll need to do some extra work to differentiate your brand from all the others and truly resonate with the customer.

Another important thing to keep in mind: don’t use a customer’s / prospect’s name if it’s not clear or logical how you know it. On a similar note, don’t overuse their name, as this may come off as very disingenuous, especially when combined with some other “creepier” personalization tactics which we’ll discuss in the other part of this article.

Provide personalized content based on user preferences

These types of digital experiences are extremely popular and are a great example of the value of personalization. This is any type of platform that offers content recommendations based on previously accessed content and/or preferences set on first interaction. 

The best known examples are streaming services, such as YouTube, Netflix and Spotify, and e-commerce websites such as Amazon. Platforms such as Netflix and music streaming services go even further, by allowing users to create their own playlists rather than just rely on recommendations made by algorithms which are purely data-based.

Social media platforms also offer a lot of personalization (i.e. personalized feeds), but in the past years, digital users have become more aware of how these platforms (mis)treat their data and are increasingly seen as creepy. We provide more detailed insights on these topics in our podcast episode with Josh Forte of Comporium.

One of the best things about this type of personalization is that it’s almost entirely based on first-party data, and data which is most often willingly shared by the user since it is completely transparent how it will be used and how they’ll benefit from it.

Offer self-personalization features/promotions

A neat feature of user-centered design is the rise of services that allow users/customers to personalize their own experiences how they see fit. This can include customizing accessibility features of a website via the Civic accessibility toolbar, which can be especially useful in case of temporary disabilities where you might want to adjust your settings.

On the other, far end of the spectrum, we’re seeing the ability to personalize the actual product you buy, through a kind of combination of physical and digital personalization. 

Great examples of this are personalized children’s books designed by the parents themselves via a website, similarly designed gifts, e.g. for staff or business partners, or even custom-built products such as a computer or a musical instrument with custom features or components which the customer can select and combine by choice.

Be mindful of the customer’s context

Perhaps the most important piece of advice when it comes to personalization is to always be mindful of the context. With such an abundance of data collected on each individual, you can’t make the excuse of not knowing basic information about them, especially if it’s obvious that you have really specific data about them.

Use the data you obtain on your customers for good. For example, if you know that a customer has recently lost a parent, don’t advertise Mother’s/Father’s Day related products to them, or Valentine’s Day products to a customer who has just gone through a breakup.

Oh, and, don’t show them location-based offers and promotions for locations that they aren’t in or close to. Especially during a lockdown!

… without being creepy or annoying

In this section we’ll focus on what to avoid when personalizing digital experiences and round everything off with an excellent example which really underlines how things are never black and white in this field, and how valuable personalization can be when it’s properly balanced.

Be tactful with targeting

Targeting users with ads based on products they’ve purchased is all well and good, but tread lightly and remember to maintain balance. The customer likely doesn’t want to see an ad for the exact same product that they’ve just purchased; try targeting them with related or complementary products instead.

This similarly holds true for products that are once-in-a-lifetime or -decade purchases - why would you be inclined to buy a boat after you’ve just bought a boat? (well, ok, maybe if you run a FTSE 100 company, but in that case, chances are you’re not often casually browsing the web to pass the time)

Family Guy mystery box joke

Avoid spamming

Spamming customers with ads and promotions can have the adverse effect of turning them away rather than incentivizing a purchase. This includes taking advantage of the customer’s good favor with something like excessive notification prompts - if they’re already viewing your site and checking out your offering, why risk turning them off by overdoing it?

Avoid dark patterns

Granted, this falls more into general design tips, but it’s still relevant to personalization as these types of UX design patterns frequently make use of common user data such as first name and location. 

Dark patterns break the illusion of data usage being customer-centric and make obvious the fact that its use is tailored to the best interests of the brand, which may make customers reluctant to purchase from or even ​​altogether interact with that brand.

Don’t over collect data

Of course it’s great to have as much data as possible, but you shouldn’t collect data you won’t ever need. In the past few years, consumers have become more aware of how their data is obtained and handled, and realizing that you over collect data may lead them to mistrust your brand, similar to the effect of dark patterns. 

This includes making it too obvious that what you’re doing is disingenuous (much like overusing first names), which results in very blatant and often exaggerated personalization - a common example would be messaging and targeting someone for years after they briefly interacted with your brand once.

Don’t intrude

If your prospect doesn’t reply, don’t take that as incentive to flood them with even more messages, especially if they’re of the intrusive type, e.g. “you haven’t replied in X” or “you better hurry, this super cool offer expires in Y”.

That said, there have been cases where a brand’s customer-centricity combined with persistence actually saved lives. For example, Domino’s has recently gained the reputation of not complying with accessibility standards, but that makes us forget about more positive stories related to the brand, such as the time when their staff saved a regular customer’s life when they were concerned after he hadn’t ordered from them in a while.

This is a perfect example of the importance of getting the balance right with personalization. If they had decided to mind their own business in the fear of not coming off as creepy, their customer wouldn’t have made it. 

Conclusion

Ant balancing on a bough

As we’ve just demonstrated, personalization is an extremely nuanced endeavor and there’s often a thin line between user-friendliness and creepiness. Whether you’re tackling personalization in a B2C or a B2B context, you’ll need to make sure you maintain that balance. 

Hopefully, this article has given you a better understanding of the best practices and customer preferences when it comes to personalization in an always-on but privacy-first digital environment. 

Personalization has become such a key element of digital strategy that you need to make sure you’re doing it right. But, at the end of the day, we’re all digital users ourselves , so if you ever get stuck, just ask yourself what kind of personalized experiences you enjoy the most, and let that serve as your guide.

Aug 27 2021
Aug 27

Whether you’re launching a completely new Drupal website or it’s time to consider redesigning an outdated website, the prospect of finding the right web design agency can feel like a daunting process. However, to meet your business goals and users’ needs, choosing the right firm is an important step.

Drupal excels at providing an easy content authoring experience for complex websites. You’ll want to make the most of its scalability and flexibility by working with web designers and developers that understand Drupal design. Here are some key aspects to keep in mind when thinking about your Drupal design process, looking for a Drupal web design agency, and making sure you can recognize red flags.

What to know about Drupal design

It's not (quite) a blank slate for designers

It’s true that Drupal is highly flexible. You can customize almost everything on your Drupal website, from layouts and colors to content organization and integrations. However, it’s important to keep in mind that as a content management system (CMS), Drupal relies on some standard “building blocks” to allow for quick and consistent content authoring. Every Drupal website has a Theme, or a collection of files that define the presentation of your website. In addition to standard assets like CSS and Javascript files, some of these are Drupal-specific files. For instance, Drupal regions must be added to a theme to control where the content is displayed and how the page is marked up in HTML. It’s necessary for Drupal web designers to understand the basic mechanics of a Drupal website and understand how design concepts will translate into Drupal development.

Design is component based

If you’re following recognized best practices for scalable web design and development, you’ll want to think about your Drupal design in terms of components rather than just pages. In practice, component-based design (also called Atomic Design) means that designs are broken down into smaller component parts that can be combined and rearranged in a number of ways to create different page templates. For example, your smallest components may include buttons, labels, and input boxes. These components always look the same, but they can be re-used and rearranged to create search bars, sign-up forms, or calls to action. These elements can then be combined with others to create larger elements such as headers or modals. 

While component-based design is popular across the web, it’s especially important for Drupal websites in order to take advantage of the flexibility and scalability Drupal offers while maintaining consistency and easy content authoring across a complex website. Drupal 8 has modules such as Layout Builder (included with the Drupal Core distribution) and Paragraphs that make implementing component-based design much easier than it’s been before.

A button component placed in an example designA button component placed in an example designIn component-based design, smaller component parts are combined and rearranged to create larger elements and templates that can be reused in a number of ways across a website.

Your information architecture matters

When you think of a website design, visual elements like colors, images, and typography probably come to mind. These visual components are undoubtedly important, but it’s likely that the information architecture underlying the visual design is just as important—if not more important—to helping users find content and maintaining an attractive, consistent, and user-friendly website. Some ways that information architecture is manifested include site maps, hierarchies and categorizations (i.e. taxonomies), navigation, and metadata.

Choosing the right Drupal web design agency

Now that you know the basics of what designing a Drupal website entails, how do you find the right agency for the job?

Look for Drupal design examples

Often, the most sure-fire way to see whether an agency has the Drupal design experience you’re looking for is to check out the other work they’ve done. Think about the different features of your web design project that are the highest priority or may be unique to your website and make sure the agency you hire has a track record of success on similar projects. For instance, if you’re redesigning a website for a university office, you may look for companies that have previously designed higher education websites. Or if your website needs a reservation system, check if the agency you choose has experience integrating websites with reservation software and constituent relationship manager (CRM)s. Of course, you’ll want to ensure the examples you see are from Drupal websites!

Blue design elements used throughout the University of New England's websiteBlue design elements used throughout the University of New England's websiteDrupal is a common platform for university websites. Redfin has designed and maintained a number of higher education sites, including the University of New England.

Ask about the design process

If you’re unsure about an agency’s design process or it’s not clear in their proposal, it’s more than okay to ask! The agency you choose should have an established “Discovery” phase devoted to understanding your business goals and your users. This might involve creating user personas or defining the key tasks you expect users to be able to accomplish on your website. You may also want to gain clarity about what design deliverables they’ll provide. Depending on the size and scope of your project, this might involve sitemaps, user journeys, wireframes, or design mocks, for instance. Most importantly, ensure that the design process is user-centered.
These days, it’s a good sign if an agency follows an agile approach to design—meaning work is conducted iteratively in two week increments called sprints. The Agile methodology allows stakeholders to provide more feedback and re-examine goals as the project moves along. You can also ask about how designers and developers at the agency work together. A good rapport and established workflow between designers and developers goes a long way toward ensuring your final product looks like the mocks a designer shows you.

Check out their involvement in the Drupal community

The best way to tell whether an agency has real Drupal credentials is to take a look at their involvement in the Drupal community. If they’ve contributed code to Drupal modules or have played a part in organizing Drupal events, it’s likely they’ve committed to keeping up with best practices for designing Drupal websites. At Redfin Solutions, for instance, we regularly sponsor Design 4 Drupal, Boston, an annual conference devoted to design, UX, and front-end development for Drupal websites.

Design 4 Drupal, Boston 2019 attendees in a lecture hallDesign 4 Drupal, Boston 2019 attendees in a lecture hallThe Redfin team (bottom right) at the Design 4 Drupal conference in 2019. Redfin sponsors the conference annually.

Assess their communication style

Remember, you’re going to be working closely with the web design agency you choose. Beyond technical skills, it’s important that a web design agency prioritizes communication skills and customer service. Even the most genius tech wizards are only as good as their ability to communicate with you and listen. After all, it is your website.

Red flags: what to look out for

Don’t get caught off guard when it’s time to launch your website. Keep these red flags in mind when you’re choosing an agency to ensure a successful project.

Avoid designers who don't know Drupal

There are many great web designers out there that aren’t familiar with Drupal. You should avoid them if you’re building a Drupal website. This isn’t because their designs won’t look great on Drupal—it’s because there’s a good chance they won’t know how to implement them in a Drupal environment. This applies to any software or content management system. Choosing a web design agency that specializes in the platforms that your website uses will ensure you get the most out of the technology you’ve got.

Beware an inadequate discovery phase

In an attempt to provide you with the lowest quote possible, a design agency might nix or skimp on the discovery phase. But without this essential first step in the process, an agency can’t possibly build a user experience that delights your users and helps you achieve your business’s specific goals. When it comes to Drupal design, context is everything. Make sure the agency you choose for your project takes the time to understand the environment in which you operate rather than just churning out websites factory style.

Steer clear of agencies that don't mention accessibility

If a proposal from a web design agency doesn’t mention how they’re addressing web accessibility or usability, you should consider this a red flag. Following accessibility standards in design and development allows users with disabilities, such as visual impairment or limited mobility, to access your content—and helps everyone find the information they’re looking for. Depending on your website’s domain, it may even be legally required that your website meet WCAG criteria. When it comes to accessibility, there are no shortcuts.

Conclusion

Keep these tips in mind when you’re ready to find the right Drupal agency for you and your website. To learn more about user-centered web design for Drupal websites, visit our blog or contact us to see how Redfin can help!

Aug 26 2021
Aug 26

To date, speed has taken a backseat when it comes to websites. But today, there’s no denying it– fast websites are effective websites. When a website provides users with underwhelming performance, everything from SEO rankings to conversion rates, ecommerce sales, and general user experience takes a hit. So — how do you get the faster site you need?

You optimize your site for speed and performance.

That’s a very simple answer to a pretty complicated question, of course. Getting your website to a high-performance tier and keeping it there requires a lot of work. Specifically, it requires monitoring that site on an ongoing basis — and that the data collected is gathered under consistent testing conditions.

This work is inarguably worth doing, but starting the work may seem daunting. Use this guide as a launching point, and begin collecting and monitoring the data necessary to achieve exceptional website performance.

Successful Website Performance Monitoring Requires the Right Tool and the Right Method

When you start digging through website analytics and aren’t happy with what you see, you’ll be anxious to make some changes. It’s important not to rush into website speed optimization without the right tool in hand, though.

There are a few different methods of testing website performance. One is to take a snapshot of how a site performs at any given moment. A tool like Google’s PageSpeed Insights (PSI) is fine for that. However, certain inconsistencies in the tool’s functionality, such as actual server location, mean that it’s not very useful for long-term monitoring. Too many variables exist for meaningful data comparison over time.

Other tools, such as Calibre or SpeedCurve, are much more useful for continuous website performance monitoring. They eliminate inconsistencies with server location and certain network conditions. They also work best for those companies fully committed both to ongoing website performance monitoring and site speed optimization efforts. Not everyone is ready to make that commitment — paying for a service, dedicating time and resources to gathering and reviewing data, and then actually optimizing for speed.

A DIY Approach for Starting Out with Ongoing Performance Monitoring

If you’re ready to start continuously monitoring website performance — and you want more than one-off test results without committing to a more advanced service — consider our recommended DIY approach. Note– this method requires a good practical knowledge of spreadsheets.

Choosing the Right Tool for Getting Started with Website Performance Monitoring

One benefit of using PageSpeed Insights and getting that one-off performance evaluation report is the fact that it’s free to use. It’s not the only free tool out there, though. To get up and running with website performance monitoring and speed optimization, we recommend using webpagetest.org (WPT). WPT is also a free tool, but offers the type of control you simply don’t get with a one-off solution like PSI (which, to be clear, does have its uses — just not for ongoing performance monitoring and testing).

Test Your Site While Maintaining Control

Control in this context means eliminating the types of variables that certain tools introduce during testing — and which can mislead you when comparing data from different tests. To present meaningful data for evaluating ongoing website optimization efforts, a good DIY tool must allow you to:

  1. Decide where requests originate from.
  2. Choose the network conditions under which your request is handled.
  3. Select which browsers you want to test for.

Without this type of control ruling out the unpredictable conditions of one-off testing tools, it’s not possible to make meaningful comparisons of data over time. Additionally, you should absolutely look for a tool that produces a Lighthouse report. In fact, if webpagetest.org did not provide a Lighthouse report in its testing, we’d look for an alternative to recommend. These metrics are that important.

Running Your Own Tests

To keep things simple for the purposes of this article, let’s see what it looks like to run the simplest test for our ChromaticHQ.com homepage. We’ll select the Simple Testing tab (direct link to Simple Testing), enter our URL, and enable Run Lighthouse Audit. Notice that Test Configuration is left as the default (Mobile - Fast 3G); more on this later. This configuration will run three performance test runs against the URL that you’ve provided. The data for all three tests will be available once the test is completed, but by default, it will show you the data for the median run (that is, not the best nor the worst of the three, but the one in the middle; that’s the one we want).

Here’s what our configuration looks like on WPT:

Screen capture of the main WebPageTest interface, depicting a primary textfield to enter a testing URL

Once we’ve filled out this simple form, we can click the Start Test button on the right, which will submit our test request and bring us to this page:

A screen capture of the WebPageTest

Keep that page open for a bit and you will eventually see that your tests are running:

A screen capture of the WebPageTest interface, showing the interstitial

And, after a few minutes, your tests will be ready:

A screen capture showing a WebPageTest result, with scores across multiple metrics.

Congratulations! You’ve taken the first step in your performance monitoring journey.

Before we move on to the next step, you should do the following:

  1. Make note of the First Byte metric. The table under the Performance Results (Median Run - SpeedIndex) heading has a First Byte column. Write down the value recorded under that column (0.837s in the above screenshot).
  2. Open your Lighthouse Performance report. You can do this by clicking on the first box near the top right that has the label Lighthouse Perf below it. That link points to the Lighthouse Performance report for the median run by default.

Capturing Results and Visualize Progress with a Performance Tracking Spreadsheet

Once you have opened your Lighthouse Performance report, you’ll be ready to move on to the next step: adding them to a spreadsheet to compare test results over time. Anyone can do this, but it does take a bit of time and effort to set up. Luckily, we’ve created a boilerplate spreadsheet to get you started.

We based this spreadsheet on the tools we at Chromatic have used internally to help inform our performance efforts for our own clients and agency partners. Using this tool, you’ll be able to easily enter your test result data, visualize your progress, and focus on the metrics that will help your team succeed.

The tool is complete with sample anonymized data, production and staging comparisons (should you want to test both), multiple pages, and configurable goals. It’s packed with enough features to kickstart your long-term performance monitoring strategy.

Aug 26 2021
Aug 26

On our theme BizReview and Listiry, now available in Drupal 9, we have to solve the common problem with displaying nodes on maps.

Here are what we have used in our themes and have verified it is working. Please see the result as below:

Demo of maps on Drupal

Now please follow our tutorial on how to display maps on Drupal with Geofield, Address and Geocoder modules:

1. Install Drupal and Geofield

Install Drupal core:

composer create-project drupal/recommended-project my_site_name_dir

cd my_site_name_dir

Install geofield and geofield_map

composer require drupal/geofield drupal/geofield_map

Enable them all.

2. Create content types and fields

Now please create a new content type, "Listing" for example, and add a new field of type Geofield.

Go to Manage form display, and set the geofield's widget to Geofield Map

Set Geofield's manage form display to Geofield Map

Go to Manage display, and set the geofield's display to Geofield Google Map

Now you can create a testing node, enter the latitude and longitude as below:

Lat: 40.703081
Long: -73.935658

Save it and you can view the newly created node like this.

Demo of maps on a Drupal node

3. Autocomplete address:

As you can see, we can't just enter coordinates data (latitudes and longitudes) everytime we create nodes. How can we know the coordinates of an address?

The user friendly solution is when we type an address, it will automatically translate it to coordinates.

And that's when we need to use Google Place APIs in order to achieve that.

You need to register a free Google APIs key, please follow the guide here: https://developers.google.com/maps/gmp-get-started#enable-api-sdk

Enable Place APIs on Google Maps APIs

Note: you need to enable Geocoding, Maps and Place APIs on your Google Cloud Console.

When you enter a valid key at /admin/config/system/geofield_map_settings, please go to Manage form display and enable Address Geocoding of geofield.

enable Address Geocoding of geofield

Then you can start to enter addresses and they will be converted to coordinates automatically.

Address autocomplete on Drupal

The address info you type in, is only shown on the node edit form. So if you want to store it to display on the node page, please do the following:

Create a new field of type plain text, field_geoaddress for example.

On Manage form display, edit the setting of geofield, and set Geoaddress Field to field_geoaddress, select the option to hide it from the node form.

Set geoaddress for Geofield

The new field_geoaddress will keep the address you type in, so you can display it as you wish.

4. A complete Address field

If you want a complete address field with Street, Neigbour, City, State, Country fields ... you will need the Address module.

Install and enable Address module:

composer require drupal/address

Now create a new field of type Address on your content type. Then you can add complete address info on your nodes.

Address module on Drupal

5. Address to Geofield:

How can we automatically convert the address field to coordinates on Geofield? We need Geocoder:

Install the module:

composer require drupal/geocoder

Install Google Maps and Arcgis PHP package:

composer require geocoder-php/google-maps-provider geocoder-php/arcgis-online-provider

Tip: the "geocoder-php/arcgis-online-provider" is free (no API Key required), it is a good testing provider.
"geocoder-php/google-maps-provider" is good if you have an API key.

Enable all modules and submodules.

Config provider: /admin/config/system/geocoder/geocoder-provider, please add Google Maps and Arcgis Online Provider as the providers.

Config Geocoder providers

After that, please go to Manage fields, edit the geofield node and set it to geocode from the existing address field.

Config Geocoder for Geofield

When you are done with it, everytime you create a node with address info, Geocoder will automatically convert it to coordinates so it can be displayed on maps.

Have fun!

Aug 26 2021
Aug 26

Ok, sounds weird, but it’s true.

Imagine for a moment using Next.js as the decoupled front-end of your Drupal site. Imagine it worked well and was transparent to your content editors. Use the power of Drupal, with built-in JSON API’s to feed all the content you can think of to the front-end. Use Next.js to build out hyper-performing front-end experiences. This approach opens up new possibilities for your developers and your website to deliver content quickly, securely, and across multiple platforms.

Chapter Three is excited to introduce our open-source integration of Next.js and Drupal: https://next-drupal.org

Peanut Butter and Jelly Sandwich Photo credit: Max Pixel

Next.js for Drupal, or Next-Drupal provides a path to replace your Drupal front-end with Next.js while retaining key Drupal editing features: the best of both worlds.

  • Instant preview within Drupal. Content editors want to see the work they do when they publish it, not five or ten minutes later. We provide an instant preview of your Next.js site within the editing workflow. Your editors will love this! 

  • Keep your favorite Drupal editing features. Menu items, views, search, translations, revision previews, draft content, and content moderation are all supported! You do not have to give up your editing experience when you use Next-Drupal.

  • Familiar content architecture. Create custom content architecture schemas using Drupal fields, but leave the myriad of modules and clunky twig template engines behind.  Your developers will LOVE this!

  • Gated content. Our solution is fully integrated with Roles, Permissions, and the user login system. You can use the Drupal login system to provide gated content on your Next.js front-end.

  • Multisite and Multiple Views. Hosting many sites within one Drupal installation has been upgraded. Using our solution, you can host as many sites as you want. You can push to multiple Next.js front-ends, including digital displays beyond the traditional browser. Do you have a pile of Drupal 7 areas that need a modern solution? You have found it. Build your content platform now.

The age of monolithic software that does everything is getting old. PHP and Mysql are not the sexy new technologies they once were. Bottom line:

  • Drupal is an amazing content management platform
  • Next.js is an amazing front-end
  • We combined them.

The result is the best Peanut Butter and Jelly Sandwich a technology could possibly deliver! Let’s build your project using Drupal and Next.js!

Aug 25 2021
Aug 25

Lynette has been part of the Drupal community since Drupalcon Brussels in 2006. She comes from a technical support background, from front-line to developer liaison, giving her a strong understanding of the user experience. She took the next step by writing the majority of Drupal's Building Blocks, focused on some of the most popular Drupal modules at the time. From there, she moved on to working as a professional technical writer, spending seven years at Acquia, working with nearly every product offering. As a writer, her mantra is "Make your documentation so good your users never need to call you."

Lynette lives in San Jose, California where she is a knitter, occasionally a brewer, a newly-minted 3D printing enthusiast, and has too many other hobbies. She also homeschools her two children, and has three house cats, two porch cats, and two rabbits.

Aug 25 2021
Aug 25

With the Drupal 8 end of life in a little over two months and Drupal 10's release next year, this is the time of transitions again at Drupal. However, while Drupal 7 to 8 (or 9) was a big move, the transitions from 8 to 9 and 9 to 10 are much smaller and mostly automated.

Drupal 10 is planned to be released in June, August or December 2022 and the tools are getting ready to support that. The two key tools will be the same as the previous upgrade: Upgrade Status and Drupal Rector.

Matt Glaman has been doing amazing work recently in the underlying components of both tools. Thanks to his work on updating phpstan-drupal for Drupal 10 support, Upgrade Status checks deprecated API uses on Drupal 9 too. Since my last update on that, I added reporting of deprecated modules and new system requirements as well.

Ryan Aslett at the Drupal Association built the project analysis job on top of Upgrade Status and that is run on Drupal 9 projects now as well. So we have an idea of the extent of work that will need to be done for Drupal 10 compatibility. I've updated the dev.acquia.com deprecation dashboard to show Drupal 10 results. While projects should not be expected to be Drupal 10 ready at this time, the dashboard helps us prioritise work on certain parts of the tooling to help the ecosystem upgrade.

To support that, Palantir.net has been sponsoring Matt Glaman to also bring Drupal Rector up to date for Drupal 10 readiness. The results are already outstanding! Today, of the 22204 Drupal deprecated API uses identified in Drupal 9 compatible projects. These are green and purple on the chart below. Drupal Rector has automations to fix 95% of them (green). There are a further 5391 non-Drupal deprecated API uses (yellow) including Symfony and PHPUnit deprecated APIs. Those themselves have third party rectors, so the coverage will further improve by including those. That is in the works.

Image showing the current state of Drupal 10 readiness of Drupal 9 compatible contributed projects

The drupal.org Project Update Bot resolves rectorable deprecated API uses (green) and info/composer issues (blue) when posting patches, so this means that it will be able to resolve most deprecated APIs in its suggested fixes already and we expect it will improve more with third party rectors added.

Drupal 10 itself is a moving target, the branch will be open around October/November so the above does not mean that the tools are complete, but we are significantly further ahead this time compared to the Drupal 8 to 9 transition, making the upgrade to Drupal 10 smoother for everyone.

With the Drupal 8 release, we decided upgrades must be easier going forward and thanks to the fantastic work of contributors and sponsors, we are doing it again.

Aug 25 2021
Aug 25

A few core modules are being deprecated in Drupal 9 for removal in Drupal 10. There are a variety of reasons for their removal, but in each case we think moving to a contributed project would serve users better.

To support the continuous upgrade path and provide stability for Drupal 9 users moving to Drupal 10, we are looking for potential maintainers and co-maintainers to keep security support and ensure stability of the codebases moving out from core. The initial scope of maintaining these projects is to keep the Drupal 9 core-compatible branches intact and provide security support. It would be nice if the new maintainers also improve the projects further but that is not part of the initial scope.

QuickEdit module is being moved to a contributed project and is seeking maintainers.

Lee Rowlands stepped up to maintain Forum and HAL modules moving to contributed projects, but co-maintainers would be welcome. Lee Rowlands and Andrey Postnikov plan to maintain Aggregator as a contributed project.

Additionally there is discussion about removing the RDF module too, feedback welcome. This is not yet at a stage where we need maintainers, although it may be there in the future.

Aug 25 2021
Aug 25

With the rise in technology usage, companies are in a never-ending battle to make their website stand out online. Creating and/or updating a company website may not be the easiest task to accomplish, but it’s necessary in order to scale your business. Let’s take a peek at the top 5 ways to make your website get more traffic and conversions.

5 Ways to Make a Head-Turning Website 

Did you know that over 50% of customers expect any brand or business to have an online presence where they can access their services? This is why producing engaging digital marketing collateral and creating an unmatched brand experience is not only expected but necessary to thrive online. The best way to do this is by creating a website that your customers are excited to check out. Where should you start? Here’s how you can build a head-turning website in 2021. 

1. Tell a Story

Although product/service specifications are nice to incorporate on your site, your features shouldn’t be your only focus to draw new customers in. You should also consider telling a compelling story at the right time.  

Customers love a great story. Why? It makes them feel connected to your business, and creating a connection with your customers leads to more sales for your business in the long run. 

Have writer’s block? Here are some things to ask yourself in order to help you in the story creation process: 

  • Who are we?
  • How did we get our start? 
  • Who do we help? 
  • Why us? 
  • What pain points do our customers generally have before choosing to do business with us? 

After you ask yourself these things, you can begin writing your first draft of your company story. The more eyes you can have on this draft the better. Your story will be one of the key drivers that brings your business more leads and draw in a community of customers who are thrilled to do business with you over and over again. 

2. Give Social Proof

What are the odds that you would buy from a business you had never heard of before? To top it off, they also don’t have any reviews. Chances are you wouldn’t.

Social proof, in essence, is a customer testimonial that you display on your website out of the intention of helping your website users trust you more  — even if they haven’t ever heard of you before! Social proof is proof that you  are who you say you are and that you have satisfied customers who are willing to back that statement up. 

You can create social proof on your website in the form of a customer quote or customer testimonial video to get your audience to want to do business with you. Some of the most popular places to add social proof on your site include the home page or on a landing page because those are the places where customers are more likely to convert on your site. 

3. Use High-Quality Imagery

One of the most popular ways to get your business to stand out digitally is by incorporating high-quality imagery throughout your site. You can use imagery to convey information in a way that words can't, and it's a proven method for getting visitors to click through to your site. Some places where your website could use images include:

  • Your Website Header
  • Blog Posts
  • Product/Service Pages
  • Your Different Home Page Sections
  • The About Us Page

Not sure where you can get copyright-free images to use on your site? Some of our favorite places to get free stock imagery include Unsplash, Pexels, and Pixabay. (You can thank us later.)

4. Write Website Copy with SEO in Mind

You won’t stand out online if you don’t follow Search Engine Optimization (SEO) best practices. There are no ifs, ands, and buts about it. 

What is SEO? SEO is a marketing tactic used by businesses to boost their website visibility in search engines like Google. They do this by creating website copy and blog posts with user search intent in mind.

Woah. Woah. Woah! What does that even mean? Let’s look at an example. 
    
If you have an ice cream shop in the city of Charlotte, you may want to use keywords like “ice cream shop Charlotte” or “the best ice cream shop in Charlotte, NC” throughout your website copy or blog posts to make your website easier to find online. To ensure that you are using the right keywords, you can perform keywords research to make sure that your content is right on track to get discovered through SEO. 

Don’t worry if you don't have the experience to write SEO friendly content — you can always rely on services like Grammarly, BestWritingService or TrustMyPaper to write the content for you.

5. Embed Video Content On Your Site

Content is king, and video content is on the rise. With popular platforms like TikTok and Instagram Reels stealing the scene for video content, it’s more important now than ever before that you include video content on your site too. It makes understanding your business that much easier for your end customers. 

A lot of businesses house video content on their site under their resource tab on their “video library” page. In addition to having a video library, we will advise that you add video content on all of your other pages as well. That way if your website users prefer to consume content via video, you have a way for them to easily watch your video content in just a few clicks. 

Fun Fact: By 2022, online videos will make up more than 82% of all consumer internet traffic. This is 15x higher than it was in 2017!

Develop the Perfect Website for Your Business

It’s 2021. Your customers expect a phenomenal user experience and brand experience on your site, and now is the time to find new ways to make your website stand out (even if you are in an over-saturated market). 

Need a web developer to level up your website? Connect with us to work with a website team you can trust. 

Author bio

Ryan Gould, Vice President of Strategy and Marketing Services at Elevation Marketing

LinkedIn contact: linkedin.com/in/rygould

From legacy Fortune 100 institutions to inventive start-ups, Ryan brings extensive experience with a wide range of B2B clients. He skillfully architects and manages the delivery of integrated marketing programs, and believes strongly in strategy, not just tactics, that effectively aligns sales and marketing teams within organizations.

Ryan is known for taking complex marketing and business challenges and developing solutions that simplify processes while driving customer outcomes and business value. He also thrives on guiding Elevation teams toward execution of strategies that help companies succeed in new verticals, while staying true to core values and brand integrity.

Aug 25 2021
Aug 25

I recently posted on the Globant Medium blog comparing the various Content Staging and Deployment Strategies that I explored. The options explored included Deploy module, Content Sync, Content Synchronizer, Entity Share, and paid services like Content Sync, Acquia Content Hub, and Entity Pilot.

The criteria for the search were:

  • The solution is opensource and not requiring a paid service.
  • Depends on modules that have good community support, active development, usage and maintenance.
  • Allows moving content from one environment to another
  • Allows version control of content
  • Supports most (if not all) field types, including paragraphs to start with
  • Supports translation
  • Supports updation of existing content and not just initial import
  • Recursively picks all dependency content required

The solution we landed on was a combination of

Workflow

The solution provides a simple workflow that now involves
1) Export content from the UI of any environment
2) The exported content is written into the codebase (and thereby version controlled)
3) Git push from that environment, and Git pull on the other environments
3) Import the content by one drush command (drush dcim ) on any environment.

Pics from the contrib module:

image 17

https://miro.medium.com/max/506/0*R8kF0uMi_2lNOWzHhttps://miro.medium.com/max/415/0*12L3__NyNzwgtjO0

Aug 24 2021
Aug 24

Linkit gives you an easy interface with an ‘autocomplete’ field to search for content on your site, and then link to it. In other words, it provides search functionality to find the content on your site and insert the corresponding internal link.

Using the same interface, you can also insert external links. So you can insert links, both internal and external, with the same interface.

It supports internal links to nodes, users, taxonomy terms, files and comments, etc. With this module, you do not need to copy or remember the target URL, or go back and forth to find out and verify the exact link. It provides a more user-friendly interface well integrated with the insert link function of the editor.

Table of Contents

While working on links, you will find that you need something more, such as the option to open the link ‘in a new window’. You might as well also install another module called the Editor Advanced Link, which is another popular module which provides enhanced features for inserting links. For this reason, it is recommended also to install this module at the same time, to make it more complete.

In fact, it was also mentioned in the project page of the Linkit module that, starting from version 8.x-5.x, support for link attributes has been removed, and this Editor Advanced Link module is recommended there.

Getting Started

Installation of the Linkit module is easy. There are no extra requirements. Just follow normal module installation procedure. However, note that there are different versions in this module. At the time of this writing, there are:

  • 6.0.0 which requires Drupal 8.8 | 9
  • 8.x-5.0 which also supports Drupal 8.8 | 9
  • 8.x-4.3 which supports Drupal 8 prior versions
  • 7.x-3.6 for Drupal 7

If you are running Drupal 8.8 or above, we suggest installing 6.0.0 or later. For older versions of Drupal 8, you should install version 8.x-4.3. In this article, we shall focus on the latest 6.0.0 version.

Installation using Composer

If you follow the normal Composer installation, like

composer require drupal/linkit

ft will install version 8.x-4.3 by default. To install the latest version of the module, which is recommended, you need to specify the version in the Composer command:

composer require drupal/linkit:^6.0.0-beta2

Enable the Linkit module after installation.

Installation of the Editor Advanced Link module is straight forward. There are no extra requirements. Just follow normal module installation procedure.

Installation using Composer

Install using Composer:

composer require drupal/editor_advanced_link

Enable the Editor Advanced Link module after installation.

Configuring the Linkit Module

Configuration of the Linkit module is a little bit different for different versions of the module. In this article, we shall focus on the latest version 6.0.0.

1. Go to Configuration > ‘Content authoring’ and click on ‘Text formats and editors’

2. Click on Configure on the text format you’re going to use. In this example we’ll click on Configure on the “Basic HTML” row.

3. Enable Linkit under the ‘Enabled filters’ section by checking ‘Linkit URL converter’

4. Scroll up back to the ‘CKEditor plugin settings’, and select the ‘Drupal link’ tab. Make sure the ‘Linkit enabled’ option is checked, and then select the appropriate ‘Linkit profile’. Let’s choose the ‘Default’ profile for now. For more details about Linkit profiles, it will be covered below later.

After this configuration has been completed, linkit will be available for users.

How to Use Linkit

Users normally create content in the long text format fields using the default Drupal editor. To insert a link, you first highlight the text and click on the ‘Link’ button, and an ‘Add Link’ window will popup and there you can enter either an internal or external link.

You can see the small text under the space in this popup window, it says ‘Start typing to find content’, because it is now an ‘autocomplete’ field, which is enabled by the Linkit module.

If you are looking for the link to another internal content on the same site, just start typing with the title or keywords, and the system will automatically search for the matching content:

Here you just select the right content, and the system will insert the appropriate internal link for you into the editing text.

Note that these figures show the scenario without the Advanced Editor Link module enabled.

After installing and enabling the Editor Advanced Link module, an extra attribute ‘Title’ becomes available by default.

The ‘Title’ attribute, when entered, will appear when you hover over the link.

There are other attributes available apart from ‘title’, but they are limited by the ‘Allowed HTML tags’ setting in the Basic HTML editor configuration. These other attributes need to be enabled before you can use it.

To enable the other attributes from this Editor Advanced Link module, go to

1. Go to Configuration > ‘Content authoring’ and click on the ‘Text formats and editors’

2. Click on Configure on your text format.

3. Scroll down to the bottom and find the Filter settings. Select ‘Limit allowed HTML tags and correct faulty HTML. There you can find the attributes allowed associated with the tag for links. After the Editor Advanced Link module is enabled, the following allowed HTML tag reads:

Here you can find the attribute ‘title’, and that’s why it is available by default.

4. To enable the ‘target’ attribute, you can modify this allowed HTML tag by inserting the tag as follow:

target</strong>>

And then save the configuration. After that, you will find the extra attribute in the popup window:

With this ‘target’ attribute, you can configure the link to be opened in a new window or a new browser tab.

If you are an advanced user, you may add more available attributes to the allowed HTML tags for additional attributes. They include the following attributes highlighted as bold. Each represents a separate attribute corresponding to different CSS elements.

target class id rel</strong>>

We shall not go into details for these other attributes here.

Create Additional Linkit Profiles

Additional Linkit profiles can be created:

1. Go to Configuration > Content authoring and click on ‘Linkit’

2. From this page you can create and manage all your Linkit profiles. To create a new profile, click the ‘+ Add profile’ button, then enter in a “Profile Name”.

3. Click on the ‘+ Add matcher’ button to continue

4. Select a matcher from the list. When you search the content by autocomplete in the URL field, this is the entity you select here which the system will search from.

5. After selecting the matcher, you will arrive at this following page for additional configuration for this particular matcher.

6. Enter the ‘Metadata’ in the form of ‘tokens’. Metadata is additional information to be displayed in the autocomplete list of search which helps content creators to better identify the right content to select. Click on the ‘Available Tokens’ to display the list of tokens you can choose to configure. This list is based on what matcher you have chosen above.

As an example, following is the metadata field in the default profile for ‘content’:

by [node:author] | [node:created:medium]

which adds the name of the author and the date created to the list of autocomplete search. When searching in the URL field, it will look like this. The small text comes from the ‘metadata’ configured.

7. Complete other settings or you can leave them as default, then Click ‘Save changes’ to save this matcher.

For each profile, you can add additional matchers for different types of content that are allowed. Following is an example of multiple matchers created in a single profile, which allows content creators to search for different types of content entities. Each matcher will be configured with different matching metadata to display. This will make the content searching much easier.

In this example, matchers include content, users, taxonomy and media items (if the media module is enabled).

8. Do not forget to select the right profile in the target text format editor:

Summary

The Linkit module, together with the Editor Advanced Link module, provides a user-friendly interface for inserting both internal and external links.

The Linkit profile allows you to configure the appropriate metadata which appears when searching for content. This is helpful to content creators to accurately locate the appropriate content in the autocomplete search.

These 2 modules together allow us to provide a very nice user-experience for the content creators, and make life easier for them.

Aug 24 2021
Aug 24

WordPress' highly acclaimed editor is now in Drupal! Also known as the WordPress Block Editor, Gutenberg got included in WordPress core in version 5.0+. It replaced the former classic WordPress editor and brought about a new and improved way to create and edit page content. The default admin text editor now in Drupal 8 and Drupal 9 core is CKEditor which succeeded the not-so-powerful FCKeditor. Gutenberg got included as a contributed module since Drupal version 8.1. While both CKEditor and Gutenberg editors are WYSIWYG editors, they are very different in the way they treat content. The latter embraces the concept of the blocks. Gutenberg editor's content blocks are similar to the current two Drupal approaches that are the Paragraph-based Approach and the Layout-builder Approach. It integrates well with everything Drupal uses including blocks and views. 

The Gutenberg editor allows you to create all types of content using blocks instead of editing content in one large content area. It is great for non-technical users to build landing pages with ease as you don't have to write HTML manually (even if you want to create/save/reuse reusable blocks). It is also a great replacement for Layout builder. All in all, the Gutenberg editor is a game-changer for Drupal as it offers a modern, intuitive and easy editing experience for non-Drupal users. Thus opening Drupal's doors to a wider audience. 

Features like these (Gutenberg and more) make up great reasons for you to migrate from Drupal 7 to Drupal 8. If you're still on Drupal 7 and skeptical about migrating to Drupal 8, read this article to resolve your doubts.

Gutenberg Editor

How different is Gutenberg from CKEditor 

By now we know that CKEditor and Gutenberg are both WYSIWYG editors but there are many differences in the way they handle content. The significant distinction being the way Gutenberg treats content in terms of blocks while CKEditor treats content as, well, content. It is a new style of editor/page builder. Generally, we write text in a single text area but using Gutenberg editor, we can use content in terms of blocks. A block could be Paragraph, List, Heading, Table, Image, Video, button, etc. This editor is written in Javascript, mostly in React. It is very simple to use even for non-Drupal folks.

Ckeditor Gutenberg If you want to change the color of a heading, you will need to go to the source, find the heading and manually change the style color A heading style can get changed by simply clicking on that heading block and selecting the edit options from the sidebar on the right Provides a single large layout for content editing Leverages blocks to build layouts consisting of various editable elements Videos and Social posts can be embedded using additional submodules Can directly include embedded code using related blocks Limited options for image-to-text alignment like wrapping text around images Can efficiently wrap text around images offering many alignment options Needs some amount of HTML and CSS experience to work with Does not require you to have any HTML or CSS experience to build pages on the fly

Implementing the Gutenberg Drupal module

Using the Gutenberg Drupal module is very simple as other contributed and core Drupal modules. The Gutenberg module can be installed by following steps:

  • Installation: Install the Drupal Gutenberg module from here and install the module in the same way as you would install any contributed Drupal module.
  • Enabling: You will find that Gutenberg comes along with 3 submodules. Let's enable all three submodules.

Gugenberg enable

  • Application in Content Types : It can be applied by following steps.
    Structure > Content Type > Edit a content type which will use Gutenberg Editor > Enable by check box “Enable Gutenberg experience”
  • Using the Editor : Create a page using the content type which had applied Gutenberg Editor.

Gugenberg editor

What are Gutenberg Blocks?

Gutenberg’s blocks are the editor blocks that are used to create content layouts.
 
All blocks are categorized as Text, Media, Design, embeds, Cloud Blocks, Drupal blocks, Reusable blocks.

Text Blocks : 

1. Paragraph
2. List
3. Heading
4. Verse
5. Table
6. Code
7. Quote
8. Pull Quote
9. Preformatted

Media Blocks : 

1. Image
2. Cover Image
3. Image Gallery
4. Audio
5. Video
6. File
7. Media and Text

Design Blocks : 

1. Group
2. Separator
3. Navigation
4. Spacer 
5. Button
6. Columns

Embeds Blocks: Almost all popular social media blocks insert using embeds blocks. List of social media blocks included: Youtube, Facebook, Twitter, Instagram, Flickr, etc.

Cloud Blocks:  The Gutenberg development team also provides blocks that can be used by enabling the Gutenberg Cloud sub-module.


Gugenberg cloud
 

After enabling the “Gutenberg Cloud” module, choose the cloud modules from “Gutenberg Cloud Block Manager”. This is in the configuration's Content Authoring section.

Drupal Blocks: You can now add Drupal blocks into the editor. You may search for all available blocks in the “Drupal Blocks” section.

Gugenberg drupal block


Reusable blocks: Gutenberg allows adding reusable blocks. If common content is added at multiple places then a reusable Drupal block can be created.

Gugenberg reuseable

How to add Gutenberg blocks as Content?

According to the above description, we know that the Gutenberg editor is very different from the default CKEditor. To start adding available blocks, click on the plus (+) icon or hover over “Start writing or type”. Now you will get all the available blocks in a dropdown list. Click on any block that you want to insert in the content area.

Block Configuration

Configuration options can be added to each block according to their default properties. Like for a Paragraph block, the default properties are font-size, line-height, text-color, background-color, drop-cap, or adding a custom class.

gutenberg paragraph block configuration
Aug 24 2021
Aug 24

11 minute read Published: 24 Aug, 2021 Author: Matt Parker
Drupal Planet , Migrations

This is the third in a series of blog posts on writing migrations for contrib modules:

Stay tuned for more in this series!

Background

While migrating off Drupal 7 Core is very easy, there are still many contrib modules without any migrations. Any sites built using a low-code approach likely use a lot of contrib modules, and are likely blocked from migrating because of contrib. But — as of this writing — Drupal 7 still makes up 60% of all Drupal sites, and time is running out to migrate them!

If we are to make Drupal the go-to technology for site builders, we need to remember that migrating contrib is part of the Site Builder experience too. If we make migrating easy, then fewer site builders will put off the upgrade or abandon Drupal. Plus, contributing to migrations gives us the opportunity to gain recognition in the Drupal community with contribution credits.

Problem / motivation

In the last blog post, we tested migration patches by manually creating content in the D7 site, and manually verifying that the content we created was migrated to the new site.

But entering test data, running the migration, and verifying the test data by hand is tedious and error-prone, especially if we want to be able to perform the exact same tests a few months later to ensure that recent changes to the module haven’t caused a regression by breaking the migration!

Being able to quickly run a migration is also quite useful when writing a migration from scratch (a topic we will cover in future blog posts), because you can get continuous feedback on whether your changes were effective (i.e.: you can do test driven development (TDD) — a style of programming where you (1) write a (failing) test, (2) write operational code so the test passes, and (3) refactor… and you repeat that cycle until you’ve solved the problem).

Proposed resolution

Let’s automate running the migration: automation will ensure that the test is performed the same way next time.

We will do so by writing PHPUnit tests. PHPUnit is an automated testing tool used in Drupal core. Because Drupal’s PHPUnit tests run in an isolated environment, this will save us time reverting the database before each migration test.

As an added bonus, Drupal CI — Drupal.org’s testing infrastructure — can be configured to run tests when patches and/or merge requests are posted to the module’s issue queue, to remind other contributors if the change they are proposing would break migrations in some way.

What do these tests look like?

Migration tests typically follow a pattern:

  1. Set up the migration source database,
  2. Fill the migration source database with data to migrate (“set up Test Fixtures”),
  3. Run the migration (“run the System Under Test”), and,
  4. Verify the migration destination database to see if the test fixtures were migrated successfully.

You might notice that we’ve been following this pattern in our manual tests.

PHPUnit tests themselves are expressed as PHP code. Note that this is different from Behat behavioural tests (where tests are expressed in the Gherkin language), or visual regression tests (where — depending on your testing tool — tests could be expressed as JavaScript code, as a list of URLs to compare, etc.).

Drupal’s convention is to put D7 migration tests into a module’s tests/src/Kernel/Migrate/d7/ folder. You’ll find many Core modules with migration tests in this location (Core’s ban and telephone modules are good places to start). But, most Core tests set up their test fixtures in a completely different file than the test itself, which can be confusing. In this blog post, I’ll walk you through writing tests that look a bit more like the steps we’ve been doing manually.

Steps to complete

Automated migration tests don’t strictly require a Drupal 7 site at all, because the D7 testing tools in Core’s Migrate Drupal module know how to set up something that looks just enough like D7 to make the tests work.

In order to run PHPUnit, you will need to set up the Drupal 9 site a bit differently than you may be accustomed to — the composer create-project commands (or the tar/zip files) you normally use when creating a Drupal site will not install the tools we need for running tests. We should clone Drupal core from source if we want to use PHPUnit.

If we are going to write tests, we should seriously consider sharing them with the community, either by pushing the tests to an Issue fork, or by generating a patch and interdiff that includes them. While we won’t actually generate a patch this week, the instructions below will get you to set up your environment as if you were going to generate a patch.

Setting up

  1. Clone Drupal core’s 9.2.x branch, set up your development environment on the repository (note there is no web/ or html/ folder in this setup), and run composer install.
  2. Find a contrib module that has a migration patch (as described in part 2 of this blog series). As before, read through the issue with the patch in detail.
  3. Clone the 8.x version of the module into your D9 site, as described in part 2.
  4. Apply the migrations patch to its own branch the 8.x module and commit the contents of the patch to the branch; or checkout the Issue fork, as described in part 2.
  5. If the issue is using patches, then before you continue, you should create a second branch to add your tests in — the changes in this second branch will become your patch; and running git diff between the first and second branches will become your interdiff. To do this:
    1. Check out the branch from the issue “Version” field again (e.g.: git checkout 8.x-2.x)

    2. Create a new branch to put your work in. I name this branch after the issue ID and the number of comments in the issue plus one.

      For example, if the issue number is 123456, and there are currently 8 comments in the issue (i.e.: the comment number of the most recent comment is #8), then I would name my branch 123456-9.

    3. Apply the patch again — but this time, don’t commit the changes yet (you need to add your tests first).

Finding a migration to test

Before we write a test, we need to take a closer look at the migration that we want to test. Recall from the migration patches that migrations are defined by YAML files inside the module’s migrations/ directory. These files have roughly the following structure…

# In a file named migrations/MIGRATION_NAME.yml...
id: MIGRATION_NAME
label: # a human-friendly name
migration tags:
  - Drupal 7
  # possibly more tags
source:
  plugin: # a @MigrateSource plugin id
  # some config for that @MigrateSource plugin
process:
  # some process config
destination:
  plugin: # a @MigrateDestination plugin id
  # some config for that @MigrateDestination plugin

Right now, we only need to know the MIGRATION_NAME from the id line for one of the Drupal 7 migrations. If you find several migrations in the migrations/ folder, I’d suggest starting with a configuration migration, because those are usually the simplest.

Writing a test and running it

  1. Create a folder for the tests: mkdir -p tests/src/Kernel/Migrate/d7

  2. Using your preferred text editor, create a PHP file in that folder, tests/src/Kernel/Migrate/d7/MigrateTest.php, and edit it as follows, replacing MODULE_NAME with the machine name of the module; and MIGRATION_NAME with the migration name you found in the migrations/MIGRATION_NAME.yml file you’re going to test…

    
    
    namespace Drupal\Tests\MODULE_NAME\Kernel\Migrate\d7;
    
    use Drupal\Tests\migrate_drupal\Kernel\d7\MigrateDrupal7TestBase;
    
    /**
     * Test the MIGRATION_NAME migration.
     *
     * @group MODULE_NAME
     */
    class MigrateTest extends MigrateDrupal7TestBase {
    
      /**
       * {@inheritdoc}
       */
      protected static $modules = ['MODULE_NAME'];
    
      /**
       * Test the MIGRATION_NAME migration.
       */
      public function testMigration() {
        // TODO: Set up fixtures in the source database.
    
        // Run the migration.
        $this->executeMigrations(['MIGRATION_NAME']);
    
        // TODO: Verify the fixtures data is now present in the destination site.
    
        // TODO: Remove this comment and the $this->assertTrue(TRUE); line after it once you've added at least one other assertion:
        $this->assertTrue(TRUE);
      }
    
    }
    
  3. Let’s run the test: php core/scripts/run-tests.sh --sqlite /tmp/test.sqlite --file modules/MODULE_NAME/tests/src/Kernel/Migrate/d7/MigrateTest.php

    This assumes php is in your shell’s $PATH, you’ve changed directories to the path containing Drupal 9’s index.php, you can write temporary files to /tmp/, and you installed the module you’re patching to modules/MODULE_NAME.

    If you’re using Lando or Ddev, you will probably need to lando ssh -s appserver or ddev ssh -s web before running the line above.

    If all goes well, you should see output like…

    Drupal test run
    ---------------
    
    Tests to be run:
      - Drupal\Tests\MODULE_NAME\Kernel\Migrate\d7\MigrateTest
    
    Test run started:
      Tuesday, August 24, 2021 - 13:00
    
    Test summary
    ------------
    
    Drupal\Tests\MODULE_NAME\Kernel\Migrate\d7\MigrateTest   1 passes
    
    Test run duration: 5 sec
    

But the test isn’t very useful yet. Exactly how to fill in the TODOs we’ve left in there depends on the specific module you’re working on (i.e.: the data it stored in D7, and how that data maps to D9).

A real example

For now, let’s look at a real-world example: migrating the configuration for the Environment Indicator module (note there’s already a migration to do that in issue #3198995 — please do not create a new issue, and please do not leave patches in that issue).

To keep this blog post (relatively) short, I will provide a sample migration definition to migrate two pieces of configuration in environment_indicator. We will discuss how to find data to migrate and how to write migration definitions in future blog posts in this series.

Looking at the code in the latest D7 release, I see 2 pieces of config to migrate: environment_indicator_integration, and environment_indicator_favicon_overlay. Suppose that someone has written following migration definition at migrations/d7_environment_indicator_settings.yml to migrate those 2 pieces of config:

id: d7_environment_indicator_settings
label: Environment indicator settings
migration_tags:
  - Drupal 7
  - Configuration
source:
  plugin: variable
  variables:
    - environment_indicator_integration
    - environment_indicator_favicon_overlay
  source_module: environment_indicator
process:
  toolbar_integration: environment_indicator_integration
  favicon: environment_indicator_favicon_overlay
destination:
  plugin: config
  config_name: environment_indicator.settings

You can see here that the MIGRATION_NAME in our template can be filled in with d7_environment_indicator_settings.

So let’s start by copying the migration test template above into the file tests/src/Kernel/Migrate/d7/MigrateTest.php, and replacing MIGRATION_NAME with d7_environment_indicator_settings.

Now, since these two pieces of config were stored in the variable table in D7; we will start by inserting those variables into the variable table through the migrate database connection (i.e.: the source database)…

// TODO: Set up fixtures in the source database.
\Drupal\Core\Database\Database::getConnection('default', 'migrate')
  ->insert('variable')
  ->fields([
    'name' => 'environment_indicator_integration',
    'value' => serialize(['toolbar' => 'toolbar']),
  ])
  ->execute();
\Drupal\Core\Database\Database::getConnection('default', 'migrate')
  ->insert('variable')
  ->fields([
    'name' => 'environment_indicator_favicon_overlay',
    'value' => serialize(TRUE),
  ])
  ->execute();

Looking at the D9 version of environment_indicator, I can see global config is stored in the environment_indicator.settings config object; and there are two global settings in that object — toolbar_integration and favicon — whose behaviour matches the D7 variables we found. So let’s test the config after the migration:

// TODO: Verify the fixtures data is now present in the destination site.
$this->assertSame(['toolbar' => 'toolbar'], $this->config('environment_indicator.settings')->get('toolbar_integration'));
$this->assertSame(TRUE,  $this->config('environment_indicator.settings')->get('favicon'));

Now let’s run the migration test that we’ve been filling in…

$ php core/scripts/run-tests.sh --sqlite /tmp/test.sqlite --file modules/environment_indicator/tests/src/Kernel/Migrate/d7/MigrateTest.php

Drupal test run
---------------

Tests to be run:
  - Drupal\Tests\environment_indicator\Kernel\Migrate\d7\MigrateTest

Test run started:
  Tuesday, August 24, 2021 - 13:05

Test summary
------------

Drupal\Tests\environment_indicator\Kernel\Migrate\d7\Migrate   1 passes

Test run duration: 5 sec

… great!

Let’s clean up a bit by deleting the dummy assertion at the end and its comment (since we’ve added other assertions); and removing the remaining TODOs (since they are done). We can also add a use statement for Drupal\Core\Database\Database and modify the ::getConnection() lines accordingly. Now the full test looks like:



namespace Drupal\Tests\environment_indicator\Kernel\Migrate\d7;

use Drupal\Core\Database\Database;
use Drupal\Tests\migrate_drupal\Kernel\d7\MigrateDrupal7TestBase;

/**
 * Test the d7_environment_indicator_settings migration.
 *
 * @group environment_indicator
 */
class MigrateTest extends MigrateDrupal7TestBase {

  /**
   * {@inheritdoc}
   */
  protected static $modules = ['environment_indicator'];

  /**
   * Test the d7_environment_indicator_settings migration.
   */
  public function testMigration() {
    // Set up fixtures in the source database.
    Database::getConnection('default', 'migrate')
      ->insert('variable')
      ->fields([
        'name' => 'environment_indicator_integration',
        'value' => serialize(['toolbar' => 'toolbar']),
      ])
      ->execute();
    Database::getConnection('default', 'migrate')
      ->insert('variable')
      ->fields([
        'name' => 'environment_indicator_favicon_overlay',
        'value' => serialize(TRUE),
      ])
      ->execute();

    // Run the migration.
    $this->executeMigrations(['d7_environment_indicator_settings']);

    // Verify the fixtures data is now present in the destination site.
    $this->assertSame(['toolbar' => 'toolbar'], $this->config('environment_indicator.settings')->get('toolbar_integration'));
    $this->assertSame(TRUE,  $this->config('environment_indicator.settings')->get('favicon'));
  }

}

Congratulations, you’ve written your first automated Migration test!

Next steps

In the next blog post, we’ll talk about migrating simple configuration (i.e.: D7 variables to D9 config objects).

In the meantime, you could try refactoring the tests/src/Kernel/Migrate/d7/MigrateTest.php test we built in this blog post. Some ideas:

  1. Try splitting the Database::getConnection(...)->...->execute() statements into a helper function,
  2. Try randomizing the fixtures data that you insert,
  3. Try making two test methods, one for environment_indicator_favicon_overlay, where you test both the TRUE and FALSE states; and one for environment_indicator_integration.

If this is your first time writing automated tests, you might be interested in reading PHPUnit’s documentation on writing tests. PHPUnit’s assertions reference can also be pretty handy to refer to when writing tests.

If you have a lot of time, some optional, longer reads are:

The article Easy commit credits with migrations, part 3: Automated tests first appeared on the Consensus Enterprises blog.

We've disabled blog comments to prevent spam, but if you have questions or comments about this post, get in touch!

Aug 23 2021
Aug 23

Digital transformation has become integral for businesses that want to stay afloat today and that includes every organisation in every industry. A powerful online presence that can cater to whim and need that today’s dynamic business world can throw at you is imperative. 

To make that happen, you need an equally powerful software to strengthen the foundational aspects of your online businesses, so that you can constantly keep it evolving and up-to-date with the current trends. And that is where Drupal comes in. 

An open source CMS that is equipped to handle all your business requirements specific to your industry and geographic region makes Drupal the perfect fit for all businesses.

A graph depicts the countries where Drupal is used the most.Source: Enlyft

In the twenty years of Drupal’s existence, it has taken over the world. The web development domain is more or less incomplete without it. The image above clearly shows Drupal’s presence in countries that are spread over 4 continents.

A graph shows the top industries that use Drupal.Source: EnlyftThe graph shows the top ten industries where Drupal operates as per Drupal.org.Source: Drupal.org

The Drupal Business Survey 2020 reported the top ten industries where Drupal operates.  The leading sector with the maximum respondents was education, accounting for 61.4% of all Drupal projects. While the telecom sector increased its use of Drupal, for arts and culture and charities and non-profit the story was the opposite.

It is an irrefutable fact that Drupal is a pro in identifying and providing features and opportunities that make an organisation stand out in its niche. That is why the CMS has spread its wings all over the business world, leaving no industry untouched.

And that is what we are going to be discussing today, how Drupal provides for every industry and how its versatility has garnered the most influential clientele in each sector. So, let’s begin.

Drupal Features: Catering to Every Industry

Drupal is one of the finest CMSs in the market, with features that are beyond reproach. However, that isn’t what makes it close to perfect. The reason for Drupal’s impressive success stories is its ability to provide for every use case. 

Yes, Drupal has flawless features, but it also has ample of them, making it a truly versatile CMS that can be used to cater to any and all needs an industry or business may have. 

Let’s look at them now.

Open source software community

Being an open source software, Drupal has a strong community to support its endeavours. And by strong I mean close to a million members. Much of the development of the software can be attributed to its community along with its security. 

If you are a Drupal developer, you can easily leverage upon the knowledge and solutions curated by others in the community. Any question that you may have would be answered by the community. In simple words, the Drupal community is equivalent to perpetual support for Drupal projects.

Learn more about open source here:

Strong stack foundation

Drupal works on the LAMP stack, which is Linux, Apache, MySQL and PHP. All four of them are individually powerful, but together they are more than that. This robust stack can guarantee you that your digital experiences would be flexible, agile and fast moving, so much so that they might seem future-proof.

Security

There isn’t a CMS that can beat Drupal in terms of security, some have come close though. Drupal’s out-of-the-box ability to counter the most detrimental vulnerabilities on the web that too with ease makes the previous statement true. From providing you the means to gain secure access, to control your user permissions and to implement data encryption, all account to a more secure site. To know more, read about the open source security and the must have Drupal modules for all your website security needs.

Scalability and performance

In terms of scalability and performance, Drupal manages to shine as well. Performance is usually associated with lesser load times, and a software that can make that happen even with a massive proportion of traffic spikes is what any industry should look for. And Drupal does just that. 

From traffic spikes to content growth, Drupal can handle it all because it is built to scale. You wouldn’t ever have to worry about any down time owing to heightened traffic. To know more, read performance optimisation techniques and the scalability provisions offered by Drupal.

Accessibility

WCAG 2.0;
ATAG 2.0

These are the two standards set by the world wide consortium that need to be followed to the T to make a site universally accessible. And guess what? Drupal adheres to both of them, and that too quite stringently. Its default features like alt text and drag and drop functionality are examples that are bound to convince you of the accessible nature of the CMS.

Learn more about accessibility here:

Content workflow

Be it content authoring or content architecture, Drupal aces both of them to provide a seamless content workflow for you. Features like the WYSIWYG editor along with a stronghold on permissions and authentications, you can rest assured that your content authors, publishers and site admins will have access to the things they need and not the ones that are beyond their clearance level. 

The flexibility provided by the content architecture equips to create it both programmatically or using an admin interface. Views and other display mode tools only add to the flexibility, making the inclusion of every kind of media type a breeze. For an advanced content editing experience, read Drupal’s Layout Builder module and Paragraphs module can help.

Headless

Drupal’s headless architecture is another game-changer. It lets you separate the development of the backend content from the frontend presentation layer. While the backend would be pretty much all Drupal-centric, the frontend could be anything you like, be it JS frameworks such as Vue, React or Angular or static site generators like Metalsmith or Gatsby. 

You can choose to not use any of the Drupal features with a fully decoupled architecture, however, if you want to keep some Drupal functionality on the frontend, you can choose progressively decoupled Drupal architecture to get the best of both worlds. 

Learn more about decoupled Drupal here:

Third party integrations

Drupal out-of-the-box has plenty of features to keep you satiated, but it cannot compensate for every tool in the market today, hence the need for Drupal integrations. The CMS is efficient at integrating itself with other tools and technologies, so that you can work with the best tools available today. 

Mobile-first approach and mobile app delivery 

Another one of Drupal’s fortes is being mobile-first. What this means is that Drupal always prioritises responsive designs that can adapt to the screen size they are being viewed on, so that you users receive an optimal user experience.

Drupal is equipped to build mobile applications to support smartphones, tablets and feature phones as well. You can build them using Drupal’s inherent toolkit and work with HTML5/CSS or you can work from Javascript. In both cases, the developed web would be fully responsive in design, however, the JS approach would lack the integration with Drupal’s theming layer; it’ll be like developing a native mobile app. To know more, read about mobile-first design approach and mobile apps like that of Flutter-powered delivered by Drupal.

Multilingual

Businesses and industries aren’t bound by geographical regions anymore, they have a global reach today. And a global presence usually comes with multilingual needs for local sites. Drupal provides 90+ languages you can choose from to create translations that are not only restricted to the content, but also transcend to configurations, so that your local admins can work efficiently. Read more about Drupal’s multilingual capabilities here.

Multisite

Like a business isn’t bound to one language, it is also not bound to one site. With multiple business branches and departments, organisations often have a site for each of them. These sites usually look alike with similar features and aesthetics. And that is where Drupal’s multisite feature comes in. You can create hundreds of sites using the same with a single codebase for easy management and minimal development time. The sites would be similar, but they would have a unique individuality too. Read this complete guide on Drupal multisite to know more.

Personalisation

Geolocation; 
Behaviour taxonomies;
Device types; 
User personas; 
Browser history; 

All five of these help an organisation understand its consumers better and provide them an experience that is personal to them. And Drupal can capitalise all five to help you apprehend your user’s and give them a personalised digital experience. 

Learn more about personalisation here:

SEO 

The SEO trends in 2021 are not going to be similar to the trends in 2020, do you agree? So, for optimal results in the SEO domain, you have to be able to get the most out of the present scenarios. And Drupal does just that. Of course, the CMS has umpteen SEO modules that would cater to most of your needs, be it links or sitemaps. However, its ability to adapt with changing trends pertaining to search intent or web automation takes the cake here. To know more, read this definitive guide to Drupal SEO in 2021.

Migration and upgrades

To be honest, up until recently Drupal migrations and upgrades were a pain, a pain that could suck the life out of you. But no more! With the roll of Drupal 9, upgrades have become as easy as easy can be. With a few simple tweaks here and some minor updates there, you can click on the update.php button and be done with the upgrade. This kind of ease is needed for businesses which cannot afford to be distracted by an upgrade for a longer span of time.

Learn more about Drupal 9 upgrade here:

Marketing automation

Marketing automation, like the name suggests, is a great tool that allows marketers to automate their job. For Drupal, marketing automation equates to real-time sales alerts, the management of consumer data, the tracking of your site’s traffic and streamlined workflows amongst other things. And tools like Marketo MA, Pardot and Hubspot with the integration with Drupal help the CMS provide much more advanced features in this realm.

Read our blog Understanding marketing automation in association with Drupal to get a better understanding of this feature.

Support for emerging technologies

On top of all of these, Drupal also supports the use of emerging technologies to provide even more astounding digital experiences. We’ve discussed marketing automation, which is one of these technologies, other than that modern JS testing, search and visualisation, design systems and a foray into augmented reality and virtual reality are trends that Drupal has been increasingly following. To know more, read about macro trends in technology and the web development trends in 2021 and where Drupal stands.

Here is an example of virtual reality at work with Drupal.

[embedded content]


Industry Rundown

Now that we know everything Drupal can accomplish, let's take into account the same features and more in regards to the various industries Drupal provides for. We’ll be looking at the different business sectors individually and see if there are specific Drupal features that make it ideal for that particular sector, followed by examples from the same industry where Drupal has worked its magic.

Ecommerce and Retail 

The best place to start the industry conversation has to be the online retail therapy. Yes, I am talking about the ecommerce, retail and distribution sector. Although they might be considered different, they function in much the same way and it is a sector that is valued in trillions.

So, what does Drupal have to offer that is unparalleled?

Well, four things actually.

  • First is Drupal Commerce, it's a tool unlike any other, which acts as a one stop destination for all things ecommerce. From payment gateways and tax calculations to unique product pages, it can do it all. And ecommerce sites are thankful for it.
  • Second would be the headless integrations. Drupal allows you to use Drupal commerce along with JavaScript to build our frontend through decoupling. 
  • Third is Drupal’s ability to scale with ease, which comes in handy when ecommerce sites experience traffic spikes during sale season.
  • Finally, the delivery of content on multiple channels with easy content authoring experience even on mobile devices only adds to Drupal’s compatibility with ecommerce platforms.

Along with these, Drupal’s proficiency at SEO, multilingual support, secure architecture and even multiple currency management make it the perfect choice for every ecommerce and retail business. Here are two of the most famous ecommerce platforms on Drupal. Read about Drupal’s provisions for ecommerce websites and the benefits of implementing content-driven commerce to know more.

Eldum Rett

The homepage of Eldum Rett is shown.


Eldum Rett is a leading food delivery and subscription service provider in Iceland. With an annual turnover of 7 million USD, it needed to provide exemplary service to its thousands of consumers to maintain its momentum and grow simultaneously.

The brand needed flexibility to enhance its user experience and with Drupal that was pretty convenient. It was transitioning into a new native app that could handle the complexity it wanted to build on. Drupal provided a ton of functionality out-of-the-box and you could add on it as well and that’s what Eldum Rett wanted. It leveraged Drupal’s impeccable ability to extend itself through its APIs and Eldum Rett was able to launch itself. 

King Arthur Baking Company

The homepage of King Arthur Baking Company is shown.


When you think about baking, your mind instantly moves to recipes that could help you a great deal during family events. These recipes are what King Arthur Baking Company wanted to prioritise. With a history of over 200 years, the brand wanted itself to be associated with making people fall in love with baking. 

So, Drupal was chosen to help the business realise its goal as the CMS checked all the right boxes. It prioritised recipes, so that the experienced bakers could browse, save and print any of the 2000 recipes and the new bakers could get a step by step on a clean recipe page without any confusion. 

Furthermore, Drupal also provided scalability and better performance along with an innovative flair for the future. 

Fintech, Banking and Finance  

If there is an industry that needs the most heightened level of security, I would say that it is the banking sector. Amongst all of the open source and even proprietary CMSs, Drupal’s robust security measures are almost unmatched and for sensitive financial data, you cannot settle for less than that. 

Add to this Drupal’s ability to integrate with other platforms for marketing and payments and you would be left with an ideal answer to your need for a fintech and banking website. Here is further proof for that. Read about Drupal’s provision for the fintech industry and the significance of digital transformation for the fintech segment to know more.

The Carlyle Group 

The homepage of The Carlyle Group's website can be seen.


A leading name in the fintech industry and one of the top five equity firms in the world, the brand needed an equally powerful companion for its online presence. As a fintech company it needed two things; 

  • An easy and natural editorial experience; 
  • And bulletproof security; 

Both of which rank quite high on Drupal’s repertoire of features. With the successful fulfilment of the project, The Carlyle Group was able to attain more leads, heightened session durations and increased organic traffic.

Eastern Bank 

The homepage of Eastern Bank can be seen.


One of the oldest and largest mutual banks in the United States, the Eastern bank needed a solution to revamp its brand among other things and Drupal could provide them all. 

The bank chose Drupal for several reasons. 

  • Being a banking institution, it had a lot of sensitive information and Drupal offered a semblance of a guarantee in terms of security along with testing prior to an update.
  • The bank had a number of campaigns that were being managed in several different microsites, Drupal’s multisite feature resolved that too. 
  • The need for flexibility in content editing and control over user access were also provided by Drupal.
  • Finally, the site had to be accessible, and Drupal’s accessibility features ensured that the project got an AA level clearance.

High Tech 

I say high tech, but I mean technology that is constantly updating and evolving. Do you agree? And for everything that is dynamic, there can’t be a better choice than Drupal. 

The CMS is synonymous with concepts of flexibility and scalability, making it provide for the business sector that is focused on advanced technologies. These two examples will tell you why. 

Olympus Learn Center 

The homepage of Olympus Learn Centre is shown.


Olympus is a world leader in creating digital and optical solutions that make our lives healthier, safer and more content. Having been founded over a century ago, the business is still a pioneer in the high tech sector. 

It needed a consistent and flexible technology to provide an enhanced user experience that was a sumtotal of its modern design, stability and an elevated performance. 

Hence, Drupal was chosen. The platform was highly scalable and mobile first, with thousands of modules that were continuously enhanced and improved by its open source community, which meant whatever the solution was, it was definitely going to be long-term and it was.

CloudHealth 

The homepage of CloudHealth is shown.


CloudHealth Tech is known to manage entire cloud ecosystems for businesses and that too cost-effectively. It was intended to be a massive source of lead generation for its clients. So, to be efficient it took to Drupal. 

Drupal is as agile as it is flexible. This ability makes supporting marketing initiatives quite handy. Add to this, the CMS’ offerings in the form of high developer velocity and an pretty convenient editorial experience, the result is nothing short of exemplary. 

CloudHealth was able to transform its blog completely with more than 100% increase in pageviews and users. That’s the power of Drupal. 

Government 

What is the first thing that comes to your mind when thinking about a government website? For me that is security. If a government site isn;t secure, the repercussions could be colossal. Don’t you agree?

The next thing is accessibility, the government is for all the citizens. So, it needs to take account of its disabled citizens too and that can only be done by complying to the web accessibility standards. 

Of course, features like scalability and flexibility come quite handy for a government project. More about Drupal’s exceptional capabilities for powering government sites here.

Let’s take a look at the one such government site having built on Drupal.

City of Boston 

The homepage of City of Boston is shown.


The City of Boston site was quite old and way behind time and it needed a major revamp. Drupal was chosen as the CMS for the rebuild for many reasons. 

  • Drupal’s open source community was one of the major reasons, as the massive developer pool could help the site in maneuvering the changing environment. 
  • Drupal also religiously complies to accessibility standards, making the boston.gov get to AA compliance on accessibility.
  • Drupal’s iterative approach towards development was also a parameter. 
  • Drupal’s mobile first approach made it quite responsive to all devices, since that was a priority, Drupal became the ideal choice.

The site owners also wanted the website to be interactive and engage its audience in future developments and that is exactly what Drupal made possible. With over 600 emails received from the constituents, about 88% of them suggested ways to improve the website.

The City of Boston website has come a long way with Drupal at its back.

Sports, Music, Arts and Entertainment 

This is a pretty diverse sector, but one that has pretty much the same needs and requirements with a tendency to experience massive traffic spikes.

  • For one these websites need integrations, and bucket loads of them, to provide features and experience one software alone may not be able to. 
  • And second, they need content capabilities that are beyond average with editorial workflows that help content creators instead of burdening them.

And Drupal can fulfil both of these requirements. Read about Drupal’s provisions for digital media and sports industry to know more. Here are some success stories.

The Beatles 

The homepage of The Beatles website is shown.


A profound sense of flexibility; 
And the adaptive ability to add on any possible feature through an API framework; 

These two pretty much sum of the project that led to the development of The Beatles Official Website. It needed just the right controls of content curation and user registration along with aesthetically pleasing themes that also served well on the technical front, plus the addition of a suitable hosting architecture; all of which Drupal was pleased to provide. And the site turned out to be pretty amazing. 

Sport England 

The homepage of Sports England is shown.


Being scalable; 
Being content-rich; 
Being secure; 
And being able to easily manage assets; 

These were the requirements of the Sport England website and Drupal excelled at fulfilling all of them. The layout builder module helped with the content and custom solutions, the API integrations added further functionality and the ability to manage the site without much technical assistance made the site owners quite happy.

Travel, Tourism and Hospitality 

When you go to a travel and hospitality site, what are the things that you look for? For me, there are plenty of different aspects that need to suit my palate before I settle, call me picky if you have to. 

  • The site has to have to right content, some even personalised for me and my needs; 
  • The site has to be one of the top ranking ones on Google because I am not going to scroll all the way down and book the last result, so being SEO friendly is needed; 
  • The site has to be easy to navigate, so that I can see it in all its glory without getting lost in the maze; 
  • The site has to be mobile friendly, I would not always open it on my laptop; 
  • The site has to have secure payment gateways; 
  • And finally, the site should be multilingual, I must be able to read what’s on there to get dazzled by it. 

These may seem too much, but trust me all of these are necessities in the travel and hospitality industry. Can Drupal provide in this segment? Know more about Drupal’s offerings for the travel and tourism industry here. Here are some success stories. 

VisitTheUSA.com 

The homepage of VisitTheUSA.com can be seen.


VisitTheUSA.com is a site under Brand USA. It needed to come out of its proprietary software’s limitations and test Drupal without any licensing costs and a boundless scope of development. And Drupal did not disappoint. 

The project, upon its completion, had everything it had set out to accomplish. 

  • It was able to optimise the frontend performance as well as build the majority of the features outside of Drupal. 
  • It was able to capitalise on Internationalism and get seamless translations without any hassle of writing a new code. 
  • It was able to get the right trip planning tools from integrations with Instagram and TripAdvisor.
  • And it was able to provide interactive features to its audience. 

Lonely Planet 

The homepage of Lonely Planet can be seen.


Lonely Planet is a renowned travel company with a multitude of resources, ranging from guide books to web content and mobile apps; it even has its own travel community. 

With that kind of presence, the brand had bucket loads of content that it needed to be managed. And when content management is in question, you do not have to look further than Drupal. And add to that Drupal APIs and its decoupled nature, you have a winner on your side. 

  • Drupal provided an impeccable control over content architecture; 
  • Drupal as a content repository is pretty much perfect and synced marvelously with React in this case; 
  • Drupal also provided a versatile migration API. 

Manufacturing and Energy  

There aren’t any specific features that need to be in a manufacturing and energy business. For manufacturing, the features usually coincide with ecommerce and retail because if you are to build, you are going to sell. And energy companies are usually more on the lines of being informational, so the needs usually pertain to content workflows being flexible.

American Council for Energy-Efficient Economy

The homepage of ACEEE can be seen.


As the name suggests, the company is bi-partisan non-profit that promotes energy-efficient solutions and strives to fight climate change. 

For its website, it needed to provide a mobile-friendly experience to its audience. Since Drupal 8 is all for being mobile-first that was an easy win. It also needed content features that were flexible and incorporated imagery, and Drupal can provide that too. Using the CMS, ACEEE was able to achieve easy content filtering for searches, have topic pages and share events, both from the present and the past. All in all the user experience improved by a substantial amount.

First4Numbers 

The homepage of First4Numbers can be seen.


The brand is renowned for printing bespoke numbers for sporting events and being the supplier of the London 2012 Olympics.

Their site was already built on Drupal 6, all they needed was to get the site upgraded to Drupal 7 and a few additional functionalities. 

  • One of them was the automation of the ordering process, which had to be intuitive for novice users and be an advanced version of the somewhat antiquated process they already had. 
  • And second, they planned to go global, so the site was to be built to scale to accommodate the hike in traffic going global would entail along with additional languages for the better reach. 

Real Estate and Urban Planning 

Real estate and urban planning, both are associated with infrastructure, but the former is self-owned and operated and the latter is government run. So, their needs tend to be a little different. 

While real estate sites are all about aesthetics, minimal themes and more importantly, a massive image gallery, urban planning focuses on people and tries to hear them and make them feel heard. Let’s find how Drupal caters to these two.

Talk London 

The homepage of Talk London is shown.


Talk London does just that, it allows Londoners to talk with the authorities at the City Hall and do their part in formulating urban planning strategies. 

The goal was to create a secure and engaging site and that was easy with Drupal. The user generated content functionality was enhanced along with adding email notifications and flexible content layouts. And the result was an increase by a third in subscriptions in 2021.

Domu 

The homepage of Domu can be seen.


Domu is a website that offers real estate listings to rent in the Chicago area. From lofts, houses, apartments and condos, it has a pretty wide selection.

Domu wanted simplicity and ease for people looking for rental space and the landlords looking to post their properties. So, it decided to overhaul it existing design for a more breezy one. 

Emphasis was placed on; 

  • Adding more functionality for landlords; 
  • Providing previews to them: 
  • Making listings more informative, with area, neighbourhood and property names;
  • Making updates to existing listings easy; 
  • And giving tutorials for posting images of the properties.

Beauty, fashion and blogging 

Not to sound like a broken record, but there aren’t any specific features pertaining to these sites that would make them different from the rest of the sites. The beauty and fashion industry may align with the retail and ecommerce sector. However, the blogging sites are a different story, they are considered one of the simplest, if not the simplest, site to build.

Estee Lauder 

The homepage of Estee Lauder can be seen.


If you are into beauty, you must have heard of Estee Lauder, being a high-end cosmetic brand. And it chose Drupal for its decoupling ability, so that it could use the CMS to separately build its learning management system. As a result, its learning platform could create resources without conducting classroom sessions and train people at different locations and not have to repeat anything. The availability over online and offline mediums removed any further restrictions. 

The brand also took advantage of Drupal’s multilingual properties, built the site to scale and found a resolution to monitor user performance.

Bond Lifestyle 

The home page of Bond Lifestyle can be seen.


This is a blogging site solely dedicated to everything associated with 007, from his apparel and accessories to his adversaries’, you can know everything about the Bond movies. 

With Drupal, the site was able to gain all the right functionalities needed for a successful implementation. These included;

  • A picturesque homepage; 
  • A product overview page with a content list for easy perusal; 
  • A detailed product page; 
  • And organised content with Drupal taxonomies.

Startups and small business 

Startups and small businesses have one thing in common and that is the fact that they do not have large amounts of cash rolling out. They usually work on a limited budget and Drupal can handle that pretty well. Since it is open source, there are minimal costs and zero licensing fees. If you have certain knowledge of the CMS itself, you can build a site for free.

Here are two small businesses that are pretty close to being startups with very different reasons for choosing Drupal.

GoIntro 

The home page of GoIntro can be seen.


GoIntro is an online platform that allows students and employers to connect with each other through an online career fair. The site is an example of decoupled Drupal with Angular on the frontend. 

The project was primarily divided into three segments; 

  • The organisers
  • The employers 
  • And the students

All three had their own ecosystems and functionalities. For instance, the students got to create their own profiles, which would display their skills and personal information and they can choose to attend only the events they are interested in. On top of this, Drupal’s ability to handle any kind of content and could be scaled to any limits made it an even more perfect fit for GoIntro.

Cannabis Yukon 

The home page of Cannabis Yukon is shown.


The legality of cannabis is still a contentious issue all over the globe. Therefore, when the Government of Yukon had to build their cannabis retail, their paramount concern was to protect the privacy of its users. That is why Drupal was chosen, to have total and complete control over the consumer data. This along with Drupal Commerce and the fact the Government of Yukon website was already on Drupal, the decision was final.

Healthcare 

The healthcare sector is an important one, given COVID, you could say it is imperative for each one of us. In terms of its online presence, the healthcare industry mandates three things. 

  • It needs to be able to protect patient data through better security; 
  • It needs to be able to new functionalities with easy integrations; 
  • It needs to be able to provide customised user experiences.

Has Drupal been able to provide these?

Yes.

Aster Hospitals 

The home page of Aster Hospitals can be seen.


A leading healthcare provider in the Middle East and India, Aster Hospital wishes to provide healthcare within the reach of millions more. And it wanted all of its sites to showcase the same brand identity and provide the same kind of experience.

With Drupal, it got to work with customisable themes that meant a number of things for the brand; 

  • It could enable faceted search features; 
  • It could now streamline content authoring; 
  • It could build pages based on individual components;
  • And it could have autonomy over creating and updating region-specific pages. 

The Claro theme, layout builder and paragraphs helped in successfully developing their Drupal 9 site.

Higher Education

What do you think a website for a university would need to have to provide a great experience to its users and admins? 

The answer lies in four things: 

  • One, it is to be multi-functional. From students publishing their work online to teachers being able to integrate with zoom to conduct an online session, the website needs to check all the right boxes for education.
  • Two, it needs to be scalable to handle high volumes of traffic, your website cannot crash on the last day of the admissions, otherwise students would be very upset.
  • Third, it needs multiple sites for multiple departments with a sense of individuality for each of them. The content for the geology department cannot be the same as physics, am I right?
  • Finally, a university site needs to be secure, it has tons of information of both the faculty and the students and it needs to be able to protect the same.

Do you think Drupal can provide all of this? I think, yes and pretty conveniently too. To know more, read about Drupal’s offering for elearning platform and how you can devise a content strategy for higher education sites with Drupal. Following is once such success story:

Princeton University School of Public and International Affairs 

The home page of Princeton University School of Public and International Affairs can be seen.


Princeton is a name we’ve all heard and awed at and Drupal was chosen by the esteemed university to create the online persona of its School of Public and International affairs. 

What did Drupal achieve?

  • Drupal made the staff work less because it could showcase courses, events and news amongst other external data without manual updates. 
  • Drupal reduced the development time because it was able to reuse themes, modules and UI patterns to create a pretty consistent experience throughout the website. 
  • Drupal provided a heightened level of flexibility in design and layout because of tools like layout builder.
  • Drupal also made it quite convenient for the content editors to create and manage data. 

The outcome was a site that both the site owners and users were satiated with.

Conclusion 

Remember the 16 features we discussed in the beginning of this blog, it is those 16 features that make Drupal competent to cater to any need a user may have. All the industries we discussed and the solutions they were able to create were built using those 16 Drupal attributes and not all of them to be honest, but still the result was never in dearth of functionalities, being as close to perfection as possible. And that is why Drupal is always going to be ready and willing to serve every industry.

Aug 23 2021
Aug 23

Progressive Web Apps (PWA) have become the new era for mobile web as most users stay connected 24*7 using a smartphone. Popular brands like Pinterest, Twitter, and Starbucks have reported an increase in the user engagement level. Why PWA rocks? What are their core features. In this article, we have mentioned key Progressive Web App features that make it the future of web development.

There has been an increase in the number of mobile web users. It has made companies make positive changes to their online strategies. With many users accessing your website through their smartphones, you must utilize the latest technologies to improve outreach to your audience. There is a need to focus on the performance of your online assets and ensure that your audience has an excellent experience when they visit your website.

There has been an increase in the use of Progressive Web Apps by renowned brands and combines the best practices of native apps and web solutions. PWA is created using a web stack with unique features and excellent user experience usually associated with native applications. This article will discuss the progressive web app features and the associated benefits.

Critical components of a PWA

The Shell Architecture

The maintenance of PWAs involves the separation of the dynamic and static content. Using an application shell architecture can help cover the core elements of the design and make the application sprint up. It works well with apps having changing content and stable navigation.

Manifest JSON

This component acts as the central place to store the metadata of the PWA. It can include the URL for launching the application, its name, the icon on the home screen, etc. It allows the developer to customize how the app will be shown to the user. The developer can have complete control over the appearance of the application. Like native applications, the developer can customize splash screens too.

Service Worker

It is JavaScript that runs separately from the application and can respond to the user interactions from the pages it serves. It allows the caching of an application shell and loads the data instantly when the user visits again. The dynamic content refreshes again when the connection to the application is back. It also helps in providing an exceptional user experience and improved performance of the app.

In addition, it helps in background synchronization that is necessary till the connections are back. The servers can send updates once the link is back. It can also send push notifications when the browser isn't working.

The Use of TLS Protocol

Security is among the critical PWA features, and the application should be accessed over the TLS protocol. It will require you to install an SSL certificate that happens to be a prerequisite to work on a PWA. This will form a secure and encrypted connection between two entities. It will also ensure the integrity of the data and the authenticity of the connection being established.

Few Critical Progressive Web App Features

More Features than a Responsive Website

Responsive websites are a necessity as they score SEO brownie points. It also helps to enhance user experience and can be viewed seamlessly over all devices. It can provide app-like features too. The PWA has specific characteristics and does more than your responsive website. It includes features like allowing push notifications and offline capabilities like serving offline content and providing a faster cache mechanism.

Improved Performance

When the service workers are registered, it allows you to control what is being cached entirely. It ensures an enhanced user experience for your audience. Research has shown that first paint improves with a PWA and provides an instantaneous experience for visitors. The benefit is not as pronounced for mobile users as the service worker threads are not so optimized.

Browser Compatibility

As these applications are built on the principles of progressive enhancement, they can provide the content without any bias for the type of connection or the browsers used. The use of PWAs can provide sophisticated versions of the web pages to the latest browsers versions. The PWAs can be compatible with any device, and your audience can have a unique experience regardless of the device they use.

Easy Access

The PWAs utilize features that are like both mobile apps and web apps. One of the significant benefits of PWAs is that they do not require publication on app stores. They are readily available through search engines and also sharable through a URL. The installation is simple too, and you can visit the site and install it on the device screen. They come with automated updates and can be found easily too.

A Mobile-First Approach

It is necessary to offer a seamless experience across all devices that ensures a higher ranking during a keyword search. The features of progressive web apps can be built with ease and combine the benefits of a native app and a website at low costs. They allow work offline and ensure optimal experience on the devices on which the website is loaded. It does not stop providing a great website but ensures the ideal visitor experience who look forward to revisiting your website.

Easy Installation

One of the critical PWA features is that they do not require publication on the app stores. Instead, one can readily browse the websites through search engines. In addition, they can be easily accessible by installing them onto your device. Hence, it can reduce the cost of developing expensive mobile apps.

Apart from being serviced through web browsers, it can work on smartphones too through web browsers. No lag time is required to get the app published in the store. They are easily installable on the device by clicking on the "Install" button. It will load the application onto the home screen, and the user can readily visit it by clicking on the icon.

Benefits of using PWAs

Score SEO Brownie Points

It is necessary to rank higher during a keyword search. One of the essential keywords ranking parameters is to have a responsive website. It is among the crucial progressive web app features, and you can ensure cross-browser support too. The apps can load fast even on 3G devices, provide enhanced user experience, and load offline.

Users engage more with PWAs

Studies show that users move the most used apps to the home screen. Hence, the PWAs can readily compete with the native apps and gain more eyeball share too. The simplicity of accessing it coupled with the fact that it loads fast ensures more engagement by the users. The push notifications also enhance usage and distribution than the native mobile apps. Various industry behemoths and e-commerce brands have benefitted from the use of PWAs.

Savings in Development Costs

It is a fact that mobile applications have a tremendous associated cost. Moreover, there is also a cost associated with publishing the apps onto the app store. The use of PWAs minimizes the costs associated with designing a mobile application. Most developers use a web stack in the development of the PWAs. Hence, it leads to reduced cost and effort in developing the PWAs. Moreover, you do not need to create an app for multiple platforms. A single progressive app can work well on all platforms.

Hardware integration

The web also allows hardware integration features, and there are several modern APIs that you can build into web applications. In addition, you can include several next-gen progressive web app features like real-time camera, geo-location, biometric authentication, payments, motion sensors, etc. Thus, it makes the PWA a cheaper option than developing a native app.

Conclusion

As the competition between brands increases, they are always looking out for optimal ways to increase conversions. There are various options available, but Progressive Web Apps offer a cheaper and more feasible option. As a result, they can improve SEO brownie points while ensuring an improved user experience.

It is advisable to undertake discussions with an industry leader who can help you finalize the features that would be beneficial for your business. Our team of experts has immense experience in developing such applications for renowned brands cutting across multiple industries. In addition, we can understand your workflows and the goals and objectives you have from the PWAs. We are just a phone call away.

Aug 20 2021
Aug 20

Creating a website is a very labour-consuming process. It requires quite a lot of time and resources. However, the people involved in building webpages and applications noticed that some elements repeat at times. In order not to reinvent the wheel, they began to isolate the repeating elements as components. In this text, I'll present how the components can be used based on the example of the Drupal distribution Droopler and the Bootstrap library.

What are components?

Components are elements that are reusable in different parts of the website. They allow for fairly quick creation and easy maintenance of pages and applications. The additional advantage of components is that if a change is required, you don't have to modify every element of the page, you only need to make the correction in one place. The change will automatically appear in other parts of the site that contain this component.

Bootstrap library

Bootstrap is a set of tools and components that simplify the creation of websites and applications. Using this library may speed up your site building as Bootstrap includes ready-made solutions for creating adaptive templates, forms, tables, navigations, etc.

This library mainly contains the CSS and JavaScript files that implement various ready-to-use components. After connecting the library, by using specific CSS classes you can quickly and easily modify the elements on a page.

There are several ways to use the Bootstrap library in Drupal. One of them is to use a base theme on which you can build your own. The most popular base themes are Bootstrap – which is based on the third version of the library, and Barrio – which was built on the basis of Bootstrap 4/5.

Bootstrap components in Droopler

Droopler is a Drupal distribution designed to quickly build webpages. It differs from other distributions in that it provides a ready-made website out of the box. You just need to add your own content to it.

Droopler is built on the basis of the Barrio theme, so it has all the benefits of Bootstrap. There are several ways to use the components of this library in Droopler. The first and easiest is adding the necessary elements to the content of the blocks.

When adding a new block, you should place the HTML code with the classes specified by the Bootstrap documentation in the section for entering the content. In order for the entered code to be recognised by Drupal as HTML, before entering the content you must activate the "Source" mode using the button in the field panel. After adding the HTML code, you need to turn off the given mode.

Adding the HTML code with the classes defined in the Bootstrap documentation

 

In this case, after saving the block, we get two buttons. The shape of the given buttons was determined using the "btn" class, while the background and text colours were assigned using the "btn-primary" and "btn-secondary" classes.

The buttons that are created after saving blocks with a new HTML code in Droopler

 

The second way to use Bootstrap components in Droopler is more difficult. It consists of adding your own theme based on the Droopler theme and modifying the source code. To do this, you need to use one of the starter kits found in the Droopler base theme directory, and then you can create your own solutions using the Bootstrap components.

I've shown you how to add basic buttons using the Bootstrap library. Now I'll present a few more examples of advanced components.

Dropdown menu

A dropdown menu is a very useful component for a website. It allows you to store and display information and links in a fairly compact block, which makes it possible to efficiently use the web page's space and allows you to include more information. This component consists of two parts: a block with elements, which is hidden by default, and a button, which – when pressed – makes a particular block appear.

A dropdown menu - a Bootstrap component in Droopler

 

In the block itself, you can put headers, links, which in turn can be active or disabled. These parameters can be set using CSS classes provided by the Bootstrap library.

Progress bar

A progress bar is another useful element of a website. It allows the user to immediately see the progress of the performed activity, which improves the user experience.

A progress bar, a Bootstrap element that shows a progress of some activity

 

As with other components, you can modify the style, colour and other parameters of a progress bar.

Tabs

Bookmarks are one of the menu types used on a website. They are useful for switching between the contents of pages, allowing the user to see more information in a smaller space.

The tabs are a Bootstrap component which allows switching between content on a page

 

The bookmarks created with the Bootstrap library may contain active and disabled links, as well as the already mentioned dropdown menu.

Bootstrap Components - summary

Using the Bootstrap library components to build a webpage is a very effective approach, because it allows you to easily build and maintain the pages. I've shown a few examples of using components in Droopler, a Drupal CMS distribution. You can find more information about the available components in the documentation on the Droopler demo page.

Aug 19 2021
Aug 19

End-of-life (EOL) software is a very real problem. Whether your business is using ecommerce and customer relationship management systems across multiple platforms or relying on basic scheduling and accounting software, you will at some point reach a technological expiry date.

Listen to this post by using the player, or subscribe using Spotify, Apple Podcasts, or Google Podcasts.

Acro Media has developed a 6 step action plan for handling software end of life. View it here >>

When a system reaches end-of-life, the creator/owner of the software/technology no longer delivers support services for the product. That can include technical support, hardware or software upgrades, bug fixes, security patches, or feature development. In short, the system gets abandoned by its owner. 

Software becoming obsolete can cause all sorts of problems. Here are a few of the  risks to your business in running EOL software:

1. Compromised security

If you hold people's information and data, you are responsible and liable for it.

End-of-life technology receives no security updates. No bug fixes. No patches. No monitoring. Your technology is dead in the eyes of the creator. That means your security is completely compromised, not only for the platform that is EOL, but also potentially for any others that connect to it.

At a minimum, your system can be accessed and your content or records edited, stolen, or deleted. If you have any user data, financial data, or sensitive information, you could have a major problem. The monetary and reputational costs could kill your business.

A survey of 2,600 CIOs across the U.S. found that the number one concern was keeping systems and information secure. By being proactive and not letting your systems reach their end of life, your company is better positioned to ensure that your data and your customer’s information remains secure.

2. Lack of reliability

If you were a taxi driver, would you willingly drive an old car that is no longer maintained and has sporadic issues? Of course not. That’s because your livelihood relies on the economics of your vehicle. 

But that is what you are doing if you continue with EOL software. Old software is less reliable and more prone to failure. 

Maintaining EOL software is complex and expensive, and integrations into other systems require even more time-consuming and expensive workarounds. 

Regular updates, bug fixes and support, in general, goes away at EOL, which makes system maintenance much more difficult. Instead of spending your resources on new tools or building better customer experiences, you are stuck paying top dollar for fixes and updates no longer covered by the software creator.

This brings us to our final point...

3. Higher operational costs

EOL software costs more, whether it’s through lost/stolen data, updating and maintaining with third parties, legal liabilities, or lost revenue from downtime or issues. 

The sticker price on a new system can sometimes seem large and prohibitive from a business point of view. But, consider the consequences of a security breach or a major bug. The peace of mind that comes with having a fully secure and supported system that won’t arbitrarily go offline is worth its weight in gold.

Another benefit from moving away from EOL software is the opportunity to review your company's entire technology stack/architecture. If you have software moving towards EOL, it's essential to look at not only replacing the single system but also assessing your whole technology landscape for opportunities to make larger improvements.

Conclusion

Ultimately, EOL technology is costly to your business in multiple ways. Most technology providers give lots of notice when one of their products is going to be unsupported. That gives you time to assess your options and determine the path you should take. 

To help you assess your options download our 6 step action plan for handling software end of life.

Download the End of Life Playbook (PDF)

Editor’s Note: This article was originally published on June 2, 2020, and has been updated for freshness, accuracy and comprehensiveness.
Aug 19 2021
Aug 19

The eCommerce industry has been growing exponentially, and statistics show that it is bound to evolve further in the future. The higher penetration of smartphones and high-speed internet has additionally added to the growth of the industry. It has led to brick-and-mortar also taking the online route to boost revenue. The competition is immense, too, that will require you to adhere to the eCommerce best practice to boost sales.

As the number of players in the market increases, the competition is bound to grow more challenging. While it is essential to bring in more visitors to the website and entice them towards a sale, you must also ensure adequate customer service to ensure loyalty. This article will discuss some of the eCommerce site best practices that can help your business increase conversions.

Essential eCommerce Best Practice for your Website

Make your Website Responsive

An essential eCommerce best practice is to make the website responsive. More than half of the visitors will be using their smartphones to visit your website. Hence, the website must be responsive for mobile users too. Moreover, search engines also provide weightage to the responsiveness of websites.

The website must load quickly on different devices with ideal loading speeds. The font size and the CTA buttons must be suitable for mobile users. The navigation must be optimized for mobile users too.

responsive website design

An Omnipresent Search Bar

An incoming visitor would be looking for the search bar right away and must not scroll up to find it. Therefore, always ensure that the search bar is present where the visitors would like it to be. In addition, given that half of the visitors would be using their smartphones, it is also necessary that the search bar is always viewable by mobile users.

A prominent search bar can help to boost business, and it must be intelligent too. It must suggest acceptable keyword terms and make it easier for the visitor. If no products are available for a particular keyword search, it must return the products that nearly match the search terms.

Remove Clutter

One of the ideal eCommerce website best practices is to remove the clutter on the home page and subsequent pages. Too much content on a web page may not be suitable for visitors as well as search engines. The visitors will get bewildered if they are faced with too much information when they visit your website. Similarly, search engines will not understand the content on your site.

You must categorize the website so that the relevant products are tagged to their respective categories, and only the relevant content is present on the homepage. Too much clutter on the website will also make it challenging to find the call-to-action buttons.

Use the Best Quality Images

You must use the best quality images on your website. It is known that the best quality images can easily attract the customer's attention. It can also help them have a better idea about the product they are going to buy. Therefore, it is suggested that you utilize your content rather than requesting the suppliers for images.

It would help if you also had the pictures of the products from different angles that help to provide the customer with an overall view of the product. If you do not have the best quality images of the products, the chances are high that you will lose out on conversions.

appealing images

Have Streamlined Workflows

You must get in touch with a responsive eCommerce web development company to increase conversions on your eCommerce website. They will have expert UX designers who can design the optimized workflows for your website. The workflows across the website must be simple, with the products categorized across proper heads.

It is essential to ensure a better user experience, and the visitors must not find it difficult to search for various products across the site. The visitors must find it easy to move across multiple pages on the website. The website must also understand their behavior and provide them with good product suggestions.

Put the Value Proposition Upfront

The visitors must come to the landing page and have a complete idea about your product offerings. The best eCommerce homepage practices suggest that the value proposition must be present on the banner and resonate with the visitors. Hence, you must assess the buying behavior of the visitors and create the banners accordingly.

You can also have the targeted discounts on the banner sparingly or at ideal places on the landing page. There has been an eCommerce best practice that suggests not to include carousels on the banner. It prevents the visitors from being at ease on the website and may bounce off.

Take Services from a Premium Web Host

Your website should load within the optimal time. The potential customers will move away from the website if it takes too much time to load. It will also increase the website bounce rate and affect your SEO negatively. To prevent losing out on customers, you must take services from a premium web host.

You must enter into agreements that will ensure that you are provided with adequate resources to ensure the fast loading of the website. It will also prevent glitches on the website and reduce downtime of the website.

best possible hosting

Provide your Contact Details Upfront

The visitors must trust the business that requires you to place the trust factors upfront. For example, the contact details of your customer support team must be put upfront. A critical eCommerce best practice requires you to ensure that your customers contact your team readily if they face any issue.

A detailed FAQ can help you to answer most of the queries of the customers. You must utilize these interactions to update the FAQ section. Using next-generation technologies like chatbots can help you address most of the customer queries.

Display Adequate Product Information

As an essential eCommerce best practice, you must ensure that the visitors can go through detailed information about the products they are looking for. Therefore, you must optimize the product descriptions for search engines. In addition, you must also use the product descriptions to maximize the searches within the website.

Keep in mind that detailed information and comparisons with similar products can help the customers choose the products that suit them. In addition, high-resolution images along with detailed product information can help to increase conversions.

Provide Additional Information Upfront

The customers will also seek information about the policies of your business. Many of them would prefer to go through the Return and Exchange policies before making their purchase decision. The Shipping policies are equally critical for your website.

You must also provide information about your business and the mission and vision of your website. The goals and objectives of your business are equally important. You can club them together into a single webpage. The links to the policies and the company details can be placed at the footer of the website.

Optimize the Checkout Process

Studies show that card abandonment is abundant and requires you to optimize the checkout process too. The process should be simple, and you must provide adequate payment options for the customers. You can help the customers through mouseover aids that can help them understand the forms better.

The order summary must show up during the checkout process that helps to check on the cart before finally buying the products. The checkout page must also show the badges that can assure that the payment process is secure.

easy checkout

Use Reviews and Testimonials

Your audience would look forward to hearing from the current customers about the credibility of the products sold on your website. Therefore, you must entice your customers to provide reviews and testimonials of the products they buy. Consequently, it is also essential to allow only genuine reviews on your website.

You can send out emails requesting them to provide reviews for the products. Even loyalty discounts for providing reviews can help. Do not worry about a few negative remarks, as it would make the overall reviews look genuine.

Conclusion

While it may be true that the eCommerce industry is seeing tremendous growth, you must keep in mind that running the site is not easy. There are several critical factors to keep in mind to improve mindshare among your audience. Your website is vital for your outreach, and you must adhere to the eCommerce website best practices to improve conversion rates. You can get in touch with the experts for a detailed discussion to enhance your website. We would be eager to help!

Aug 18 2021
Aug 18

You Might Also Like

One of the great joys of front-end development is being able to wrestle a bunch of rectangular elements into different shapes and arrangements to create beautiful, intuitive layouts.

One of the great frustrations of front-end development is the unexpected interaction and overlapping of those same elements. Struggling to arrange elements along the z-axis, which extends perpendicularly through the computer screen towards and away from the viewer, is such a shared front-end experience that an element’s z-index can sometimes be used as a frustrate-o-meter gauging the developer’s mood.

The key to maintainable z-index values is understanding that z-index values can’t always be directly compared. They’re not an absolute measurement along an imaginary ruler extending out of the viewport; rather, they are a relative order between elements within the same stacking context.

This means that to truly understand how two elements will overlap, we need to understand the stacking contexts in which those elements are contained.

What is a stacking context?

A stacking context is a three-dimensional conceptualization of space on a two-dimensional screen and a boundary outside of which an element’s z-index does not matter. You can think of stacking contexts as folders full of paper on a desk. Each folder can have multiple pages inside, and the orders of those pages can change, but no matter how hard you try, no pages in the bottom folder can be on the top of the entire stack. Each folder is its own stacking context, and each page’s order is its z-index. This analogy can be carried further by putting the folders into different boxes and organizing them on a shelf. Similarly, stacking contexts can be nested and reordered themselves.

With no additional CSS, each webpage would have a single stacking context created by the document object in your browser’s CSS Object Model. Elements within that single stacking context will overlap with each subsequent element stacked above the first like a deck of cards with the first element child at the bottom and the last element child at the top. (See default stacking context on codepen)

So how can we make a new stacking context? The easiest way is to position an element with either absolute or relative and to give that element a valid z-index value other than auto. We create a new stacking context by telling an element precisely how it should be positioned along the z-axis. We can then expect all of that element’s children to arrange themselves within a subset of that imaginary three-dimensional space.

Besides z-index, CSS properties that force the browser to consider how elements should be laid out and painted will create new stacking contexts. Elements that have declared any transformation create a new stacking context, as all transforms are calculated and applied as a single operation. Since elements can transform along the z-axis, they create a new stacking context. Elements that have a clip-path, or mask value, or an opacity of less than 1 require the browser to compute their order in the stacking context to know what to paint below them. Elements that have their contain or will-change properties set create a new stacking context to minimize the costly operations of re-calculating the layout and re-painting the canvas.

How do I debug stacking context?

As you may have anticipated, with so many different properties potentially setting stacking contexts, it can be difficult to conclude why elements may stack the way they are. Luckily, there’s the CSS Stacking Context Inspector browser extension available for Chrome and Firefox.

This browser extension creates two new features in your browser’s devtools. First, a new “Stacking Contexts” panel allows you to expand each stacking context to see what is inside it. Secondly, an elements sidebar pane to view an element’s parent context, its sibling sub-contexts, and if this element creates a new stacking context, why.

If you’d like to play around with stacking contexts or try out the browser extension, I’d invite you to check out my Stacking Context Playground on CodePen.

Can I see a real-life example?

Sure! Below is a example of a front-end component with lots of overlapping elements. When viewing a page authored in a left-to-right language like English, here’s what the page band looks like:

We have the band’s content on the left-hand side, and the right side is a big block link that launches a modal to play a video (That link has a semi-transparent background to help show the layering of the elements). This band also has a background video, and we give users the option to pause the background video with the small round button in the bottom right corner.

This works as intended right now, but as soon as we set the page’s direction to right-to-left for languages like Arabic, the button gets buried and is no longer clickable!

Your first instinct here might be to look for a z-index disparity between the LTR and RTL style rules, but there aren’t any. Something else is causing the layer order to change - so let’s open the Stacking Context Inspector in our devtools.

When looking at the Stacking Contexts panel, the left side shows a nested list of all elements that create a new stacking context, in the order the elements appear in the DOM. At the top of this list is the document, which always creates the initial stacking context, and then nested below it are the three elements on this page that create new stacking contexts. If we were to expand each of those elements, we’d see any further nested stacking contexts. When we select a stacking context on the left-hand side, in this case #document, we can see child stacking contexts on the right-hand side listed in z-index order. 

Here, I can see that the background video container creates a new stacking context and is layered beneath both the written content and blocklink containers. Because this element creates a new context and is layered beneath its sibling contexts, there is no way to show the play/pause button above the content and blocklink container elements. We saw in the LTR version of the band that the button did appear above the containers.

So why is the background wrapper suddenly creating a new stacking context?

By inspecting the element that’s created the stacking context we are interested in, we can then use the Stacking Contexts sidebar to get more information. In this case, “The element has one of the following properties set: transform, filter, perspective, clip-path, mask, maskImage, [or] maskBorder.”

Suddenly, it makes sense; this background video container is given a transform rule to mirror the video for RTL pages! Moving this transformation from the container to the actual video iframe prevents forming a new context here, and my button’s z-index rules will be scoped to the document root again!

With only a few other minor styling adjustments, I can now display a fully mirrored version of this band while maintaining the proper stacking order of the background video, the content, the blocklink, and my background video controls.

Conclusion

Debugging how your page’s elements stack doesn’t have to be difficult. Understanding how new stacking contexts are formed is based on a fairly simple set of rulesets, and the CSS Stacking Context Inspector tool makes it even simpler to find and sort through those contexts. Now that we can decipher exactly how and why our elements are layered, we can bring an end to the practice of setting a sky-high z-index and praying that it works. To review, stacking contexts are most commonly formed by:

  • elements that have position values fixed or sticky
  • elements that have position values absolute or relative with a z-index other than auto
  • elements that have a non-default value in a CSS property that requires the browser to do additional layout or paint operations such as opacity, transform, clip-path, mask, or filter

For a complete description of the properties that cause new stacking contexts to form, see the MDN page on Stacking Contexts

Aug 18 2021
Aug 18

D8cards.com (Drupal 8 cards) started as a group study exercise for my team to help the team learn Drupal 8, especially since there was a significant learning curve between D7 and D8. More about it here. More about it here and here.

The domain expired some months ago, which I did not renew. Many people reached out on twitter and email looking for an archive of the same. Someone was looking for it on reddit. Posting an archive of the same here.

The exercises do remain relevant to D9, and can be good challenges for anyone comfortable with Drupal Site Building and getting started with Module Development.

Download the cards here.

Sample Card

Download the cards here.

Additional Resources:

Aug 18 2021
Aug 18

APQC, the American Productivity and Quality Center, is a nonprofit organization with a mission to help organizations with best practices and methods around increasing productivity and quality. APQC provides management expertise in knowledge, process and performance, finances, human capital, and supply chain management and processes

In this Tag1 Team Talk, John Tesmer, the Executive Director of Information Technology, and Jim Gilliland, Senior Architect and Lead of the Technology team at APQC, join Tag1 Managing Director Michael Meyers to talk about what the APQC does, and how technology plays a critical role in their mission. They’ll also talk about the organization’s history with Drupal, and how they’re moving forward with newer versions.

[embedded content]

In Part 2, we'll talk about APQC's Drupal upgrade and the planning it required.

For a transcript of this video, see Transcript: APQC: Why Drupal, Planning a Migration - their Intro and Background.

Photo by Pankaj Patel on Unsplash

Aug 18 2021
Aug 18

So you head outside for a break maybe to the park because it's a beautiful day. You're sitting there relaxing, and you get a call from a client asking for help with a site. If you're like me, you don't go anywhere without your iPad.  Can I help the client without leaving the serenity of the park?  The answer is, "Yeah, I can troubleshoot it right now from here." 

Let's take a look.

With  Drupal, the news is actually pretty good!  Literally, I can touch with my finger and get anywhere within the UI. I can even just type the title with my pencil and the iPad recognizes it.

Can You Manage Your Drupal Site On An iPad?

I have a keyboard if I need it as well. 

Can You Manage Your Drupal Site On An iPad?

Of course, if I'm using my Magic Keyboard, I've got the full keyboard experience as well as the trackpad.

You have the ability to pretty much work anywhere in the Drupal UI that you want.  Almost everything in the UI works. If I want to go to the menus and update my main navigation, I can click and drag and drop just like I could with a mouse.

Can You Manage Your Drupal Site On An iPad?

With iOS, there's a number of options for both ssh-ing into your site as well as sftp so you have complete access to the command line.  I can run Composer commands and edit files as I need to.  There's also a couple of other options here: Coda, Working Copy (if you're working on a branch from a git repository), and Textastic.

 Can You Manage Your Drupal Site On An iPad? 

None of these are free, but they are not that expensive.

Now for the Bad News (UPDATE - there is no "bad" news - read below)

There's really only one thing in the UI that doesn't work, and it's kind of a big one.

I'm going to head back to that node that I just created and click Layout.

I can do anything I want I can

  1. add that block in from the article media
  2. hide the label
  3. change it to a reference entity
  4. add the block

And that works except the quick edit icons are now missing.  This will be true across the board. Even in Chrome, you cannot access the quick edit icons. Even with the trackpad, when you're using the Magic Keyboard.

Can You Manage Your Drupal Site On An iPad?

So while I can add things to my layout, and I can move fields around within my layout, I can no longer edit it or configure it. I can completely remove a section, but of course, that's kind of starting over.  

UPDATE:

I'm filing this under "You learn something new every day" - HUGE thanks to Xaq (see comment below).  All you have to do to show the pencil icons is click the Edit button at the top right of the administration screen.

edit button for pencils

So, contrary to the video and my comments - you CAN TOTALLY manage your Drupal site from your iOS device!

This has been OSTips from OSTraining.  I'm Rod Martin. Thanks for joining me today in the park, and we'll see you next time.

[embedded content]


About the author

Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio.
Aug 18 2021
Aug 18

Did Config Management Initiative in Drupal do the exact opposite of what it intended to do? Is the lack of a documented Config Management Strategy creating a barrier for teams to adopt Drupal? Can team be successful with using Drupal without investing heavily to figure out their own Config Management Recipe?

Let us explore with a simulation of what would be an experience of an engineer trying to implement a basic config management strategy on their project, and how it ends up with a chicken-egg problem, ultimately leading to a vortex of config management modules.

Configuration Management in Drupal has been ever changing. Drupal 7 had features as a go-to standard to isolate configuration from database and to version control it. Drupal Configuration Management Initiative resulted in a configuration management interface in core, which was supposed to be the holy grail of all config management problems in Drupal 7. Which it failed to be. Features, which was supposed to be extinct by now due to CME, is now becoming popular again, due to the limitations in Core CMI. And there is a plethora of exploding set of Config Management modules in Drupal 8/9, that make it challenging to decide “What is a good config management strategy for my Drupal project?”

There is no one-size-fits-all documented way of configuration management in Drupal. Which adds to its learning curve. Sticking to core CMI includes challenges of having to depend on a database copy to setup new environments, or overwriting the UUID of the site in some ways, to get the configuration to be imported in a newly setup environment. While this is addressed in Drupal 8.6 to some level, but it still has a chicken-egg problem that we will discuss below.  Further, you can’t pull to your environment config changes that your team member just pushed in, unless you export your configuration before you pull your team mate’s changes.

Trying to simulate here the journey of what would be that of a developer or a tech lead, trying to accomplish basic configuration management on their project, with a very basic objective, looks like.

Objective:

  1. Be able to setup an environment from scratch, with all required configuration, without any dependency of an old import of a database dumps flying around in Slack, but just using the codebase
  2. Ensure changes to configuration are version controlled
  3. Allow incremental changes to configuration to be added, without having to rely on complete dump of configuration, that often have unrequired changes from local environment. 
  4. Allow team members to work in parallel, often on same configuration, allowing them to merge their incremental changes

Initialization of the project:

  • Clone from a composer-based template and not in the legacy way
  • Stack to use : Lando or DDev. Both look great. I picked Lando. But DDev should be equally good. 
  • Do a composer install to get all dependencies
  • Add Config Ignore module, and drush as well (drush may not be required if you used the first template above, will be needed if you used the second one)
    composer require drupal/config_ignore
    composer require drush/drush
  • Proceed with composer install
  • Power up your local server - lando start - if you are using Lando
  • Install the site using drush si command
  • And your local site should be up and running now!
    (If you are using lando, you can use check the url via lando info)
    (If you are using lando, and you see a 404 instead of your Drupal homepage, run these 3 magic commands)
  • Change config sync directory in settings.php to below
    $settings["config_sync_directory"] = "../config/sync";
  • Ensure you have a proper .gitignore file. If you used the first template above, create one manually by copying this from template 2. 
  • Enable config ignore module
  • Add the following to config ignore settings via UI (We will discuss later why we are doing this)
    shortcut.*
    image 8
  • Remove the remnant sites/default/files/config_* directory you may have from the initial setup
  • Make any initial configuration changes that you see required, content types, or other configuration. 
  • Do an export of initial configuration via drush cex. This will populate your initial site config into config/sync directory
  • Note the UUID of the installation -
    drush config-get "system.site" uuid
    Communicate this to your team, or add it to the readmefile. This is required for the rest of the team to setup their local environment later. 
  • Check in your code to the repo that the team would use. 

Setting up local environment by other team members

  • Clone from the repo
  • If using lando - lando init (if lando.yml was checked into the repo during earlier project setup, this is not required. Checking in that file might be required, only if you are trying to freeze specific versions of php, or some custom tooling to lando). Use options - Current Working Directory, Drupal 9, web, any-name for lando init
  • Run composer install
  • Up your servers (lando up if you are using lando)
  • Now, if you run a site install, and try to import the config from the config sync folder you have on your site, the site would not know the existence of config/sync directory. 
  • But, there is a deadlock. settings.php would not exist until we ran install. But if we run install, it would create a site with a different UUID and not honoring the existing configuration. We could run drush si --existing-config , but how would it know about the config/sync folder as we haven’t updated it in the settings.php which doesn’t exist yet.
    image 10
  • We stumbled into the popular chicken-egg problem with Drupal CMI that is discussed here and here in detail.
  • Let us work around this, by doing a regular installation of the site (without using existing config, then manually change the UUID of the site, then update config sync directory in settings.php, and then doing a drush CIM. 
  • Run a simple drush si (for site install)
  • Change the UUID of the site to the UUID mentioned in initial setup
    drush config-set "system.site" uuid  5a5ccb99-8411-42e8-a8fe-3c4b2d827910
  • Now you think you could run configuration import (drush cim). That still won’t work because you there are some configuration related to shortcut module etc, that would throw an error like this
    image 12
  • We added this to config ignore in the project setup, but that config is not imported yet, so it doesn’t know that it should ignore that shortcut config. 
  • So let us enable config ignore manually, and add shortcut.* to config ignore, and try the import again.
  • Now run a config import (drush cmi), and you have your local instance ready, which is a clone of the instance that was setup initially, without any transfer of database dumps, across slack.

So far, so good!! It wasn't straight forward. Had to plug in config ignore to get the config sync to work. Had to work around the chicken-egg problem for getting the site install to work with existing configuration. But we got there!

Workflow for feature development story

Looks like what was a very robust configuration management system that Drupal had with features in Drupal 7, has expanded into a large system of scattered and often abandoned maintained modules, to accomplish a simple objective of having configuration in code, allowing teammates to work in parallel. CMI looks to have accomplished the exact opposite of what it started to do in the first place.

This creates a barrier of entry for organizations to start with Drupal, as there is no documented way of handling configuration management that allows a few team members to work in parallel, unless they are working on completely unrelated items not touching configuration that other team members are working on.

Unless a team have their own recipe figured out, with a combination of techniques and combination of modules that work for them and their customers, they can hardly expect any success with having a sustainable configuration management strategy.

Why is it so hard to have one prescribed configuration management strategy that works for most (if not all) of the Drupal projects, allowing parallel collaboration between team members?

Most teams have their recipes figured out with their own combination of tools and techniques using some part of core CMI, and Features module (yeah, Features again, which comes with its own set of caveats and challenges, some of which you can see in this video), and a set of Config Ignore, Confit Split, and Config Merge, Config Sync, Config Normalizer and other modules.

But there is definitely a need to remove the barrier to entry, allowing more teams to adopt Drupal, without having to invest heavily upfront in discovering a secret sauce combination of modules and techniques to get basic configuration working for a simple team that just a few people working in parallel on configuration.

There are multiple configuration management strategies that I have been exposed to, from the teams that I have worked with in the past few years. Not just calling out the problem. And I acknowledge the tonnes of work that went into CMI from many volunteers. Although, as with anything, we should look at things from the value it adds, and not just the intent and effort. 

As with any opensource community, you have as much access to solve the problem, as you have access to talk about it. As my part to solving this problem, I would try to analyze them against how they fit into the problem statement defined in the objective above, and try to document one such simple strategy either here on somewhere on drupal.org.

Meanwhile, may be, there is already a popular one that I failed to notice. May be, this is not even a problem, and I am just missing some pieces of the puzzle that are not very obvious.

If you know of one documented config management strategy that qualifies the below criteria, drop a link in the comments.

  • Spinning up local instances from repo, without depending on a database dump
  • Version control config
  • Allow 3-way merging of config from local and upstream
  • Is documented with a recipe of modules and techniques to use.
Aug 17 2021
Aug 17

You Might Also Like

The Type Tray and the Page Templates contributed modules can make your editors happier when creating content in Drupal. The goal is to make the Content → Add page more friendly to editors on sites with a large number of content types.

Type Tray

This module improves the list of content types that editors see when they visit the Content → Add page. It does that by providing:

  •  The ability to indicate icons and thumbnails that visually represent the content types
  • A more user-friendly layout, which can be switched between Grid and List
  • An in-place full-text search
  • The ability to display quick links to existing content of a particular type
  • The ability to add a content type to a “Favorites” group per Drupal user.

Start by installing and enabling the module:

$ composer require 'drupal/type_tray:^1.1'
$ drush en type_tray

While not mandatory, defining a few Categories to group your content types is highly useful. 

Navigate to Configuration → Content Authoring → Type Tray Settings ( /admin/config/content/type-tray/settings ) to create them: 

Now edit each of your content types, and select the “Type Tray” vertical tab, to define additional information on each one:

Optionally, you can specify an icon and a thumbnail, which help users quickly visualize the kind of content this type is destined to.

After configuring this information on your content types, you are ready to navigate to the “Content → Add” ( /node/add ) and see the difference:

Demonstration of the Add Content page using Type Tray

Page Templates

This module allows you to convert any existing node into a “Template,” which editors can use to kickstart their real content.

Similar to Type Tray, download and install using your preferred method.

$ composer require 'drupal/pate:^1.0'
$ drush en pate

We start by enabling the functionality in the content types we are interested in. Edit the content type again, and in the “Page Templates” vertical tab, mark the corresponding checkbox. 

Now let’s create some templates.

To avoid unintended content disclosure, all templates are required to be unpublished at all times. This means we need to create a node of this type, make sure it’s unpublished, and then click the “Page Template” tab:

Again, to prevent accidental edits, while a node is converted into a template, further modifications (for example, publishing it) are not allowed. You can always “de-templatize” it at any point if you need to adjust how your template looks.

Once a content type has at least one template, we now have a new page available at /node/{type}/templates, where we can:

  • See a list of all templates for that content type
  • Click on a preview to check how the template looks when rendered
  • Use the CTA button to start creating a node from the template

 Clicking on the “Preview” button will open a modal where the template is rendered:

This renders the entire page in an iframe, where clicks are disabled to prevent accidentally navigating editors away. If you feel having all elements on the page is distracting, look at hook_pate_template_elements_remove_alter()which you can use to remove elements from the previewed content easily.

When editors click the “Use this template” button (inside the modal or from the main templates list), a new node is generated where field values were copied from the template node: 

Note that editors are always offered the alternate operation depending on the context.

When visiting /node/add/article a button at the top offers to create from a template instead:

When visiting /node/{type}/templates a button at the top offers to create from a blank node form instead:

Bonus: Integration with the Admin Toolbar module

If your site uses the drop-down administration menu provided by the admin_toolbar_tools module (part of the Admin Toolbar project), some adjustments are made automatically to make it easier to navigate the editorial pages where templates exist:

Using Type Tray and Page Templates together

These are two completely independent modules that can be used individually. It’s also possible to integrate a link to the Type Tray cards to the templates list if any templates exist. All you need to do is override the type-tray-teaser.html.twig template in your admin theme and print a link to the templates page. The result will be something like this:

If you don’t want to display the "Create from template" link when there are no templates for that content type, you can preprocess this in PHP and only send to the template the link if it needs to be visible. This is the code: 

/**
 * Implements hook_preprocess_HOOK() for type_tray_teaser.
 */
function foobar_preprocess_type_tray_teaser(&$variables) {
  if (!empty($variables['content_type_entity']) && ($variables['content_type_entity'] instanceof NodeTypeInterface)) {
    // If this is a "templatable" content type, add the "Create from template"
    // link to type tray teasers.
    if ($variables['content_type_entity']->getThirdPartySetting('pate', 'is_templatable')
      && \Drupal::currentUser()->hasPermission('use page templates')) {
      $variables['create_from_template_link'] = Link::fromTextAndUrl(t('Create from template'), Url::fromRoute('pate.templates_for_type', [
        'node_type' => $variables['content_type_entity']->id(),
      ]));
    }
  }
}

Join us in improving the Drupal editorial experience!

Have you tried these modules and would like to provide feedback? Please let us know in the issue queues:

Thanks for contributing!

Aug 17 2021
Aug 17

If I compare my present self to the me that was five years ago, I would see a lot of changes in the way I dress, in the way I speak and most importantly, in my professional life and the position I have gained in my career. For me, I am proud of all the changes. I deserve a pat on the back. 

The same is true for software, if humans change over time, the software they build is bound to change too. And that is what we are going to be talking about today. 

Drupal is 20 and its 9th edition has rolled out with the 10th being on the horizon. The software has undergone a lot of changes in its existence, there have been a lot of versions of Drupal and all of them have been outstanding. Like me, Drupal also deserves a pat on its virtual back.

Updating is often associated with moving forward and what possible harm can be experienced in doing that. So, it is evident that people are going to want to move towards the latest version of Drupal by updating to Drupal 9. 

With the last Drupal upgrade, being a major version, and the massive amounts of work and effort it required, some of us are hesitant and they are probably right. However, it isn’t needed.

According to Drupal.org

Drupal 9 brings forward all the features from Drupal 8 and carries on its continuous innovation with new features twice a year.

What this means is Drupal 9 is equal to Drupal 8 minus the deprecated APIs, making it a minor version upgrade. So, logically the upgrade would not mandate an overhaul of your site’s infrastructure and it doesn’t. The image below describes this notion pretty well. 

The differences between Drupal versions is shown.


In this blog, I would not be talking about the upgrade process itself, wherein we look everywhere from Drupal core to custom code, but the tools that would be needed for it. So, let’s start assembling the upgrade tooling and prepare for Drupal 9.

All the Drupal 9 upgrade tools are mentioned in a circular diagram.


Upgrade Status 

Drupal 9 readiness cannot be talked about without the mention of upgrade status. It is the paramount tool necessary to make the upgrade successful. 

So, what does it do?

It performs just about every major function required to make you ready for the upgrade. 

What might those entail?

Makes you update to a current version 

For the upgrade, you need to be on the latest version of Drupal 8, which can be either Drupal 8.8 or Drupal 8.9. Upgrade status not only checks the version you are on, but also suggests you to update so it doesn’t skip your mind.

Makes you check system necessities 

The upgrade also has specific system requirements, from Apache to php to MySQL, each one of these needs to be updated to a version that would align with the upgrade. And guess what? Upgrade status checks whether you meet the requirements or not. 

Makes you focus on contributed projects 

From system requirements, let’s move on to contributed modules. This upgrade tool has the ability to integrate itself with Update Status to remind you about the contributed projects and their update. Usually a D8 project is compatible with D9, so when you update them, they would still work fine with your Drupal 8 site.

Makes you address other compatibility issues

You would think that these three should be enough, but that’s not it. There are a whole bunch of Drupal 9 compatibility issues, which need to be addressed through a phpstan run. And upgrade status can do that as well. 

Upgrade status can also integrate itself with drush. You would need to install it with Composer. If I had to describe upgrade status and its work as a Drupal 9 upgrade tool, I would simply say that it is a tool that checks whether you are prepared and ready to hit the final update button.

Drupal Check

The next important tool to migrate to Drupal 9 is Drupal check. PHPStan was developed as a static analysis tool that can run standalone PHP executable from the command line.

What does that accomplish?

The accomplishments are on the lines of deprecated code. Drupal check would report any and all deprecated code being used on your site. In other words, it would check the correctness of your project by highlighting all the errors.

For a seamless upgrade, you need your system to be 100% Drupal 9 compatible, this includes the custom code, the custom modules, the contributed modules and the migration code, if you are upgrading from Drupal 7 to Drupal 8. 

But this sounds similar to Upgrade Status.

Yes, it does. There are some similarities between Drupal check and upgrade status in the fact that both work towards establishing Drupal 9 compatibility. However, I would say that upgrade status does so at a much larger scale.

Upgrade Rector and Drupal Rector

Would you prefer using an automated mechanism to catch the unwanted deprecated APIs before the D9 upgrade or would you prefer to do it manually? I am pretty sure your answer would resemble mine and be the former choice. 

And those automated deprecation checks and code fixes come with Upgrade Rector. This also allows you to make patches for both custom and contributed projects through suggestions. In essence, Upgrade Rector is Drupal’s integrated UI for Drupal Rector. 

So, what is Drupal Rector?

Before I get into Drupal Rector, let’s understand the story of Rector a bit. It is a tool that automated PHP code upgrades and comprehended PHP to make room for complex edge cases. 

Now, Drupal Rector took that concept and implemented it on Drupal. Its predecessor was Drupal 8 Rector. The goal here was to efficiently automate code updates from Drupal 8 to 9. 

What does it do?

As a set of Rector rules, Drupal Rector upgrades a deprecated API used in Drupal. You would have noticed that I did not use the plural form as in deprecated APIs because that isn’t the scope of this tool as of yet. 

Don’t be disappointed. Why?

It is because the deprecated API it targets accounts to about a quarter of all API deprecations. So, using this tool would save you a ton of time and effort and eliminate any chance of human oversight since the process is automated. 

Of course, there are future plans for the automated tool. The hope is to integrate it with Drupal.org and create Rector rules for as many as 15 most common deprecated API uses.

IDE

There is a chance that you might be using an Integrated Development Environment (IDE) or code editor to develop your Drupal code. 

What should you do if that is the case?

The answer is use an IDE or code editor which can comprehend and identify deprecations easily and effectively. 

Why is that important?

There are two reasons for that; 

  • One is related to visibility. If your IDE understands deprecations, it would very much make them visible even during the development process. 
  • And secondly, it would cancel calls to deprecated methods and further inform you of the right call to make.

PHPStorm is one example of an IDE tool that comes quite handy when considering an upgrade to Drupal 9.

Drupal.org Testing Support 

For further deprecation checks, the drupal.org testing support also provides ways to identify the unwanted.

You can do this by executing your module’s test suite and configuring it to fail upon reaching a deprecated code path, you would have to widen your test coverage for the most optimal results. There is also the option of using PHPStan to generate a build artifact that would not impede the testing of your project.

Again, there are some similarities between this tool and upgrade status and Drupal check because of the PHPStan run.

Module Upgrader 

The Module Upgrader is a tool more focused on projects that are on Drupal 7. Following a command-line script with the ability to scan the source of a D7 module, it can accentuate code that isn’t compatible with Drupal 8 or 9. 

How does it work?

  • It flags the code which needs to be updated; 
  • It highlights the API changes, if necessary; 
  • It can also convert the D7 code to D8 or 9 in an automated manner.

What is the outcome?

You would be left with updated modules that would not have any deprecated APIs in their code. Once that happens, you become one step closer to actually upgrading to Drupal 9. Remember that a Drupal 8 module without any deprecations is a good enough Drupal 9 module, because the only difference between the two is the deprecated APIs.

Migrate Tools 

The name is clear enough, Migrate Tools is a module that provides additional tools for running as well as managing migrations to Drupal 8. 

It works with Drush and provides commands for easy management. 

  • You can get see the list of migrations and their status; 
  • You can perform import and rollback operations; 
  • You can stop a running operation with ease; 
  • You can list fields available for mapping and view messages pertinent to migrations. 

These may seem small functionalities to have, but they can add a lot of convenience to make the easiest upgrade of the decade a lot more easy.

Migrate Plus 

The Migrate Plus project comes with extensions to the core migration framework functionality and examples. It can be easily implemented as configuration entities that are adaptive in terms of loading, modifications and then being saved.

For a better understanding of the Drupal 9 upgrade, you can read our blog Drupal 9 upgrade: FAQs and all your questions would be answered. And to learn more about Drupal 9, check out:

Conclusion

There you have it, all the necessary tools that would be required to kickstart your upgrade process, which needs to happen before November 21, 2021. To end this blog, here is a recent discussion that happened in DrupalCon North America 2021 that would highlight the same for you.

[embedded content]

Aug 17 2021
Aug 17

Our normally scheduled call to chat about all things Drupal and nonprofits will happen Thursday, August 19 at 1pm ET / 10am PT. (Convert to your local time zone.)

Drupal 8's end of life is fast approaching, so this month we'll be talking about what it's really like to upgrade a nonprofit site from Drupal 8 to Drupal 9. Is it as easy as advertised? Any tips/tricks/pitfalls to look out for?  If you've already done the upgrade, bring your stories and advice! If you're getting ready to do it, bring your questions!

All nonprofit Drupal devs and users, regardless of experience level, are always welcome on this call.

Feel free to share your thoughts and discussion points ahead of time in our collaborative Google doc: https://nten.org/drupal/notes

This free call is sponsored by NTEN.org and open to everyone.

View notes of previous months' calls.

Aug 17 2021
Aug 17

Simple PoC to decoupled the news section of a LocalGov Drupal website using Gatsby.

Aug 17 2021
Aug 17
expert installation difficulty

https://www.drupal.org/project/scheduler

Credits & Thanks

Thank you to:

About the Scheduler module

The Scheduler module allows content editors to schedule nodes to be published (and -- if necessary -- unpublished) at specified dates and times. This functionality allows you to plan and execute your content strategy, which is critical to SEO success.

Let me put it this way: Google loves fresh content. If a website has fresh content, it ranks better. But manually publishing a week’s worth of content requires you to remember to post each time you want a new piece of content.

The Scheduler module allows you to schedule several pieces at once, which fits nicely with your other automated digital marketing tools in addition to helping your SEO.

Note: Most of the configuration for the Scheduler Module can be done through the Drupal administration interface.

However, because Drupal’s Core Cron only runs once an hour (or in many instances, less often), you may want to configure the Scheduler module’s Lightweight cron for more granular control of the publication times.

This one step must be passed off to a developer or server administrator in order to make sure the scheduled published times can be accomplished.

Install and Enable the Scheduler Module

  1. Install the Scheduler module on your server. (See this section for more instructions on installing modules.)
     
  2. Go to the Extend page: Click Manage > Extend (Coffee: “extend”) or visit https://yourDrupalsite.dev/admin/modules in your browser.

    drupal scheduler module installation
     

  3. Select the checkbox next to Scheduler and click the Install button at the bottom of the page.
     
  4. You may get the message “Some required modules must be enabled” and “You must enable the Actions module...”. If you do, click the Continue button.

If necessary, give yourself permissions to use the Scheduler module.

  1. Click Manage > People > Permissions (Coffee: “perm”) or visit https://yourDrupalsite.dev/admin/people/permissions.

    drupal scheduler module permissions
     

  2. Select the appropriate checkboxes for:
     
    • “Administer scheduler”
    • “Schedule content publication”
    • “View scheduled content list”.
       
  3. Click the Save permissions button at the bottom of the page.

Configure the Scheduler module

  1. Go to the Scheduler module admin page by clicking Manage > Configuration > Content authoring > Scheduler (Coffee: “sch”) or visit https://yourDrupalsite.dev/admin/config/content/scheduler in your browser.

    drupal scheduler module configuration
     

  2. Select the checkbox next to "Allow users to enter only a date and provide a default time."
     
  3. Set the Default time to 10:15:00. That way, if a time is not specified within the node, it will default to this time. Servers use use military time, so in this case, we have specified 10:15 A.M., which is a good time to publish business content.
     
  4. Click the Save configuration button.

Set up the Scheduler module’s Lightweight Cron

If you’re working with a developer, you’ll need to ask them to set up the Scheduler module’s Lightweight cron for you. To get the appropriate information to make the request:

  1. Go to the Scheduler module admin page by clicking Manage > Configuration > Content authoring > Scheduler (Coffee: “sch”) or visit https://yourDrupalsite.dev/admin/config/content/scheduler in your browser.
     
  2. Click on the Lightweight cron tab at the top of the page. You will need to copy the section highlighted in the image below to put into your email to your developer.

    drupal scheduler module lightweight cron

Here’s a helpful email that you can send to your developer, making sure to copy the instruction portion directly from the Lightweight cron tab within the Drupal interface.

Dear developer,

We are trying to complete the configuration of the Scheduler module within www.oursite.com. However, we will need your assistance to set up the Lightweight cron, which will allow us to publish content in a timely manner.

The instructions can be found here but are included below: https://yourdomain.com/admin/config/content/scheduler/cron

***Paste the instructions here that you copied from the area of the red box from your website (see above).***

Please let me know when this has been set up.

Thanks!

your name
Awesome Marketer

Configure Each Content Type

  1. Go to Content Types by clicking Manage > Structure > Content Types (Coffee: “content types”) or visit https://yourDrupalsite.dev/admin/structure/types in your browser.

    drupal scheduler module content type configuration
     

  2. Next to your first Content Type, below the Operations heading, open the drop-down menu next to Manage fields and click Edit.
     
  3. Scroll down to the vertical tabs at the bottom and click the Scheduler vertical tab.

    drupal scheduler module scheduler tab settings
     

  4. Select the following checkboxes within this tab, which will give you additional options:
     
    • "Enable scheduled publishing for this content type"
    • "Enable scheduled unpublishing for this content type"
       
  5. Within this tab, expand the following sections: Advanced Options and Node Edit Page.

    drupal scheduler module advanced configuration
     

  6. Make sure the following items are selected:
    • "Change content creation time to match the scheduled publish time"
    • "Display an error message - do not allow dates in the past"
    • "Vertical tab"
    • "Expand only when a scheduled date exists or when a date is required"
    • "Show a confirmation message when scheduled content is saved"
       
  7. Click the Save content type button at the bottom of the page.
     
  8. Repeat steps 2-8 for the Content Types that need scheduling.

Tip: If you use event-related Content Types, it’s a good idea to enable the Unpublishing feature of the Scheduler module. Then, you can automatically remove the event from your website after it’s over.

Using the Scheduler module

  1. To use the Scheduler module, create a new piece of content.
     
  2. Go down to the Scheduling Options vertical tab and enter the Publish on fields for the date and time you would like it to when you create a new piece of content.

    drupal scheduler module how to use
     

  3. Uncheck the Published check-box that is right above the Save button.
     
  4. Click the Save button.

The content will be published on the next Cron run after the date and time you specify. The newly saved content will look something like this:

drupal scheduler module scheduled content example

  • The green notification at the top tells you when it will be published.
  • The pink highlight on the content indicates unpublished content.

Did you like this walkthrough? Please tell your friends about it!

facebook icon twitter social icon linkedin social icon

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web