Drupal for beginner Basic required tool and data With some basic instructions.

Download Drupal using Composer
For 9:- composer create-project drupal/recommended-project:9.2.1 my_site_name_dir
For 8:- composer create-project drupal/recommended-project:8.9.15 my_site_name_dir

Admin Toolbar Module
for drupal 9,8:-composer require 'drupal/admin_toolbar:^3.0'


Paragraph Module
For drupal 9,8:- composer require 'drupal/paragraphs:^1.12'

Module To check Statndard formate of drupal

composer require --dev drupal/coder dealerdirect/phpcodesniffer-composer-installer
./vendor/bin/phpcs --standard=Drupal web/modules/custom/footer/src/Plugin/Block/MyBlock.php
./vendor/bin/phpcs --standard=DrupalPractice web/modules/custom/footer/src/Plugin/Block/MyBlock.php
To correct automaticaly:-- ./vendor/bin/phpcbf --standard=Drupal web/modules/custom/footer/src/Plugin/Block/MyBlock.php
To correct manually./vendor/bin/phpcs --standard=Drupal web/modules/custom/footer/src/Plugin/Block/MyBlock.php

Contact Storage
For drupal 9,8:- composer require 'drupal/contact_storage:^1.1'

Web Form Module
For Drupal 9,8:- composer require 'drupal/webform:^6.0'

viewfield Module
For Druapl 9,8:-composer require 'drupal/viewfield:^3.0@beta'

Block Field Module
composer require 'drupal/block_field:^1.0@RC'

Kint/Devel Module
composer require 'drupal/devel:^4.1'

Loop in paragraph For Slider

<div class="carousel-inner">
    {% for key, option in paragraph.field_inner_slider %}
    {% if key matches '/^\\d+$/' %}
    {% if loop.first %}
    <div class="carousel-item active">
        <img src="{{ file_url(option.entity.field_slider_img.entity.fileuri) }}">
        <div class="banner-section">
            <div class="container">
                <div class="banner-text">
                    {{ option.entity.field_slider_text.value|striptags }}
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="carousel-item ">
        <img src="{{ file_url(option.entity.field_slider_img.entity.fileuri) }}">
        <div class="banner-section">
            <div class="container">
                <div class="banner-text">
                    {{ option.entity.field_slider_text.value|striptags }}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    {% endif %}
    {% endfor %}           
</div>
       

Loop for child para

{% for key, option in paragraph.field_citizens_child %}
{% if key matches '/^\\d+$/' %}
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="counter-box text-center">
            <div class="counter-inner">
                <img  class="nor-img" src="{{ file_url(option.entity.field_citizens_img.entity.fileuri) }}" alt="dash1">
                    <img class="hvr-img" src="{{ file_url(option.entity.field_citizens_hover_img.entity.fileuri) }}" alt="dash11">
                    <h1 class="number">{{ option.entity.field_citizens_count.value }}</h1>
                <p class="cont-txt" style="font-size: 20px;">{{ option.entity.field_citizens_title.value }}</p>
            </div>
        </div>
    </div>
{% endif %}
{% endfor %}

Link in Paragraph
{{ content.field_strategy_linkbtn[0]['#title']|render }}
{{ content.field_strategy_linkbtn[0]['#url']|render }}

Nested para anchor
{{ option.entity.field_strategy_linkbtn_inner.0.url }}
{{ option.entity.field_strategy_linkbtn_inner.title }}

Img in para
{{ file_url(paragraph.field_strategy_binimg[0].entity.uri.value)}}
{{ file_url(paragraph.field_meeting_image.entity.uri.value) }}

Redner Image field in Paragraph
<div style="background-image: url('{{ file_url(content.field_masthead_image['#items'].entity.uri.value) }}');">

Img nested para
{{ file_url(option.entity.field_news_slide_child_img.entity.fileuri) }}

Text in Para
{{ item.content.context.value|raw }}
{{paragraph.field_meeting_text.value}}
{{paragraph.field_meeting_text.value|striptags}}

