[Drupal 8] Modify the breadcrumb text

Breadcrumbs are considered as a secondary navigation, as it let the user know the current, as well as the path through to the location.

In Drupal 8, Menu breadcrumb is used to set breadcrumbs for the pages. In one of the websites I was working on had sub menu's with html tags. For the About menu, the sub menu was as 'All about Organisation'. Menu breadcrumb would show the breadcrumb for the page, 'All about Organisation' as,
 
Home > About > All about <i>Organisation</i>

The breadcrumb is not presentable to the visitor, without stripping or by formatting the html tags. 

To do this, we need to implement hook_preprocess_breadcrumb().

function test_preprocess_breadcrumb(&$variables) {
    foreach ($variables['breadcrumb'] as $key => &$value) {
      $value['text'] = strip_tags($value['text']);
    }
  }

In the hook, $variables['breadcrumb'] contains the details of breadcrumb. 
In our case, there would be three key value pairs($key, $value), first for Home, second for About, and the last one for All about <i>Organisation</i>. Each value contains an array of text($value['text']) and url($value['url']) of each level. By iterating through the key value pair, we strip the tags from Home, About and All about <i>Organisation</i>, which will result in the below breadcrumb.

Home > About > All about Organisation

We've made a presentable breadcrumb for the visitor and that is it.  I would be glad to hear if it helped you. Happy Coding :)

QED42 Drupal Interview Questions

1. What is #states in form?
2. What is features module? When do we revert and update a features module?
3. How to show longitude and latitude in text fields separated by comma in google map in a node?
4. Architecture of Drupalize.me?
5. Alter a user login form to include an email field and validate in same?
6. What is the order of preprocess functions in template.php?
7. How to bring change in result of a 42 views shown as a slideshow?
8. How do we theme a view?
9. Share fields between content types?
10. How to remove ?q=user while setting up Drupal?
11. For companies they've jobs. For applications has applicants. Get all jobs of a company and for all company, get all the applications for a particular job?

TCS Drupal Interview Questions

1. How to add a new field to user account? How to validate the same?
2. Which database engine used by Drupal?
3. What is the difference between InnoDB and MyISAM?
4. Difference between UNIQUE and PRIMARY key? 
5. Explain the following contributed modules
   Features
   Views
6. How to add JavaScript and CSS to Drupal?
7. How to create a branch in Git?
8. How to use ORDER BY and GROUP BY in database?
9. What are the contributed modules used?
10. Explain Web Service, CURL?
11. What is hook_menu(), page arguments, page callback etc?
12. Experience in Drupal?
13. How to get id in JavaScript? Write a JavaScript function to get the id of the button?
14. What is taxonomies and Vocabulary in Drupal?
15. How to give connection to a field as taxonomy?
16. What are exposed filter in Views?
17. What are contextual filters?
18. How to theme a form in Drupal?
19. Use of template.php?
20. How to create a tpl for a particular content type in Drupal?

I had a telephonic interview from TCS Mumbai. Hope this helps.. :)

[Drupal 8] Include html tags in link function in twig

It is obvious to have a difficult client, who can ask you to do things that are a bit messy. 

I had to face many such situations while working on different projects. One such situation has inspired me to start writing on Drupal. 

To an extend user experience of a website is dependent on its navigation. Main navigation accounts to a measurable heights in it. In this case, one of the menu item has had a text aligned in italics, eg., About the Organisation. The term Organisation has to be in italics. 

I've started by adding a menu link at Structure -> Menus -> Main navigation, as About the <i>Organisation</i>.

In the template, we are rendering the menu item as,

{{ link(item.title, item.url) }}

Output of the above link will be, About the <i>Organisation</i>. Which is not what we're expecting to show to the visitors. 

To format the html for the above link, pass the raw filter on item.title. This filter is used to format text containing html in the twig file. Later assign the formatted text to a variable, here it is title. At last in link function, replace item.title with title. 

{% set title %}
    {{ item.title|raw }}
{% endset %}
{{ link(title, item.url) }}