How to render fields on node twig templates?

It is easy way to render node fields on node template. We just have to create template file according to content type machine name like 'landing page' is content type, So machine name will be 'landing_page', but our template name will be 'node--landing-pages--full.html.twig' as per Drupal 8(Symphony) Syntax.

and we will call/render fields like..


Node id: {{ node.id }} // Node id

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

Node Title: {{ label }}  // Node title

Node Bundle: {{ node.bundle }}  // Node bundle its means content type name

Node Publish Status: {{ node.isPublished() }}  // Retrun node is published or not

Node Created Time: {{ node.getCreatedTime() }}  //will return node created timestamp

Node Plain(Text) Field: {{ node.field_machine_name.value }}  //will return node plain field value

Node Image: {{ file_url(node.field_full_banner_image.entity.fileuri) }} or {{ file_url(node.field_full_banner_image.entity.uri.value) }}  // show url of full banner image is the image field in node

Node Description/body: {{ content.body }}

Node Link field: {{ node.field_machine_name.0.url }}

Node Link Field Title Value: {{ node.field_machine_name.0.title }}

Node custom field: {{ content.field_machine_name }}  or {{ content.field_machine_name[0] }}  // ex:{{ content.field_resources_content_type }}

If you want to check field value return or not the we have multiple options like.
// here we are checking field banner video return or not.
{% if content.field_banner_video|render %}  
  // write comment here..
{% endif %}

OR

// here we are checking field carousel title is empty or not.
{% if content.field_carousel_title[0] is not empty %}
  // write comment here..
  {{ content.field_carousel_title[0] }}
{% endif %}


Split array in twig:

We have split option also in twig file in symphony, please have a look.
{% set videogal_value_variable = videogall|split('~~') %}
like 'videogall' is an array and separated by ~~ sign so we will do like this for break and use.
{{ videogal_value_variable.0 }}
{{ videogal_value_variable.1 }}
and so on.


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

drupal 8 images with custom style.

If we want to apply the custom styling on image path then we have to create first with go to Configuration -> media -> image styles or /admin/config/media/image-styles
then click on Add image style and according to requirement choose effect option like Convert, Crop, Resize, Rotate, Scale, Scale and Crop, Desaturate and apply height/width and save it, then get the machine name of your custom create style and apply like this syntax.

Image style listing

Add new image style

Apply Effect

Call the ImageStyle library on header of file.
use Drupal\image\Entity\ImageStyle;

Then get the uri of image..

$path = 'public://images/image.jpg';
$url = ImageStyle::load('style_machine_name')->buildUrl($path);   

OR direct use this syntax..
$product_image = \Drupal\image\Entity\ImageStyle::load('related_products')->buildUrl($nodeload->field_banner_image->entity->getFileUri());   

here 'related_products' is the machine name of custom image style and 'field_banner_image' is the machine name of banner image, and this is $nodeload->field_banner_image->entity->getFileUri() the uri of banner image by node::load.

Note: If have any suggestions or issue regarding 'drupal 8 images with custom style.' then you can ask by comments.

Vocabulary or Taxonomy load in Drupal 8.

If we have vocabulary/taxonomy name then we can easily load by loadTree, follow the syntax.

$tree = \Drupal::entityTypeManager()->getStorage('taxonomy_term')->loadTree('write vocabulary machine name here');
foreach ($tree as $term) {
  echo $term->tid.' - '.$term->name;
}

Example:
$select_category .= '<select><option value="0">- Select -</option>';
$tree = \Drupal::entityTypeManager()->getStorage('taxonomy_term')->loadTree('product_family'); //here product_family is machine name of Product Family taxonomy.
foreach ($tree as $term) {
$select_category .= '<option value="' . $parent . '_' . $term->tid . '">' . $term->name . '</option>';
}
$select_category .= '</select>';


Note: If have any suggestions or issue regarding 'Vocabulary or Taxonomy load in 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.

Programmatically add canonical, shortlink, viewport and robots in site header.

For add Programmatically, first we will work on .theme file, we will create alter attachments in .theme file like 'theme_name_page_attachments_alter(array &$page).
Code for add 'viewport' in html head is..
<?php
function theme name/module name_page_attachments_alter(array &$page) {
    $viewport = [
      '#type' => 'html_tag',
      '#tag' => 'meta',
      '#attributes' => [
        'name' => 'viewport',
        'content' => 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no',
      ],
    ];
    $page['#attached']['html_head'][] = [$viewport, 'viewport'];

global $base_url;
$current_page = \Drupal::request()->getpathInfo();   
$canon_url = $base_url.''.$current_page;  
  
Code for add 'canonical' in html head is..
    $viewport_canonical = [
      '#type' => 'html_tag',
      '#tag' => 'link',
      '#attributes' => [
        'rel' => 'canonical',
        'href' => $canon_url,
      ],
    ];
    $page['#attached']['html_head'][] = [$viewport_canonical, 'canonical'];   

Code for add 'shortlink' in html head is..
    $viewport_shortlink = [
      '#type' => 'html_tag',
      '#tag' => 'link',
      '#attributes' => [
        'rel' => 'shortlink',
        'href' => $canon_url,
      ],
    ];
    $page['#attached']['html_head'][] = [$viewport_shortlink, 'shortlink'];       
       

For add robots programmatically on site header, we have to work on 'theme_name_preprocess_html(&$variables).
Code for add 'robots' in html head is..
    $noindex = [
        '#tag' => 'meta',
        '#attributes' => [
            'name' => 'robots',
            'content' => 'noindex, nofollow',
        ],
    ];
    $variables['page']['#attached']['html_head'][] = [$noindex, 'noindex'];     

?>

Note: If have any suggestions or issue regarding 'Programmatically add canonical, shortlink, viewport and robots in site header.' 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.

Naming convention for node/content type template in drupal 8.

The naming convention of node/content type is very simple and we will explain by example here..

Example 1. If we have content type with name of 'customer story' so our this content type machine name will be 'customer_story' but we will take as a 'node--customer-story--full.html.twig' in naming convention.

Example 2. If we have content type with name of 'products' so our this content type machine name will be 'products' but we will take as a 'node--products--full.html.twig' in naming convention.

Example 3. If we have basic page single node like node id '58', So we will take as a 'node--58.html.twig' in naming convention.


Note: If have any suggestions or issue regarding 'Naming convention for node/content type template' then you can ask by comments.