Link in Para
For url{{ paragraph.field_contact_us2.uri }}
For Title{{ paragraph.field_contact_us2.title }}

Link in nested Para
For link Url{{ option.entity.field_field_news_feed_inner_link.uri }}
For link Title{{ option.entity.field_field_news_feed_inner_link.title }}

Text in nested para
{{ option.entity.field_news_feed_inner_text1.value }}

print date in paragraph with formate
{{ option.entity.field_event_date.value| date("j F Y")}}

view unformatted view field render
{{ view.style_plugin.getField(loop.index0, 'field_video_banner_slide') }}

Img in view

{{file_url(row.content['#row']._entity.field_banner_img.entity.uri.value)}}

Text in view
 {{row.content['#row']._entity.field_banner_title[0].value}}

Link in view

{{row.content['#row']._entity.field_banner_linkbtn[0].url}}
{{row.content['#row']._entity.field_banner_linkbtn[0].title}}

render View node url by value name('nid')
{{path('entity.node.canonical', {'node': row.content['#row']._entity.nid.value}) }}



Date in view
{{row.content['#row']._entity.field_event_date[0].value| date("j M Y")}}

Render webform in region
{{ { '#type': 'webform', '#webform': 'for_regular_updates' } }}

Redner any block in region
{{ drupal_block('system_menu_block:footer') }}


Custom Theme in Drupal 8


Create folder name custom in themes
Create Theme_Name folder in Custom
Create css,js,images,fonts,templates folder in themes folder
Create Theme_Name.info.yml
Create Theme_Name.libraries.yml


In Theme_Name.info.yml
name: Theme_Name
description: This is Expert Theme
type: theme

core_version_requirement: ^8 || ^9 

package: other


libraries:
  - expert/global-css-and-js

regions:
  header_logo: 'Header Logo'
  header_contact: 'Header Contect'

In Theme_Name.libraries.yml
global-css-and-js:
  css:
    theme:
      https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,700&display=swap: { external: true }
      css/style.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Past Logo image in Theme_Name folder
and screenshot named image in Theme_Name

Git Commands


To create Branch:- git checkout-b <branchname>
To check branch:- git branch <branchname>
To switch branch:- git checkout <branchname>

To check status:- git status
To check file content:- git diff <filename>
To add file:- git add <filename>
To send message:- git commit -m <message>
To push or send file:- git push origin <repo>(develop)

To take file:- git pull origin develop

To import:- drush cim
To export:- drush cex


composer require --dev drupal/coder dealerdirect/phpcodesniffer-composer-installer
$config['system.logging']['error_level'] = 'verbose';

$config_directories[CONFIG_SYNC_DIRECTORY] = 'sites/default/sync';


To Generate token for X-CSRF-Token
http://localhost/MeraDrupal/web/rest/session/token


How to apply or add new file/folder in patch

Add any new file in clone folder
git add -N {filename/foldername}
git add -p
git diff --cached > [description]-[issue-number]-[comment-number].patch

first test it on local to be sure that your changes are reflecting on patch.

revert back the changes {delete the newly created file}

git apply -v {patchfile}


{{- about_us|render|striptags[:150] ~ '...' -}}

Split a field data/text

{% set count_item = content.field_title[0]['#text']|split(" ") %}
{{count_item[0]}} <span>{{count_item[1]}} </span>

Remove a language initial from the Url
{% set base_url = url('<front>')|render|split('/', -1)|join('/') %}

Php Drupal statdard Coder checker

To setup
    composer global require drupal/coder
    composer global update drupal/coder --prefer-source
    composer global require drupal/coder dealerdirect/phpcodesniffer-composer-installer
    composer global require phpcompatibility/php-compatibility

To check the coding stantdard of any file module.theme etc
    phpcs --standard=Drupal --extensions=php,module,inc,install,test,profile,theme,css,info,txt,md,yml {File Path}
    phpcs --standard=DrupalPractice    --extensions=php,module,inc,install,test,profile,theme,css,info,txt,md,yml {File Path}

Comments

Popular posts from this blog

Theme Starter Kit Drupal 10