Drupal Planet

Learn the basic steps to migrate your Drupal 8 site to Acquia’s world-class hosting, Acquia Cloud Platform.

Last blog post I shared how to implement rich text in a custom Drupal 9 form, I faced similar issue with files in OpenLucius: couldn't find native, clean and complete working example for multiple files upload. So I figured it out, here is the example code:

Design VS Code – Why should they go hand-in-hand? Fawaz Ahamed M 01 Sep, 2020 Top 10 best practices for designing a perfect UX for your mobile app

Should designers focus only on the artistry of the visual branding of a website? Are developers only supposed to know how to code? What’s the significance of Front-end development in Drupal? Let’s find answers to all your questions in this article.

When we delve deeper into this design vs code conundrum, it occurs to us that both are, in fact, complementary to each other. But the question is why? Why do UI/UX designers have to learn code and its fundamentals and same goes for developers as well in terms of design.

Both domains involve being creative, understanding users and their behavior. Being a designer without knowing basic coding skills and code structure is like preparing a half-baked cake, which upon eating might take you on a bathroom spree.

But first of all, let’s get to the basics with an example.

Designing Vs Coding : The similarity with a difference 

For a writer, one has to imagine and conclude their thoughts before actually penning it down. Nobody just takes a diary or goes to a blog or social media platform and starts writing right away. That is why the whole procedure is called composing. And yes, writing an email in Gmail is also called “compose”. Now, why are we talking about writers, compositions, and all. Let’s cut to the chase. In this case, the imagination is your design and penning down your thoughts is development. I hope you got a better picture now; let’s move ahead to a different side of this topic.

Should Designers learn to Code and Developers learn about UI/UX ?

During design-code sprints, you might come across situations where all the designs created aren’t feasible. Eventually, the final product ends up being a tweaked version of original design. Discussions happen, client changes requirements, but the issue remains consistent. These situations can be avoided if the design and development teams would work together simultaneously from the very beginning. That way, the work gets done more efficiently because they are getting continuous feedback from each other on what’s doable or what’s not.

Understanding both domains is not as difficult as you may think. In either of them, it takes imagination, thought process and practice. And yes, not to mention, the fundamental skills are design and code, which is a choice to learn but not mandatory if you know one.

A designer must know the feasibility, possibility and challenges of a design and you can only get to know that when you know how to achieve this through code. The same goes for developers as well. When developers understand the different scenarios the users can go through, their user experience, troubleshooting, solution, etc., it can make things much more simplified and efficient.

Here are the reasons why an individual should learn the basics of either of the skills (code or design) apart from their core expertise
 

1.    More control over the look and feel of the product: What this basically means is that when a developer knows how design analysis works and what design process is involved, S/he can adapt those design ideas and have more control over the end product and thus resulting in faster delivery of the product.
2.    Understand users and apply that to design: When a developer understands the product from a user’s perspective, it gives her/him enormous power to build something that users truly need as well as desire. For example, S/he will understand how users will react to different typography, different button styles, color schemes, etc.
3.    Design Adaption: It is equally important for designers knowing to code. When S/he knows how the designed product will be structured while being developed, S/he can ideally improve the design and make it more efficient, thereby reducing the time and effort put in by developers.

Elaborating the consequences of having only core expertise with Examples

For a better understanding on why Designing and Coding should go hand-in-hand, let’s dive into a few examples.

The above is a classic example of the usage of non-sequential structure. Here the structure is reordered while being developed for mobile. This is not only a bad practice; it is also time consuming and cumbersome. However, if a designer knew the structure of code being developed, it could have been easily and possibly avoided.

Consider this above example of a pop-up overlay with a scroll. A pop-up overlay is designed in a way that it should divert the user’s attention to a single subject and is only used as a focus when a certain information needs to be displayed. Here, the pop-up overlay has a scroll in the background which might distract the user and might not prove for pop-up to be ineffective 

A developer always focuses on getting the task completed more efficiently and at a faster pace, and in the process he misses out some aspects of the design, which S/he may think is unnecessary or could be done by tweaking the design a little bit. The example stated above shows the exact scenario when a developer does their job but ends up compromising the design. So, if the developer had an exposure to basic UI/UX, this issue could have possibly and easily been avoided.

As another example, let’s take the above screenshots that are from a money savings application. The task itself does not have any input field for a digital signature. Also, upon submitting the form, the error message does not give the user any guidance or suggestion on how to obtain a valid digital signature. If a developer knew the basics of UI/UX, S/he could have easily guided the user on the next process or could have displayed the message in a more simpler way with a proper reference to the field or suggestions.

Where to start?

Getting started is always a good idea. For designers, the basics to learn is HTML, CSS and a bit of JS/jQuery. There are plenty of online learning platforms and websites with live IDE tools for you to practice and learn.

HTML : Basic structure of any design comes first, and it’s the code of any product.
JS/jQuery: Sliders, pop-ups, drop-downs and much more can be achieved with these
Sandbox : Live tool to play around with your code
CSS/SCSS: Styling the structure is a creative process and you can achieve it by CSS/SCSS
W3Schools: A simple online learning platform and a good one to get started with
Codrops (Tympanus): A vast library with design and developer mind at same platform

For developers, you can get started by following the best practices about UI/UX with -
Behance: Complete design stack for professional portfolio and inspiration
Dribbble: Design ideas to post and get inspired from
Muzli: Blogs, inspirations, ideas
Medium : Blogs about any field (almost), best practices and tutorials
Awwwards: Nominated websites for best design and winners to get inspired with
XD/Figma/Sketch: Tools to design mockups, wireframes for UI/UX

  

 

                                                                  For Designers
 

                                                                     For Developers

Front-end Development in Drupal 

Drupal 8 as a CMS is a very UI/UX designer-friendly content management framework because it has a lot to offer right out of the box, the most significant being the variety of available themes and responsive designs. Of course, there are many more features I can think about right now but let’s keep that for another day.

While UX designers apply their creative skills and focus on the visual presentation of a Drupal website, Front-end Drupal developers bridge the gap in between UX designers and back-end Drupal developers. They are the ones who implement the visual components delivered by the designer in a Drupal website. Although both the UX designer and the Front-end Drupal developer think in terms of user-experience and solving issues pertaining to UX, they take different approaches to resolving them. The latter, however, always finds a resolution through code. 
Front-end Drupal developers are responsible for delivering beautiful Drupal websites by working on and customizing Drupal themes. They should be able to trouble-shoot front-end issues for which they would need to be equipped with knowledge of PHP, CSS, jQuery, CSS, HTML and most importantly – mobile-first website designing. 

