Drupal, Silex, Symfony2, Ubuntu, Website Development

Example of using twig functions in Drupal 8

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>
  
Read more

Accessing image field attributes twig in Drupal 8

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>
Read more

Overriding a twig template in a custom module in drupal 8

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.

Read more

ubuntu 18.04 beetbox and vagrant

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 
Read more

CSS variables example

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

Read more

JavaScript browser storage example

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.

Read more

CSS flex example

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;
}
Read more

CSS grid example

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

 

Read more

Drupal 8 views html5 text placeholder

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.

Read more

Creating a custom twig layout for views content in Drupal 8

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.

Read more

Pages