GET A FREE QUOTE

How to use Twig in Drupal 8

Twig is a new feature template engine for PHP. It replaces the PHP templates(.php). Twig works based on Symfony2 framework and Drupal 8 used the Symfony2 code. In Drupal 8, all the theme development works in Twig template while using function and filters. Drupal 8 uses the .html.twig extention in template file.

Twig uses all syntaxes in two formats:

1. {{……}} – Mostly used for declaring variables, storing values or pass values to front/theme

– Write anything between the {{…}}, it will display on Front.
– EX:-

    		1. {{ TEST }} => TEST
    		2. {{ DOM-MASTER }} => DOM-MASTER

2. {%……%} – Used for logic, conditions,

– Write Logic between the {%…%}, like, Conditions, Loop, Set variables values etc.

– EX:-
1. Set variable:-

               {% set var_name = var_value %}

               Now, print the variable:- {{ var_name }}

2. Conditions:-

               {% if (a or b) %}  		
               {% endif %}

3. Loop:-

                {% for key in row %}                 
                     {{ key.value }}
                {% endfor %}

* How to use Twig Functions in Drupal 8:-

1. file_url($uri)

– file_url funcion fetch the relative path of file from the root and generate the uri for file.
– Syntax :-

            {{ file_url(content.file_machine_name.entity.uri.value) }}

– Ex:-

{{ file_url(content.field_middle_image.entity.uri.value) }}

– Write the function in img tag for displaying on the front. Like,

  <img src="{{ file_url(content.field_middle_image.entity.uri.value) }}" />

– Fetch multiple files using file_url and fop loop:-
– Syntax:-

{% for item in content.file_machine_name['#items'] %}
                   {{ file_url(item.entity.uri.value) }}
            {% endfor %}

– Ex:-

{% for item in content.field_middle_image['#items'] %}
                  <img src="{{ file_url(item.entity.uri.value) }}" />
            {% endfor %}

2. link($text, $url, $attributes)
– link () function is used for the create link with attributes.

- $text: - Title of Link
       - $url: -  URL of link
       - $attributes: - Add attributes like classes and name.

Syntax:-

- {{ link($text, $url, $attributes) }}

Ex:-

              - {{ link(item.title, item.url, { 'class':['abc', 'def']} ) }}

Mainly, this function is used for the render menu in template.

3. path ($name, $parameters, $options)

4. url($name, $parameters, $options)

* How to use Twig Filter in Drupal 8:-

1. length

– It returns the length of character or element from the string or array.
– Syntax: – {{ node.field_name.value|length }}
– Ex:- {{ node.field_dom_text.value|length }}

2. raw

– It returns with the HTML text, not a plain text.
– Syntax: – {{ node.field_name.value|raw }}
– Ex: – {{ node.field_dom_text.value|raw }}

3. batch – Batch helps to break the element from loop.
4. trim – It removes the white extra spaces of string.
5. round –

– It return the round figure of number.
– Syntax:- {{ node.field_name.value|round }}
– Ex:- {{ node.field_dom_number.value|round }}

6. date

– It is used for the change of date format.
– Syntax:- {{ date }}
– Ex:- {{ now | date(‘d/m/Y’) }}

7. t

– It is used for the language of translation.

8. placeholder

– It return the text with Italic font style.
– Syntax:- {{ node.field_name.value|placeholder }}
– Ex:- {{ node.field_dom_text.value|placeholder }}

9. reverse

– It return the reverse string to origional string.
– Syntax:- {{ node.field_name.value|reverse }}
– Ex:- {{ node.field_dom_text.value|reverse }}

How to use Twig in Node template:

1. label

– It returns the name of node title.
– Syntax:- {{ label }}

2. fieldDefinition.label

– It returns the label of field.
– Syntax:- {{ node.field_machine_name.fieldDefinition.label }}
– Ex:- {{ node.field_dom_number.fieldDefinition.label }}

Drupal 8 provides the option to override all templates that are producing HTML mark-up so that you can control the whole structure of mark-up using twig. To know which template is producing the mark-up for a particular element, you can use Twig’s built in debug option. The Twig engine allows for configuring debugging, automatic reloading (recompiling) of templates, and caching compiled templates. Twig provides various handy functions that can be used directly within Templates.

This was a quick and short article on how to use Twig in Drupal 8. If you face any issues in setting up Twig in your Drupal 8 template, please let us know.

cmsMinds is a leading Drupal development agency in RTP (Raleigh, Durham, Cary). We have assisted clients in migration of D7 to D8 projects or creating new projects in Drupal8. As an agency we do have designers, developers, QA and PM to ensure that we can help you with complete life cycle of the project.

Entity Reference & Entity Reference View in Drupal 8

What is Entity Reference?

The term “Entity Reference” literally means reference to the entity. Entities are used to store data, which could be a node, a user, a taxonomy term, or a custom drupal development.