With the growing popularity of headless Drupal websites and decoupled architecture, Front-end Drupal developers who have an understanding of frontend development frameworks like Angular, ReactJS, Vue.js, always have a competitive advantage.
So all in all, to be able to excel in Front-end Drupal development one needs to step out of their comfort zone and learn how best they can create and implement modern digital experiences equipped with the latest technologies.

A design is never finished when the designer completes and delivers the design. A design is complete only when it is fully functional and passes the QA on different aspects. Initiating design and development simultaneously is the best practice. Best in terms of productivity and not mention, best for any organization because it saves a good amount of time and back and forth. Designers and developers are both responsible for a product. Basic concept behind this whole idea is to minimize the gap between designers and developers when both are working to label the product as the BEST. 

Looking for unmatched Drupal design and Drupal development services? Reach out to us today to know how we can help.

Drupal Planet Drupal Drupal Development Drupal Tutorial Shefali ShettyApr 05, 2017 Subscribe For Our Newsletter And Stay Updated Subscribe

Leave us a Comment

  Shefali ShettyApr 05, 2017 Recent Posts Image Design VS Code – Why should they go hand-in-hand? Image Integrating the Sharethis Block Module with Drupal 8 - A Comprehensive Tutorial Image How to create and apply a patch with Git Diff and Git Apply commands for your Drupal website Want to extract the maximum out of Drupal? TALK TO US Featured Success Stories

Know more about our technology driven approach to recreate the content management workflow for [24]7.ai

link

Find out how we transformed the digital image of world’s largest healthcare provider, an attribute that defined their global presence in the medical world.

link

Discover how a Drupal powered internal portal encouraged the sellers at Flipkart to obtain the latest insights with respect to a particular domain.

link

VIEW ALL CASE STUDIES

Accessibility Challenges in an Emergency (Web Design for Disaster Part 3) Mike McCaffrey Mon, 08/31/2020 - 10:48

During a natural disaster or other public emergency, conditions may change dramatically for your users, inflicting a wide variety of new physical, mental, and environmental challenges. At the same time, access to your platform may become more important than ever, so it is crucial to consider unexpected situations and take steps that ensure your system will remain accessible when needed most.

Categories Accessibility Mobile Strategy User Experience Author Mike McCaffrey

What We're Doing Here: Webforms and Third Party Integration

In Drupal 8, the Webform module can do a lot out of the box. It can do even more with the multitude of its contributed modules. But every now and then a situation arises where you need to get into the guts of create some custom webform magic to get the job done.

Image credit: Aaron Deutsch

In the last few months, I've been doing a lot of Drupal core contributions and, even though I've done plenty of contributions over the years, I've recently learned some new things when reviewing issues. I've made this cheat sheet for anyone who wants to help review Drupal issues and wants to make sure everything has been thoroughly checked before marking "RTBC" (Reviewed & tested by the community).

There is plenty of great documentation on the development contribution process that explains some of these items further which I've also linked to below. Documentation is also being improved right now so I will update this post as new information is available. For now, hopefully this post can serve as a handy reference.

read more

I Already Have an Engineering Degree, so Why Study Drupal? An Engineer’s Pivot into Web Development   Where it All Began

Like many, I struggled with what to study in college. I enjoyed math, science, and logic puzzles and craved working with new technologies. I wanted the skills to produce. It could have been websites, robots, companies...it didn’t matter as long as it was building the future. Ultimately I decided to pursue engineering.

omarabed Fri, 08/28/2020

Much has been written on the theory and practice of agile (or Agile, if you prefer—the debate is real) including books, blog posts, and formal training.

What this guide aims to cover in depth is how to apply that theory to branch management in git, specifically for those working with Drupal 7, Drupal 8 or Drupal 9.

The following content is based on the work of our talented friend and former colleague Matt Corks.

Who is this guide for?

This guide is for you if:

• You're using an agile workflow, with sprints and regular deployments
• You have a team of multiple developers, a scrum master (project maintainer), and a product owner (client representative)
• You want to do regular releases of whatever tickets are ready
• You review releases (continuous integration, user acceptance testing, change approval board, etc.) before deployment
• You occasionally need to do hotfixes for urgent problems directly on the production site
• Before a deployment, you occasionally need to revert from a release branch a ticket that didn't pass review

Contents

• Prerequisites and prep
• Drupal with git: best practices
• Git branching strategies
• Managing multiple remotes
• Working with branches: code snippets
  • Naming conventions
  • List all branches
  • Start working on a feature
  • Review and accept a feature
  • Prepare release branch
  • Deploy release
  • Hotfix production site
  • Resolve merge conflicts
  • Remove a feature that didn't pass review
  • Find the commit where a given change was made

Prerequisites and Prep

To make this work, it's best to use an issue tracker with a ticket for each user story, and to make all changes to your site on a separate git branch labelled with that ticket number. 

The changesets should be self-contained, and perform all necessary database changes in code via update hooks, features (Drupal 7), or the configuration management system (Drupal 8/9). Any further steps necessary to test or deploy the new version should be clearly described in the ticket description.

Once all your updates are in code, you're ready to use git to prepare for and manage your testing and deployment process. You'll need to adopt specific git practices to make this work smoothly.

Drupal with Git: Best Practices Drupal 7 + Git best practices

In Drupal 7, the best practice is to export all possible configurations using the Features module, so that it can be tracked and versioned in git. After setting up your site's views, content types, variables, and other configuration, you would use the Features module to export these to code as a series of special modules in sites/all/modules/features/ and from there commit them to git. It's simplest to group these by functionality (for example, you could create one features module which contains all the configuration necessary for the blog section of your site).

After making changes, run drush features-update-all to export the configuration from the database to code. To bring in changes after doing git pull you would run the command drush features-revert-all to import from the version in code to the database. You'll need to return to the Features module to add new components of your site (such as a new view) before they will be included in the set of configuration saved in a features module.

To learn more about exporting the configuration of your Drupal 7 site using features, see the documentation.

Drupal 8/9 + Git best practices

In Drupal 8 and higher, most configuration is stored in YAML files, making this much simpler.

By default D8 configuration is stored in the public files/ directory under a difficult-to-guess directory name. Wherever possible, add the following to settings.php or settings.local.php to define the config directory, which should be someplace outside the webserver docroot. (This means your website docroot will be a subdirectory of your git root folder, giving you a place above that to store test scripts and other files outside the docroot.)

// Define the sync configuration directory $settings['config_sync_directory'] = '../config/sync';

Once this is done, run the following after making local changes on dev machines: drush config-export

You can now commit and push these changes to your git repository. To import these on test, staging, and production environments, do a git pull and then run the following: drush config-import -y

Like with D7 features, the suggested workflow is to avoid making changes to these files directly on the production website, but instead to deploy by importing from YAML. Changes made directly on prod will be discarded.

You can read more about the basics of configuration management in Drupal 8 here.

