How to add attributes in drupal 8 twig file?

Easy to use and to add attributes in drupal 8 twig file, here are some examples for attributes:
Add Class attributes..
Syntax: {{ attributes.addClass('myclass') }}
Example: <div {{ attributes.addClass('myclass') }}> <!-- any stuff here --> </div>
//here classes is the class name.
Remove Class attributes..
Syntax: {{ attributes.removeClass('myclass') }}

Example: <div {{ attributes.removeClass('myclass') }}> <!-- any stuff here --> </div>
here classes is the class name.
Add and Remove both attributes..
<div {{ attributes.addClass('myclass').removeClass('node') }}>

</div>
Add Multiple classes attribute..
{%
set classes = ['region','region-header']
%}
<div {{ attributes.addClass(classes)>
result: <div class="region region-header">

Add a setAttribute..
attributes.setAttribute($attribute, $value)
Syntax: <div{{ attributes.setAttribute('id', 'myID') }}></div>
Example: <div id="myID"></div>
 
Remove attributes..
attributes.removeAttribute($attribute)
Syntax: <div{{ attributes.removeAttribute('id') }}></div>

Check class exist or not..
attributes.hasClass($class)
Syntax:
{% if attributes.hasClass('myclass') %}
  {# here stuff #}
{% endif %}

Note: How to add attributes in drupal 8 twig file?

How to find text from URL in Twig Template drupal 8?

It is easy way to find any text in any string or url in a Twig template file, here is we have syntax structure for this problem, have a look.

Syntax:

                 {% set testvar = url('<current>') %}
                 {% if 'test' in testvar|render|render %}
                         <p>url contains "test"</p>
                 {% endif %}

Description: here we set a 'testvar' variable with contain of current page URL, and then we find a 'test' string in 'testvar' variable means in URL, if contain string then <p> tag data will print.

Example:
               {% set testvar = node.field_link.0.url %}
               {% if '/node/add' in testvar|render|render %}                               
               {% else %}
               <a href="{{ node.field_link.0.testvar }}">Read More</a>
               {% endif %} 

Description: here 'testvar' variable contain the value of that 'node.field_link.0.url' field. and we are checking/finding the '/node/add' string. if this will exist in then data will not display and in else case 'Read More' will display with that link.



Note: If have any suggestions or issue regarding 'How to find text from URL in Twig Template drupal 8?' then you can ask by comments.

How to render fields on Taxonomy twig templates?

It is easy to call/render taxonomy fields on taxonomy template. We just have to create template file according to vocabulary machine name like 'application landing page' is taxonomy and machine name will be 'application_landing_page', but our template name will be 'taxonomy-term--application-landing-page.html.twig' as per Drupal 8(Symphony) Syntax.

and we will call/render fields like..


Term id: {{ term.id }}  // term id

Term Url: {{ url }}  // current page url

Term Title: {{ term.label }}  // term title

Term Image: {{ file_url(term.field_product_group_image.entity.uri.value) }}  // show url of product group image is the image field in taxonomy

Term Description/body: {{ content.description }}

Term Link field: {{ term.field_link.0.url }}

Term Link Title field: {{ term.field_link.0.title }}

Term custom field: {{ content.field_machine_name }}


If we want to check any field value exist or not then we are giving an example like we have field 'line of business' so machine name will be line_of_busines and we will check by..

{% if content.field_line_of_busines is not empty %}

{{ content.field_line_of_busines }}

{% endif %}



Note: If have any suggestions or issue regarding 'How to render fields on Taxonomy twig templates' then you can ask by comments.

Create custom twig file and include in twig file.

For create custom twig file,
Example 1: We just have to create a file like 'instrument.html.twig' so for include this file simple code is..
     {% include('instrument.html.twig') %}

Example 2: We just have to create a file like 'consumable.html.twig' so for include this file simple code is..
     {% include('consumable.html.twig') %} 

Example 3: We just have to create a file like 'abc.html.twig' so for include this file simple code is..
     {% include('abc.html.twig') %}


Note: If have any suggestions or issue regarding 'include twig file' then you can ask by comments.

Multiple images store in variable and render on twig file.

Yes, we have option for render multiple images on any template file. We just have to create variable in .theme file and collect in array and then print array value by variable.

Example: First we have to take the step on hook_preprocess_node(&$variables). we have to check node value is available or not.

if(isset($variables['node'])){

    $node = $variables['node'];

    $current_node_id = $node->id(); //get the current node id

    $node_type = $node->type->target_id;  //get the current node type

    if($node_type == "applications"){  // we are going with example of applications content type nodes..
  
    /*  Now we will get the fields by node::load  */
  

    $categoryid = $node->get('field_category')->target_id; //here field_category is Category field machine_name..

        $category_detail = \Drupal\taxonomy\Entity\Term::load($categoryid);

        $variables['category_name'] = $category_detail->name->value;  // get the category name

        $variables['landing_page']  = $category_detail->field_setup_landing_page->value;  // get the field_setup_landing_page field value     

        /* here 'category_name' and 'landing_page' is our variable keys */    

        $node_detail = Node::load($current_node_id);                          


        $node_id = $node_detail->id();                   // get the node id

        $node_title = $node_detail->getTitle();          // get the node title

        $node_Published = $node_detail->isPublished();   // get the publish status

        $node_type = $node_detail->getType();            // get the node type

        $node_field_model_value = $node_detail->get('field_model')->value;   // get the field model value

        $node_field_price_value = $node_detail->get('field_price')->value;   // geth the field price value

         $img_urls = array();
        foreach ($node_detail->field_image as $item) { // get the field image with multiple image url
          if ($item->entity) {
            $img_urls[] = $item->entity->url();
          }
       
        }


        /* Now put the all values in array with keys for differentiate */

        $arr = array('id'       => $node_id,

                     'title'    => $node_title,

                     'published'=> $node_Published,

                     'type'     => $node_type,

                     'model'    => $node_field_model_value,

                     'price'    => $node_field_price_value,

                     'image'    => $img_urls

        );


        /* Now pass the $arr in final productfields variable like this.. */

        $variables['productfields'] = $arr;  

        This is our final product fields variable now we have to move on applications type twig file because we are working for specially applications type of contents.

        Suppose are applications type twig file name is 'node--applications--full.html.twig'. That file is for applications detail pages.

        <ul>

        {% for key, value in productfields %}
        {% if key == 'image' %}
            <ul>
            {% for keys, imgvalue in value %}
                <li class="{{ keys }}"><img src="{{ imgvalue }}"></li>
            {% endfor %}
            </ul>
        {% endif %}
        {% endfor %}  

        </ul>

  /* here 'productfields' is same variable name which we are created in 'hook_preprocess_node(&$variables)' hook in .theme file, so we just have to print the array keys and value by for loop in Symphony syntax, So that is the easy way to create custom variable and then render values in twig file. */

    }      

}

Note: If have any suggestions or issue regarding 'Multiple images store in variable and render on twig file.' then you can ask by comments.

Create custom variable in drupal 8 and render on template file.

We have alternate option for custom variable in drupal 8. Now we will going to describe that how to create custom variable and use on any template file.
here we are going to giving an example with easy steps for custom variable use and render on file.
Example: First we have to take the step on hook_preprocess_node(&$variables). we have to check node value is available or not.
if(isset($variables['node'])){
    $node = $variables['node'];
    $current_node_id = $node->id(); //get the current node id
    $node_type = $node->type->target_id;  //get the current node type
    if($node_type == "products"){  // we are going with example of products content type nodes..
   
    /*  Now we will get the fields by node::load  */
   
    $categoryid = $node->get('field_category')->target_id; //here field_category is Category field machine_name..
        $category_detail = \Drupal\taxonomy\Entity\Term::load($categoryid);
        $variables['category_name'] = $category_detail->name->value;  // get the category name
        $variables['landing_page']  = $category_detail->field_setup_landing_page->value;  // get the field_setup_landing_page field value
       
        /* here 'category_name' and 'landing_page' is our variable keys */
       
        $node_detail = Node::load($current_node_id);                           

        $node_id = $node_detail->id();                   // get the node id
        $node_title = $node_detail->getTitle();          // get the node title
        $node_Published = $node_detail->isPublished();   // get the publish status
        $node_type = $node_detail->getType();            // get the node type
        $node_field_model_value = $node_detail->get('field_model')->value;   // get the field model value
        $node_field_price_value = $node_detail->get('field_price')->value;   // geth the field price value
        $node_field_image_value = $node_detail->get('field_image')->entity->uri->value; // get the field image with single image url

        /* Now put the all values in array with keys for differentiate */
        $arr = array('id'       => $node_id,
                     'title'    => $node_title,
                     'published'=> $node_Published,
                     'type'     => $node_type,
                     'model'    => $node_field_model_value,
                     'price'    => $node_field_price_value,
                     'image'    => $node_field_image_value
        );

        /* Now pass the $arr in final productfields variable like this.. */
        $variables['productfield'] = $arr;
       
        This is our final product fields variable now we have to move on products type twig file because we are working for specially products type of contents.
        Suppose are products type twig file name is 'node--products--full.html.twig'. That file is for products detail pages.
        <ul>
        {% for key, value in productfield %}
       
        <li>{{ key }} | {{ value }}</li>
       
        {% endfor %}   
        </ul>
       
        /* here 'productfield' is same variable name which we are created in 'hook_preprocess_node(&$variables)' hook in .theme file, so we just have to print the array keys and value by for loop in Symphony syntax, So that is the easy way to create custom variable and then render values in twig file. */
    }
       
}

Note: If have any suggestions or issue regarding 'Custom variable in drupal 8 and render on template file.' then you can ask by comments.