Entity Reference is an important module to build relationships between entities in Drupal. Below are some of the examples of relationship:

1) A taxonomy term associated with a user account.
2) A parent content that references a child content element.

How to use Entity Reference?

Below are the steps to use entity reference in Drupal 8.

Step1: Create settings related to Entity Reference module from backend.
Step2: Create Content type.
Step3: Add/Edit fields of content type through Home -> Administration -> Structure -> Content Types -> Content type (ie:user) -> Manage fields, Add a new Entity Reference field.
Step4: Choose the number of values.
Step5: Set Entity Reference type.
Step6: Select Entity Reference method.
Step7: Set the target bundles.
Step8: For Views: Filter by an entity reference view and follow screen-shots, below.

As we complete above steps – you can view changes in front as well.

What is Entity Reference View?

For Drupal content creators, Entity Reference Views is a great way to make content management easier.
Normally, when users create content on the site, each field is very plain. However, Entity Reference Views allows you to provide for more information. For example, instead of just showing a list of users, your content creators can browse through a list of names, photos and personal details.

How to use Entity Reference View?

Steps to use Entity Reference View in Drupal 8.
1) Create a content View.
2) Add a field with the Entity Reference View.

Below are the steps that combine steps of Entity Reference and Entity Reference View explained with screenshots.

1) Create Content Type:

2) Add Entity Reference field:

3) Create Entity Reference View to use it as Entity Reference and set it as Entity Reference in Reference method:

4) Create another Entity Reference View:

5) Add Entity Reference while creating Entity Reference View:

6) Change Reference Type from default to views: Set entity reference view (created in step4) in Reference method while setting reference type.

Hope the article helps you how to use Entity reference module in your project. If you need help or have any follow up questions, please don’t hesitate to contact us @ info@cmsminds.com. cmsMinds is a drupal web development company in Raleigh,NC, based in Raleigh with expertise in open source CMS (WordPress, Drupal) and PHP.

Paragraph Module in Drupal 8

To make your content more appropriate and easy we have come up with a new module that will help you to segregate the content into paragraph.Paragraph module: It provides more editing power to end users. It allows option to add content based on the Paragraph type instead of inserting whole content section in WYSIWYG body. Install https://www.drupal.org/project/paragraphs module for configuring this option in Drupal 8 website.

For this tutorial, we will create a basic Content paragraph type which will have two fields: Left Image and Description.

Steps for adding these fields in paragraphs type.

1. Go to the navigation bar click on Structure and “Paragraphs types”.

2. On this link “Add a Paragraphs type” button will be available for adding paragraphs type in site. Click on “Add a Paragraphs type” button.

3. You just need to add paragraphs type name (Demo) and click on save button for adding Paragraph type.

4. Now, add fields in this paragraphs type.

5. Add two fields (image and text) in this paragraphs type.

For using this paragraphs type in website, add this paragraph field to content type ‘Article’ as field. Check below image for adding field as Paragraph type.

Create Article with Paragraph fields.

1. Go to Content, “Add content” and click on Article.

2. Enter “Test article” in the Title and scroll down to the Paragraphs Demo field.

3. Click on the Add Demo for adding left image and Desc paragraph content with respect to Article. After adding it, you should be able to see the content of this Paragraph.

To reciprocate, we can manage the content of the website by dividing whole page section into different paragraph type.

As a Drupal development agency in Raleigh USA, we have a team of experts who specializes in different aspect of Drupal development. We have team members whose focus is to have a clean design and renders well across all browsers and devices. The Drupal backend developers’ focus is to build custom Drupal modules and integrate with different applications.

For more assistance you can contact us on info@cmsminds.com or fill out the Contact us form.

 

How to setup Multi-site in Drupal 8

Drupal 8 provides multi-site feature to use same code for different sites. You can manage multiple websites easily using the multi-site feature of Drupal 8. Multi-site allows you to use a single Drupal installation for several sites with core code, contributed modules and themes. You can also manage configuration settings and database separately for each site so it will have its own content, settings, enabled modules and enabled theme. We have shared two flow for managing multi-site feature.

How to setup multisite in Drupal 8 with different database?

Step 1: Download latest Drupal 8 and extract code in your project directory with respect to your environment like WAMP, MAMP, LAMP, XAMPP, etc.

Step 2: Go to “sites” folder and create the following folders
domain1.com , domain2.com as per the below Structure image.

Note: Please create virtual hosts (domain1.com and domain2.com) in your localhost environment.

Step 3: In “sites” folder copy “example.sites.php” and rename file to “sites.php” and add the following lines to configure the above sites in your Drupal 8 website.

$sites[‘domain1.com’] = ‘domain1.com’;
$sites[‘domain2.com’] = ‘domain2.com’;