It's also possible to use configuration files during site install to spin up a site instance without a database, as described in this article.

You should also have a convenient way to fetch a copy of the production database from dev & staging environments (eg via drush aliases), and use the Stage File Proxy module to avoid having to sync public files from prod back to dev and stage environments until they're needed.

Use drush sql-sync --sanitize to reset passwords and email addresses in the user tables when copying the database (note that you can also capture all mail sent from dev and stage by sending it to a utility such as MailHog for local review).

Git Branching Strategies

To explain our preferred git workflow, we'll start by explaining some other, simpler workflows that can be used by smaller teams. My reference for this is the tutorial from Atlassian.

We're assuming knowledge of basic git concepts like branching, committing, and pulling. If these are new to you, we suggest taking the time to read an introductory tutorial such as this one, again from Atlassian.

Method 1: Centralized workflow

This is the simplest possible git workflow.

• There are no branches: everyone always commits to master
• Works best when each part of project has only one developer (i.e. one front-end, one back-end)

Method 2: Feature branches, aka GitHub-style pull requests

Once multiple people are working on a codebase at the same time, it's necessary to use a more sophisticated model. Many open source projects on GitHub work this way, with one person responsible for testing and approving all proposed changes.

• Developers start a new branch to work on each feature, sending a pull request when ready for review
• Developers merge the master branch back into their dev branches on a regular basis during development to keep up with other changes
• Maintainer reviews proposed changes and merges (pulls) feature branches into master when ready
• Maintainer occasionally tags a commit as a named/numbered release
• Works best for simpler projects without a need for external reviewers from outside the dev team

Method 3: GitFlow

Once your project requires a review process for each set of new features, some of which may depend on others to be completed at the same time, it's necessary to create branches for each release so that these can be tested as a group. It follows that you might need to remove a feature from a release if it isn't accepted during testing, and that you'll occasionally need to urgently fix the production version of the code without waiting for your usual release cycle.

• Naming convention allows for dev, feature, hotfix, and release branches, with defined procedures for updating them
• Created by Vincent Driessen in 2010
• Works best for multiple developers using an agile process as described above

Git branching best practices ✅

Make sure every commit message includes the ticket number, both to create pointers from your issue tracker, and to allow you to find commits related to a given ticket at a later date. You can even set up your CI/automated testing scripts to reject commits without numbers, and create a script in .git/hooks/prepare-commit-msg.sh to insert this automatically in the commit message template. Here's one such script.

Set mergeoptions = --no-ff for the master and dev branches in .git/config so that every merge to those branches has a merge commit for later tracking.

 Managing multiple remotes

You might want to use multiple remotes, for example a local GitLab instance, GitHub for automated integration with Circle CI, and a git instance at your hosting provider (e.g. Pantheon). You can do this by creating a placeholder remote called "all" with multiple pushurl URLs defined.

