Purencools Blog

You are here

Using twig functions in Drupal can help a frontend developer achieve a very complicated problem in a  clean and simple way. Here are some of my favorite functions.

String replace

{% set image_title_string = image['#attributes'].title %}
{% set image_title_char_search = '//' %}
{% set image_title_char_replacement = '<br/>' %} 
<div class="slider-text-overlay-title">
    {{ image_title_string|replace({ (image_title_char_search): image_title_char_replacement })|raw }}
</div>
  

To access image field attributes in Drupal 8 you can call the kint() function that is in the devel module. You can access all sorts of information, one that can be really useful is the title tag.

 // See inside image array
 {{kint(image)}}

 // See title string
 {{kint(image['#attributes'].title)}}

  // Print string inside template
 <span> {{image['#attributes'].title}}</span>

To override a twig template in a custom module the theme hook needs to see which template is needing going be altered and the parent module origin Twig file. In the .module of the custom module that is going to nullify the parent template add the code below.

 

The _theme hook example below is overriding the Blazy modules blazy.html.twig file.  The second preprocessor function hook is adding a custom variable so it can be accessed by the twig template in your module.

In 18.04 currently, Beetbox breaks unless you use the following versions of software Virtualbox, Vagrant 1.9.8 and manually install the NFS server

 

I got an unusual error today. When starting a new vagrant box

 nfs-kernel-server.serviceJob for nfs-server.service canceled

The way I solve it was two steps

  • In vagrant box I remove all duplicate vagrant vms
  • delete the contents of the following file
sudo vim  /etc/exports 

CSS variables a very cool! Notice ":root'  in the example below contains global variables that could be used anywhere in a styles sheet document. 

Below is an example of  HTML5 Javascript browser storage written in pure ES6. Web storage can be used on any website. It stores information locally within the user's browser. Add information to the list and then close your browser and reopen it again and the data will automatically  populate.

I have been playing with the new CSS flex tool and it is amazing. The css use is in the example below.

 

#content {
    display:flex;
    flex-wrap: wrap;
    background: #DAF7A6;
}

#description {
    display: inline-block;
    width:100%;
    background: #FFC300;
    order:3;
}


.article {
    order:2;
    flex:4;
    background: #FF5733;
}

.aside {
    order:1;
    flex:1;
    background: #C70039
}

#three-cols {
    display:flex;
    flex-wrap: wrap;
    background: #581845;
}


#four-cols {
    display:flex;
    flex-wrap: wrap;
    background: #900C3F;
}

#five-cols {
    display:flex;
    flex-wrap: wrap;
    background: #581845;
}

I have been playing with the new CSS grid tool and it is amazing. See what happens when you resize the page

 

In Drupal 8 views an anonymous user has the ability to filter content. When exposes the filters is enabled. But there is no html5 placeholder by default for a text field. The function below will add placeholder text to every views exposed form input as long it has a label.

If site builder needs to create a custom view twig file. In Drupal 8 you have to register a suggestion with the theme array. Adding the function below to your template.theme will give the developer the ability to add a twig file called views-view-viewname--.html.twig.

Pages