Step 4: We need two databases for both websites so create domain1_db and domain2_db database respectively for domain1.com and domain2.com sites.

Step 5: After above configurations, install both the site using below URL and after installation, access multi-site feature.

domain1.com/core/install.php
domain2.com/core/install.php

How to setup multisite in drupal 8 within a single database?

We need to follow the same Step1, Step2 and Step3 as above.

Step 6: Create one database domain_db for managing multi-site through single database.

Step 7: After above configurations, install both the site using below URL. After installation access your multi-site feature. During the installation, use different table name prefix for each sites configuration. Please do check table prefix configuration image.

domain1.com/core/install.php
domain2.com/core/install.php

After adding different prefix to each site, it will have it’s table in single database. Please do check the attached Database Table image. We have added test1 prefix for domain2.com.

Hope, the article helps you get an overview of how to setup multi-site with same code. As a leading Drupal development company in Raleigh, NC, we have qualified team of nerdy Drupal developers. If you working on a project and need some help, please contact one of our team members and see how we can help you.

How to use GITHUB to contribute to Drupal core or module?

Git is a leading version control system for software projects and Drupal.org uses Github for version control with it’s developers and Drupal community to build it’s core and contrib module. In this blog, I will share my experience on how to use Github to contribute code to Drupal.org.


Drupal follows git’s branches and tags for managing code. Steps and naming conventions.

 

1. A branch manages the commit code, and it moves forward automatically.

For Drupal to release naming conventions for branch first time use below naming conventions.

7.x-1.x (For Stable and dev)

8.x-1.x (For Stable and dev)

 

Below are not valid naming conventions:

7.x-1.1 (For Stable and dev)

8.x-1.1 (For Stable and dev)

 

2. Tags are used for creating releases of the project.

Below are valid naming conventions.

unstable(deprecated)             

7.x-1.0-dev1 (For dev)

8.x-1.0-dev1 (For dev)

7.x-1.0-alpha1 (For alpha)

8.x-1.0-alpha1 (For alpha)

7.x-1.0-rc1 (For dev)

8.x-1.0-rc1 (For dev)

7.x-1.1 (For Stable)

8.x-1.1 (For Stable)

 

Below are not valid naming conventions.

7.x-1.0-release1 (wrong word)

7.x-1.0-rc (doesn’t end in a digit)

7.x-1.0-UNSTABLE1 (uppercase)

 

List of command to use git for Drupal code contribution.

  1. Install GIT on the system
  2. Configure GIT using below command
    1. git config user.email “yourmailid@mail.com”
  1. After the configuration, you can clone the project using GIT command. Example below:
    1. git clone –branch 8.4.x https://git.drupal.org/project/drupal.git
  1. Go into the project directory by below command
  2. cd drupal
  3. Now check git status (Show the working tree status and check the repository status.)
  4. To check branch under this project. We have to use command git branch (Show the branch and tracking info.)
  5. To get list of tags use git tag -l (Get list all Git tags)
  6. For adding a new branch use below command
  7. git checkout -b 8.x-1.x (First create the new branch and check it out)
  8. git push origin 8.x-1.x (Once the branch is created locally, it can be pushed up to the remote repository)
  9. git checkout 8.x-1.x         (To work with this branch)
  10. For adding, a new tag use below command
  11. git tag 8.x-1.0         (First create the new tag)
  12. git push origin tag 8.x-1.0 (Once the branch is created locally, it can be pushed up to the remote repository)
  13. If you want to switch to a different branch, use below commands.
  14. git branch -a
  15. git checkout [branchname]
  16. Committing all changes locally using below commands.
  17. git add -A
  18. git commit -m “Issue #[issue number] by [comma-separated usernames]: [Short summary of the change].”
  19. Pushing the code back to the repository on Drupal.org
  20. git push -u origin [branchname]

Patching

If you haven’t cloned the repository, follow the directions above for setting up this repository in the local environment. Be sure you are on the branch you wish to patch, then ensure it is up-to-date with the following command:

git pull origin [branchname]

 

Creating a patch

For improvements, use the following command after making changes:

git diff > [description]-[issue-number]-[comment-number].patch

For more complex improvements see the Advanced patch workflow.

Applying a patch

Download the patch to the working directory. Apply the patch with the following command:

git apply -v [patchname.patch]

To avoid accidentally including the patch file in future commits, remove it after applying patch to the directory.

rm [patchname.patch]

When you’re done: Reverting uncommitted changes

Revert changes to a specific file:

git checkout [filename]

Revert changes to the whole working tree: git reset –hard

 I hope the article give you the basic information on how to use GITHUB and contribute to the Drupal.org community. cmsMinds actively participates in Drupal community and has contrib modules it maintains. Please share your feedback and let us know if we can help you as custom Drupal development company in NC, USA.

Quick Inquiry