[remote "gitlab"] url = [email protected]:projects/clientproject.git fetch = +refs/heads/*:refs/remotes/gitlab/* [remote "pantheon"] url = ssh://[email protected]_hex.drush.in:2222/~/repository.git fetch = +refs/heads/*:refs/remotes/pantheon/* [remote "github"] url = [email protected]:mycompany/clientproject.git fetch = +refs/heads/*:refs/remotes/github/* [remote "all"] url = [email protected]:projects/clientproject.git fetch = +refs/heads/*:refs/remotes/all/* pushurl = [email protected]:projects/clientproject.git pushurl = ssh://[email protected]_hex.drush.in:2222/~/repository.git pushurl = [email protected]:mycompany/clientproject.git Working with Branches Naming conventions

• master: used only on the production website
• dev/123 or feature/123: used to add a feature or fix a bug, as defined in ticket 123 in your issue tracker (branched off of dev; will be merged back into dev and deleted when resolved)
• dev: used to stage all completed feature branches before they're released (was initially branched off of master)
• release/03: used to stage a set of features (a snapshot of the dev branch) for review and deployment (branched off of dev; will be merged into master and deleted when deployed)
• hotfix/234: used to fix an urgent bug (branched off of master; will be merged back into master and deleted when resolved)

List all branches # update local copy of all remotes, removing branches which have been deleted $ git fetch --all --prune Fetching origin # list all local and remote branches # (shows hash and commit subject line, remote tracking branch, and status) $ git branch -vva dev 88c87e0 [origin/dev] Merged branch 'dev/456' into dev dev/234 88c87e2 [origin/dev/234] Fixes footer; refs #234 * hotfix/345 88c87e3 [origin/hotfix/345: ahead 3, behind 1] Urgent homepage fix; refs #345 master 88c87e4 [origin/master: behind 10] Merged branch 'release/02' into master release/03 88c87e6 [origin/release/03] Merged branch 'dev' into release/03 remotes/origin/dev 88c87e0 Merged branch 'dev/345' into dev remotes/origin/dev/123 88c87e1 Fixes sidebar; refs #123 remotes/origin/dev/234 88c87e2 Fixes footer; refs #234 remotes/origin/HEAD -> origin/master remotes/origin/hotfix/345 88c87e7Urgent homepage fix; refs #345 remotes/origin/master 88c87e6 Merged branch 'release/02' into master remotes/origin/release/03 88c87e5 Merged branch 'dev' into release/03Start working on a feature git checkout -b dev/123 # create new branch # work happens here git merge dev # update feature branch # more work happens here # can rebase here if desired to clean up commit history git push -u origin dev/123 # push branch to remote for review

Note: on rebasing

Rebase when you want to rewrite history (e.g. remove commits of debugging code); merge when you want to preserve history. You should only rebase a local branch that isn't yet pushed to origin and shared with others! If you're not already familiar with rebasing, ignore this section. If you really want to learn about this, this tutorial is helpful.

If your goal for rebasing is simply to reduce clutter in your git log, consider using git merge --squash when merging feature branches into dev to combine all changes into one new commit. This is safer than rebasing, and won't cause problems for others.

Review and accept a feature git checkout -t origin/dev/123 git merge dev git diff dev # show all changes with respect to the dev branch git diff dev --stat # list of changed files, with number of lines added and removed git diff --name-status # list of changed files, tagged as modified, added, or deleted # sync database from prod # testing happens here git checkout dev git merge --no-ff dev/123 # force creation of a merge commit (so you can revert if needed) git branch -d dev/123 # delete local branch git push origin --delete dev/123 # delete remote branchPrepare release branch

Once enough tickets have been closed and their corresponding feature branches merged into the dev branch, create a release branch and deploy to your staging environment for review.

On local machine

git checkout dev git branch -b release/04 # sync database from prod # perform final local tests of deployment steps git push -u origin release/04

On staging server

# sync database from prod git checkout -t release/04 # run deployment stepsDeploy release

On local machine

git checkout master git merge --no-ff release/04 git tag release-04 git push --tags

On production server

git pull # run deployment stepsHotfix production site

On local machine

git checkout master git branch -b hotfix/345 # fix up code # testing happens here git checkout master git merge --no-ff hotfix/345 git tag release-04-hotfix-01 git push --tags

On production server

git pull # run deployment stepsResolve merge conflicts

Your tickets should be small enough in scope that merge conflicts don't happen very often. Here are three things you can do when they come up:

1. Run git status to list files with conflicts, then edit each one manually
2. Configure a merge tool which can help with three-way merges (see git mergetool --tool-help for supported options on your platform)
3. If you get lost halfway through: git merge --abort

There are lots of resources on resolving conflicts online. Here's one good intro-level tutorial.

Here's an example of working with a three-way merge using vim.

Remove a feature that didn't pass review git checkout dev git revert -m 1 88c87e0 # revert the merge which brought in feature branch dev/456 git push git checkout dev/456 git merge dev # update feature branch to include the revert git revert 88c87e1 # revert the revert itself to return to the code that needs further work

A lengthy description of this process is available here.

Find the commit that made a given change

A common complaint about gitflow is that it fills your git history with merge commits, but in fact git allows you to exclude these with git log --no-merges (or to show only merges with git log --merges).

git log git log --since="2017-01-13" --until="yesterday" git log -3 # shows last 3 commits git log --grep="refs #123" # searches commit messages git log -S"needle" # searches diffs for fixed string "needle" git log -G"ne+dle" # searches diffs for regex "ne+dle" Need help?

Leave your comments and questions in the comments, and we'll get back to you ASAP!

For more in-depth assistance, reach out to our team of Drupal experts about personalized training options for your team.
 

+ more awesome articles by Evolving Web

In this article, we’ll take a look at some tips for achieving better work-life balance when working at a digital agency, from the perspective of both employee and leader, as well as the main benefits of a healthy work-life balance.

READ MORE

On July 13, we released another version of the Droopler distribution. In version 2.1, we focused on the functionality needed by many companies nowadays – we have added e-commerce. Check out what exactly the new version of Droopler – one of the most popular Drupal distributions – brings. 

Why e-commerce?

Recent months have forced many companies to switch to online sales. Since March 2020, the number of searches for the phrase "e-commerce" in search engines has increased significantly. More and more companies are looking for ready-made solutions that will enable them to conduct sales via the Internet.

Therefore, at Droptica we have decided to introduce a ready-made e-commerce functionality to the Droopler system. As in previous versions of Droopler, also in the case of e-commerce, our goal was to create a functionality that is nice-looking, easy to manage and ready to use right after installation. 

We provide all this for free and as open source code. 

E-commerce in Droopler

Droopler is a distribution in which we try to use the best Drupal core elements and the best Drupal modules within one system. We combine them into a coherent whole that is convenient to use and add a ready-made template adapted to mobile devices.

That is why in version 2.1 we have used the module  Drupal commerce and we have created a ready-made online store on its basis. We have added one example product type and created a product listing. 

Everything looks very nice right away; you do not have to worry about graphic designs or creating CSS styles. This is already done in Droopler 2.1

Check out the demo version

We have also prepared a new demo version showing the e-commerce capabilities of Droopler. Just go to the website https://droopler-commerce.droptica.com and see it for yourself. 

On the home page consisting of paragraphs, you can see selected products. This is one example of how you can promote selected products. 

The list of all products can be found on the website https://droopler-commerce.droptica.com/shop This list is based on the Views and SearchAPI modules. On the left side, you can filter products by category (faceted search). 

Sorting options are available above the product list. The user can change the order of the products being displayed according to their needs. 

When visiting the page of a given product, you see a photo gallery, the product price, the option to add it to the cart, and its description.

The basis is Droopler, so the editor can add any of the 16 existing paragraphs to the product description and make the product page look very eye-catching.

In the header of the page, the user can see the number of items in the cart. From there, they can go to the purchase page and complete the order.

Purchases can be made as a logged-in user and as a guest. 

You can go ahead and test all the purchase steps by clicking around the demo version. 

Adjust the system to your needs

Droopler is based on Drupal, so you can adjust it to your needs. You can also do this with an e-commerce system built on Droopler.

Do you need an online payment system? No problem – there are over 100 free payment modules.

Do you need dedicated shipping options? You can find an appropriate module for this also.

All modules can be found on the website https://www.drupal.org/project/project_module

While working on version 2.1, we have also prepared new additional modules dedicated to Polish companies:

• integration with the DotPay payment gateway https://www.drupal.org/project/commerce_dotpay
• integration with the Paczkomaty service https://www.drupal.org/project/commerce_inpost
• integration with the Baselinker service https://www.drupal.org/project/commerce_inpost

If you have very uncommon requirements, ask us for help. Droptica is a Drupal agency that helps to adapt Drupal (also Drupal Commerce) and Droopler to the individual needs of its clients.

More information on Droopler

By releasing subsequent versions of Droopler, we want to create a convenient tool for business owners and people from marketing departments. With Droopler, we want to help companies in their marketing and sales activities.

From the very beginning, the system is available for free. Information on how to download it can be found on the website droptica.com/droopler/
We have also built a tips section – "Droopler tutorials" – where we describe how to work with Droopler.

If you need help with Droopler, you have found a bug, or you have an idea for new functionality, please notify us here: https://www.drupal.org/project/issues/search/droopler
 

Creating a custom PHPUnit command for DDEV opdavies 28th August 2020

To begin with, let's create an empty file for our command:

touch .ddev/commands/web/phpunit

Commands are located within the .ddev/commands directory, with a sub-directory for the container name in which the command should be executed - or host if it's a command that is to be run on the host machine.

As the example repo has a web sub-directory to mimic my Drupal application structure, the command should be run inside the web container so the file should be placed within the .ddev/commands/web directory.

As we want the command to be 'phpunit', the filename should also be phpunit.

This is an example of a basic command, which is a simple bash script:

#!/usr/bin/env bash echo 'running phpunit...'

To begin with, let's echo some simple text to check that the command is working. It should also be listed if you run the ddev command.

To check the working directory that it used when the command is run, add the following line in the command file:

echo $(pwd)

In the example, it is /var/www/html/web. Note that we are already inside the web sub-directory.

Running PHPUnit

To run PHPUnit, I can add the following to the command file:

../vendor/bin/phpunit --config .. $*

As we're already in the web directory, the command needs to go up on level before running the PHPUnit command, and uses --config to define the path to the phpunit.xml.dist file which is also in the parent directory.

Using $* adds any additional arguments from the CLI to the command inside the container.

Adding documentation

To add documentation and help text to the command, add these lines to the command file:

## Description: Run PHPUnit tests inside the web container. ## Usage: phpunit ## Example: "ddev phpunit" or with additional arguments such as "ddev phpunit --testdox"

These will be parsed and shown when someone runs ddev phpunit -h, and can be used to show various examples such as adding additional arguments for the PHPUnit command.

With this all in place, we can run commands like ddev phpunit or ddev phpunit --testdox, or even ddev phpunit modules/custom/opdavies_talks --filter=TalkEventDateTest for a Drupal project, and have that command and tests running inside DDEV!

For more information on DDEV and creating custom commands, see the DDEV documentation.

Tags Drupal PHP DDEV Drupal Planet

The current Drupal update framework (roughly: hook_update_N) is quite old. It is still firmly rooted in the procedural origins of Drupal. Also, it has several shortcomings. Some of those shortcomings were addressed in the new(ish) hook_post_update mechanism, but that does not replace the old system, it only augments it for update code that needs the full Drupal framework to be available.

This blogpost is a repost of an issue I created in the Drupal Ideas issue queue. The proposal is inspired by Laravel migrations. These work by defining a class in a pre-determined location and...

The case for communication between designer and developer Shalini Rawat Thu, 08/27/2020 - 17:33 ‘’Designers will always need developers, and developers will always need designers. Only if both areas are filled with ego-less people, we can create astonishing products or websites.’’

Starting with the statement, when designers and developers work together, they can make magic happen. We are talking about the kind of magic that is created when all kinds of UX/UI designers throw their titles aside and work for the greater good. Although they both have their own and different tools of the trade, the ultimate goal is the same. As a matter of fact, the most acclaimed and sought after designs are built where there is good communication and the ability to collaborate. Having said that, when designers and developers collaborate on the methodologies of design together, the outcome created is the best for the users. 

However, building a sense of togetherness is not an easy breeze. In other words, many organizations have been grappling with this issue, especially ones where designers and developers work in cross-functional teams. As a result, in many instances, the project ends up being a disaster one.

Therefore, in this article, we are dedicated to sharing insights into the communication between designers and developers where we will be sharing the issues that have surfaced the relationship of both. In addition to this, we will be providing tips that can help improve communication between designers and developers. 

Issues between designers and developers

Designers often find it difficult to work with developers and vice versa due to two different mindsets, backgrounds, and approaches to work which commonly lead to not seeing eye to eye. Within the organization, both designers and developers work together as a team to complete a large scope of projects, such as website designs, mobile app revamps, product interfaces, and digital marketing campaigns. However, despite working together on all these projects, the process is rarely smooth sailing. In other words, there is usually some sort of disconnect present between the two teams. 

While both these teams are equally important and need each other to complete the projects, they often remain siloed, with limited communication between them. And this is where projects can run into issues. Here are some of the most common issues that designers and developers face when they work together as a team. 

1. Variation in time evaluation

Designing is an amazing process that cannot be done overnight. It takes into account all the important factors that are of supreme importance, including layout, user experience, user interface, design aesthetics, and much more. However, it is too common for designers to make quick and wrong time estimation which can lead to time crunch for developers to bring their designs to life. Consequently, developers end up missing the project deadlines which leads to project failure and designers are to blame for it.

2. Different Backgrounds

One of the most common issues that take birth is - the difference in background. While a designer wishes to add interactive elements to a website to improve user interaction, a developer thinks it may add unnecessary weight and blot to the website. However, there is another side of the story that states that designers and developers are not much different from each other. What separates designers from developers is that they have different perspectives and different ways of looking at things. 

3. Different Focus & Priorities

Designers and developers set up their focus and priorities, where designers want to make websites attractive and easy to use. On the other hand, developers wish to make it faster and more secure. Well, a successful project will incorporate all of these qualities. But, sadly, designers and developers don’t always see it that way. They try to bring in and support every aspect of their priorities irrespective of the fact whether or not it will support the cause of the design.

4. Muddled Communication

Good communication is a pathway that can build great things. Effective communication and cooperation between the teams can do wonders in favor of the final product. But, unfortunately, most designers and developers fail to understand this success mantra and draw a line between the teams. While developers think technically and talk in specifics, the designers think creatively and speak in generalities. This leads to major confusion and misunderstanding between the teams.

Creating a Trusting partnership ‘’Design is now too important to be left to designers’’ - Tim Brown (CEO of IDEO)

Certainly, product design cannot exist in a vacuum and therefore it needs the involvement of every team (i.e. designers and developers) that has anything to do with the product directly. In all reality, the entire design process should not be given in the hands of the designers only, rather the developer should also be allowed to participate in the process because they can share valuable feedback about a project’s design. Moreover, developers can let you know if a feature, interaction, or animation is complex or simple to implement. 
 
Creating a partnership between designers and developers is one of the most challenging yet beneficial parts of the designing process, as the payoffs received are innumerable on taking up the challenge. Since both designers and developers approach problems from different angles and live in different worlds, it becomes important  to increase trust and build a sense of camaraderie between the two disciplines.

Tips to improve communication

With job descriptions that are so different, there is one thing that is of extreme importance: communication between designers and developers. Communication helps reduce the line that exists between both to ensure that both sides of the website project are working together effectively to ensure the best possible projects. Therefore, here are some tips and tricks for you that can help you improve communication within these organization teams. 

1. Mandatory Kick-off meetings

Kick-off meetings mark the first official meeting that takes place between the interested parties (mainly designers, developers and clients) of the project. Since the discussion between designers and developers is often vague, extending a hand for conversation helps make the job easy for everybody embarked on the project. However, in one of our projects, both the departments i.e. designing and developers teams couldn’t hold the kick-off meeting due to which designers were not able to convey the exact design to the developers team. As a result, developers found it tough to catch up with the designer’s idea and the replication of the same. This one particular scenario served as a wake-up call that kick-off meetings should be organized to plan the project and the upcoming planning activities. Moreover, the team members realized that being vocal about your ideas right from the start is vital for any business project and it helps the communication process as well. Since then, designers do take their time out to explain the vision of the project to the development team at the earliest possible.

2. Removing physical barriers

Physical barriers that are created in the workspace prove to be a big hindrance in the journey to success. Apparently, organizations today provide separate work space for separate teams to maintain their work flow. Our organization was no more different than others and thus we created cubicles and partitions to make our office look great.  However, these situations would often create problems for communication between intra-team members who work together as a single team to achieve the goals of the organization. Sooner, the company realized If designers and developers don’t get to see each other that often, how are they supposed to deliver the final outcome within a given deadline? Moreover, they pondered over the question of casual discussions which would not suffice as both designers and developers would fail to know about each other’s perspective. Therefore, the company thought it was a great starting point for the future projects to remove the physical barriers where all teams can be out together to achieve the predetermined target.

3. Hop on a style guide

We have seen that the designers and the developers in our company have had issues related to different developmental works.. In other words, both the departments had sometimes grappled with the lack of a clear vision of the product and what needs to be done which would create an entire burden on the front-end developers. However, this problem seemed to fade away when style guides sank into their lives. We ensured to set a process where our designer has to provide the front end developers team with the required style guide and have been reaping the rewards since. A style guide is basically a collection of rules that states out how writing, formatting, and designing of documents need to be done. A style guide can be used repetitively by the front end developers that best represents the vision of the project. The purpose of introducing style guides was to make sure that multiple contributors create in a clear and cohesive way that reflects the corporate style and ensures brand consistency with everything from design to writing.

4. Ask developers for visual feedback

Communication is not a one way road, rather it is a two way flow of information where a constructive feedback is received right after the discharge of the deliverables. It is often observed in many project meetings that developers are not present at the time of the design feedback which is a major loophole in the process of communication. Well, that is a big mistake and this attitude doesn’t work in the long run and can lead to failure. Developers play a major role and their contribution through feedback is what is needed by the designers. Not to mention, developers are a great source for design feedback as they have a ton of knowledge about the product or the website. Not only for developers who carry a technical point of view, it is also highly recommended for designers to coordinate with the developers to bring them for the next design meeting. 

5. Reducing the experience gap

In our experience, once the design is completed, asking inexperienced frontend developers to proceed with the development process has been problematic. Even if there are seasoned front end developers in that given project and the inexperienced guys can get the assistance from them, the problems with project delivery delay and ineffective replication of instructions given to them by the designers have been noticed. Therefore, we made sure to have only the experienced front end developers to work on the design instructions and let the inexperienced team members gradually ease into major projects after proper training.

6. Unleash the common framework

Creating a team who can work well together is often a difficult task. There were certain situations in our organization where designers and developers would use different frameworks for a common project as per their requirement. Since they both were working on completely different grounds, this would often leave both the departments in a frustrated state. All these situations gave rise to a new approach wherein designers and developers can use common frameworks like Bootstrap which helped the designers and the developers to stay in sync and quickly build web applications or websites. Bootstrap is a widely used CSS framework which comes packed with prebuilt components and JavaScript plugins. So, whether it is about creating a slider or about using font colour, font size, button padding, button size, column width, using a framework like Bootstrap helped designers and developers to remain on the same page and carry on with the design and development process smoothly. Adapting to this new approach helped us reduce overrides and further save time and effort.

7. Using collaboration tools 

As the name suggests, collaboration tools are used to collaborate with people working under different departments within the same organization. There have been cases in our earlier works where we have seen heavy reliance on designers and their expertise with Adobe Photoshop. Developers had to wait for the design team to come up with sample designs and then proceed with the development. The collaboration here was simply not efficacious. We decided to use a collaboration tool like Zeplin and InVisionApp. We observed that using such digital product design platforms improved the collaboration efforts between both the teams. It also helped to show the design to the clients as and when ready.

8. Dependency on component-based development

Component-based development is defined as an approach to software development that focuses on the design and development of reusable components. In other words, you don't have to create a new component all over again for the website. You can simply break your monolith into components as per your requirement. We tried out this process by using Pattern Labs in one of our projects and quickly realised its immense potential. In a nutshell, pattern labs provided usable components which reduced the duplication of the work of the developers where one developer creates one component and another creates a different component. Pattern labs acted as the ultimate salvation towards all the woes of our company. 

Also read: Visual design inspiration: Design discovery

The outcome of collaboration: A win-win situation

Collaboration is the key to ultimate great products. The scope of collaboration is not limited to the designing team, and focuses on other teams as well. Developing and enabling the collaboration right from the start makes the conversations easier and faster, and shortens the over time review cycles. Moreover, the process of collaboration not only creates a better experience for your teams – but it also impacts the end-user. 

This understanding helps build empathy between the designers and the developers, which results in the following benefits:

1. Gain familiarity with intra-teams

During the process of collaboration, designers and developers work in a single team which provides them the golden opportunity to know and understand each other areas to ensure the successful completion of the project at hand. The combining efforts (strategy, design, and execution) of both the teams help in the successful delivery of the project to its respective client or clients.  It also decreases the learning curve of team members to a large extent.

2. Discovering your own flair

We as human beings hold a lot of fear in our head. Be it the fear of being judged, communication, taking responsibility, taking initiatives, etc. In the workplace, designers and developers also face these fears which often hinder the growth and success of the project. Creating a healthy and effective collaborative environment can encourage team members to take complete ownership of their work, thereby leaving no scope for one to be fearful of anything.

3. Learning becomes the new normal

The process of collaboration comes with great opportunities to learn. In other words, when designers and developers build a relationship with each other, they develop an opportunity to gain tons of knowledge that falls under different industry domains. Building relationships can help both teams to share their experiences and the thought process they utilized to proceed with the project engagement. Along with this, they gain important soft skills in their related fields.

4. Nurture an amazing work culture

Working in sync with intra-team members helps realize their needs, call them for important discussions, and most importantly make them feel comfortable to reach each other for any assistance desired. There is no denying to the fact that a team contribution is always more valuable than an individual contribution. To put simply every successful project engagement is an outcome of an amazing team effort.

5. Keeping everyone aligned with the vision

It sounds amazing when you think of people working on the project that features a common goal, irrespective of the team they belong to. Working together as a team that has a common goal can help achieve any vision. Moreover, the benefits released from the goal can be distributed among the team members. Excellent team collaboration within internal and external teams can help to achieve revenue goals as well. 

Also read: Building a design system at scale

Conclusion

To conclude, technology taking a significant rise has emerged as an inherent part of every business in today’s workplace.  As a result, the need for better software design and functionality has become the cornerstone of any organization. Considering the competition that is constantly augmented by the business leaders in the market space, it becomes important that teams within the organization function are seamlessly able to give their clients the best possible results. 

In today’s era, an integral part of teams are the designers and developers: two different specialties, working to create a common product. However, sometimes these two teams are very hard to reconcile and can even put you in a predicament. Therefore, it is important to bridge the gap that exists between two and collect the rewards that can actually mean the difference between a good product and a great product.

Want to know more about the tips to bring these two working together? Contact us at [email protected] and our experts will help you create a strong foundation for future works.  
 

blog banner blog image Blog Type Articles Is it a good read ? On

In one of my last posts, I provided examples of Drupal-based corporate websites. The first one referred to the companies of the medical industry, the second one – to the companies operating within the industrial sector. I presented the Drupal functionalities, as well as the dedicated solutions that the organisations mentioned in this article introduced in their websites. In this text, however, I would like to present Drupal-based websites from the commerce industry.

Hermes

The company offers co-packing products and accessories. Therefore, it represents an industry in which competition is fierce – the more reasons for an online store to stand out. And so, there are a few attention-grabbing elements that really make this commerce attention-grabbing.

The first thing is the attractive form of displaying banners and photos on the home page. Slide in was used here – by scrolling the page, the mentioned elements "slide" into their places. The effect is eye-catching and makes you want to stay on the store's website. 

The second thing is definitely the search engine. When typing a search term, suggestions appear. This way, you can find the given product faster – you can immediately see if such a product even is in the store at all. And if it is available there, after calling this product you are taken to a page where further filtering options are provided. It is important because, remaining "on the product", you begin to narrow down the search in terms of the features of this product. All this means that you are encouraged step by step to look for the goods you want to find – you do not give up, and we do not leave the website. 

Another thing is the menu. It is located in the upper left corner. After clicking it, a list with categories appears. After selecting the "+" sign, the given category expands – you see the next subcategories, and in the next steps you go to the page with this very product. 

Speaking of the menu, it is worth mentioning the rather frugal form of presenting the headline. In addition to the aforementioned search engine, there is also a shortcut for logging-in into the customer account and a shopping cart. All this makes the whole thing legible and easy to navigate.

When browsing the Drupal-based Hermes store, it is impossible not to get the impression that it was very well-thought-out and designed with the customer in mind. So, if you are considering starting your commerce, this example can be a great inspiration. And in combination with the Drupal consulting, you can gain knowledge and advice on how to make your customer stay in your store as long as possible and choose what they are looking for.

JYSK

It is one of the most well-known brands that probably does not require a detailed introduction – and also another Drupal-based store. You can find here other amenities for the customer, as well as inspiration.

Have you wondered how to make the search engine more attractive? If you add to the Hermes' example a product image along with the information about the number of variants available in the store, you may obtain a really attractive effect. This is how it looks like at JYSK. You might say it is nothing, but this detail makes all the difference. It undoubtedly meets the customers' expectations and makes searching for a product significantly easier.

Let us go further. If you offer many products and have many categories, why not present these categories as a gallery on the home page? Thanks to the solution proposed by JYSK, the customer who visits the store receives a visual, and at the same time – friendly, message. You can see then that the owner of the store took care to make it easier for the visitor to navigate the brad product offer. 

The above solution is continued. After selecting the category, you are still being guided through photos with subcategories, until you finally choose the given product. Between individual steps you can find, e.g. the section with a blog/guide regarding the category you are currently in. It is good to pay attention to this because on other websites the blog is often placed "beside" and sometimes it is a separate element – here it is an integral part of the purchasing process and supports the customer in choosing the product that meets their expectations.

And when you are finally taken to the cart, there is also a well-thought-out solution that takes into account the decisions that the customer may be considering. "Availability check" and "online reservation" caught my attention. 

By checking the availability of the goods, at the very beginning, you can check out whether the product is in stock and in how many brick and mortar stores.

When selecting the checked button, a pop-up appears, where – after entering the city – you receive information about the quantity of the product in the specific store. It is good to mention here that there is also information available about the latest inventory update – I think it is very important knowledge for the user, on the basis of which the customer can be sure that they are viewing the most up-to-date. A similar pop-up with its functionalities appears when making an online reservation.

When conducting sales online, you should not forget about the sales at brick and mortar shops – but rather support them in order to provide the customer with a broad range of possibilities and present them with options at every step of the shopping experience. And finally – the customer panel. JYSK took care of the basic functions such as: the profile, the order history, the wish list, and the list of recently viewed items. The FAQ section can be checked here. And just like the blog section placed within the purchasing process, the most frequently asked questions and answers are at hand.

Wilson

Probably almost everyone knows the Wilson brand, but maybe not everyone knows that their online store is built on Drupal.

In this case, I also have to start with the search engine again, because it seems that of all the previous examples, this one looks the best. Moreover, it shows that with Drupal you can develop functionalities that may seem inflexible at first glance.

The main difference is the fact that after entering a phrase, you are taken straight to the store, where the page with the desired product, categories and quantity is displayed. In addition, I must mention that the design is characterised by minimalism, thanks to which the whole is uncluttered.

However, I want to focus on the element that makes this store unique and distinguishes it from others. In the main menu, there is a CUSTOM button, which allows for the possibility to "design" a product according to individual needs and tastes.

After pressing the button, you are taken to the model (in this case – of a tennis racket) and the selection option.

And this is where the adventure begins, one could say. The possibilities of personalising the product are really wide. From the colour, gloss, type of coating, through the choice of the shades of the logotype, to the use of patterns resembling the ones on the rackets of the world's most famous tennis players. Posting here more screenshots made by me would take up too much space, and at the same time – prevent the interaction with the store's capabilities. So, I encourage you to visit it and personalise a tennis racket yourself. However, I will attach here the final view of the product, including the information about the estimated time of order completion.

The above example is perfect if your business offer includes products that are being personalised for your customers. With Drupal, you can achieve a unique effect that will keep up with the expectations, and at the same time provide the user with an unusual experience. So, when you will be preparing a brief for a Drupal agency, and your vision will resemble Wilson's example even a little, I encourage you to include this example. Thanks to this, Drupal team will understand your idea well.

Let us go back for a moment to the home page with the option for finding a dealer. 

The use of a map turns out to be extremely useful here. After selecting the brick and mortar store you are interested in, its detail appears on the side of the screen, which provides additional filtering by category. In the case of Wilson, the search can be narrowed down depending on the sports discipline in the context of which you will be able to purchase appropriate equipment and accessories.

LUSH

This Drupal-based cosmetics shop may be a good example of a product presentation and designing a customer panel.

As for the former, the gallery plays a key role. Every subpage with a specific type of product is created according to the following pattern: banner, best seller product, other products. Additionally, some of them have information about the stock ending in the warehouse. In addition, there are also references to the content on the blog - so if you have doubts about which product to choose or you want to broaden your knowledge, you do not have to leave the subpage, because everything is here in one place. 

Although there are a lot of photos, you do not get the impression of being overwhelmed with their number. So if you are considering a similar style for your store, use a professional design service.

The second element is the already mentioned customer panel. The clear menu draws attention. Navigating and finding your way around your profile is easy and pleasant, which means that the customer may log in there willingly.

Further down the panel, some blocks allow for previewing the content in reference to the panel menu item.

WAM

And finally, the WAM publishing house as an example of a Drupal-based store with a large number of books. The distinguishing feature of the home page is its transparency. My attention is drawn to the thematic blocks with books from a given series. Thanks to using the slider, you do not have to enter the given block, but by pressing the arrow, you can move the titles.

After selecting a book, you go to the product page, where we can learn more about the publication. You also have the option to download an excerpt from the book. 

An interesting fact in the store during the ordering is the option of shipping the purchased product as a gift. The customer can choose not only the recipient of the goods but also a decorative packaging. As a result, the buyer of the product to be a gift does not have to worry about packaging anymore. This is a convenient and useful option.

Summary

By choosing a Drupal-based store, you can take advantage of its many possibilities. Depending on what you expect, what you sell, you have a chance to build e-commerce so that your customers stay on your website as long as possible, and the number of conversions is as high as possible. I hope the above examples have inspired you, and you will want to use some of the solutions.
 

Sometimes, when developing a site with many content types, it can happen that your Drupal system may slow down “a little bit”. In most cases, that has nothing to do with Drupal itself, but it lies in the lack of resources of your local environment.

In those cases, it helps to save time by avoiding one or two clicks (that implies one or two page-loads) on the backend of your Drupal site.

The Drupal Coffee module provides a floating text box, which filters the results of the backend menus, according to the user’s input, whereas the Admin Toolbar module turns the default Drupal Toolbar into a dropdown menu.

Keep reading, to learn how to use these modules!

In this second part of our series on Mastering Entity Access, we present a scenario in which overriding the entity access handler proved to be the optimal solution for a client requirement that we be able to override the menu set on Block Layout settings at the node level. In the process we gained valuable information information on entity access challenges. 

The creation and delivery of ethical medical systems is an urgent concern for healthcare professionals and systems around the globe. A worldwide pandemic has only heightened the stakes for those involved in ensuring that delivery of patient care is driven by ethical and transparent decision-making across the international, private healthcare sector. To help drive the adoption of ethical systems, the International Finance Corporation (IFC) partnered with the World Bank to create the EPiHC (Ethical Principles in Health Care) initiative, which seeks to partner with partners around the globe to sign onto a set of 10 principles to guide the behavior of healthcare providers, payors, and investors.

Chapter Three worked with the IFC’s programmatic and communications teams to provide strategy, design and development for this global initiative. We’re especially proud of these key accomplishments for this project:

Last Call! BADCamp Session Submissions Close August 28 Wed, 08/26/2020 - 12:00 volkswagenchick Wed, 08/26/2020 - 08:50

Do you want to push the boundaries of what a Drupal Camp session can be? Don’t wait! We’re looking for innovative thought leaders and brave Drupallers to make this the best BADCamp ever.

We are seeking to prioritize unique content that has not been presented at a DrupalCamp in the last year.  If you submit a session you have given in the past, it will be rejected. The BADCamp experience is always unique, and this year, with the event going virtual, we’re focusing on thoughtful and fresh content. 

Drupal Planet

Add SVG icons in Drupal menus jnettik Wed, 08/26/2020 - 07:57 Drupal Drupal Planet Code

Adding SVG icons or button styles into Drupal menus can be difficult — especially if you’re trying to avoid hardcoded, fragile solutions. With the Menu Link Attributes module you can easily add custom HTML5 data attributes to individual menu links, then use a preprocessor to inject your SVG icons and button styles based on those attributes. This solution takes just a couple of minutes and should work on Drupal 8 / Drupal 9 installations.

Menu Link Attributes

Add the Menu Link Attributes module to your project via composer require drupal/menu_link_attributes, then enable the module with drush en menu_link_attributes or through the GUI on the Extend page. Once the module is enabled navigate to Structure > Menus and click the Available attributes tab. Here you’ll add YAML configuration that will describe which attribute options you’d like added to individual menu links.

The menu link attributes configurations can be found at Structure > Menus > Available attributes (tab). attributes: data-icon: label: Icon description: 'Replace the text of the menu link with an icon.' options: facebook: Facebook instagram: Instagram twitter: Twitter

Paste the above YAML into the configuration textarea and click Save to create a new Icon option for menu links using the custom data-icon attribute. With this option you can add attributes to your link like data-icon=”facebook” — or whatever you define in your config YAML. In our example we’ve defined facebook, instagram and twitter.

Menu link Attributes settings are now available on the edit screen for individual menu links using the configurations set above.

Next you’ll want to assign these data attributes to your Drupal menu items using the GUI. For this example I’ve created three new menu items in the Main navigation (machine name main) menu: Facebook, Instagram, and Twitter.

A custom Sandbox theme, using Bartik as a base theme, on a fresh Drupal 8.2 install. Create an SVG Sprite

This solution assumes you’re using a sprite of SVG icons and have included them somewhere in your templates. There are many ways to do this in Drupal, and covering them here would be outside the scope of this post. For simplicity, I’ve added the following sprite at the bottom of my page.html.twig file — you can follow suit to get this example working in your project. Notice that the value of the data-icon attribute in the menu links match the IDs of the symbol elements in the sprite.

<?xml version="1.0" encoding="UTF-8"?> In my custom Sandbox theme, I've copied page.html.twig from the base theme and pasted the SVG code from above as the last line. Inject your SVG markup with a preprocessor

In your mytheme.theme file (or sandbox.theme in my case), define the following hook to inject SVG markup in any menu item that has a data-icon attribute. As mentioned above, you’ll need to paste the SVG markup provided at the bottom of your page.html.twig file in order to see any icons actually populate.

/** * @file * Functions to support theming in the Sandbox theme. */ use Drupal\Component\Render\FormattableMarkup;   /** * Implements theme_preprocess_menu(). */ function sandbox_preprocess_menu(&$variables, $hook) { foreach ($variables['items'] as &$item) { $attributes = $item['url']->getOption('attributes'); if (isset($attributes['data-icon'])) { $title = new FormattableMarkup(' @title ', [ '@title' => $item['title'], '@icon' => $attributes['data-icon'], ]); $item['title'] = $title; } } }

In this example using Sandbox, my custom sub-theme of Bartik, I added an svg { max-width: 25px; } CSS declaration to my theme's base styles so my menu icons aren’t the size of the whole viewport.

SVG Icons in their proper place as Drupal menu items! I added a line of CSS (above) in my Sandbox theme to set the icon sizes.

Voila! Now you’ve got SVG icons in your Drupal menu links, and you can easily alter the data-icon link attributes with a point-and-click interface. Check back soon for a separate post on creating SVG sprites for your Drupal templates.

In the show notes below, I outline what we implement in part 3 of the Drupal live site build. We’ll create a new content type called Portfolio which will have three fields, Body, Featured (media field) and a Portfolio category field.

Then we create a “Related project” block which will display other portfolio items which are related through the category field.

We use the Views module to create the block.

And then we create a listing page which displays the portfolio items as Bootstrap Card components in a grid layout.