How to create a home page content block and render the front end page in Drupal.
Here we are discussing how to render a block like below in in front page twig template and how administrators can easily manage all text or media contents in this cards from backend.
Step 1 – Create region
In your theme , your_theme.info.yml, add a region called features as below, key as features and value as Features section.
Step-2 Add region front page twig template
In your theme page, page–front.html.twig file, add below to render the region.
{%- if page.features -%}
<section id="features" class="features-section">
{{ page.features }}
</section>
{%- endif -%}
Step 3 Create a custom block type
Create a custom block type under Structures->Block Types.
Create the block type Choose Us section and add below fields for each card.
Here Choose us title is the main title of the feature section, then the sub title is the text below the main title. Each card has title and description fields.
Make sure whatever content in the feature section you want manage from the backend, add those fields in this block type.
Step 4 Add custom block content
After creating required fields in block type navigate to the content page in admin. Navigate to /admin/content.
Select blocks tab in content page as below.Then click on Add content block.
Provide all contents needed for each field.
Step 5 Assign block to region
You have created the feature section content block above. Now navigate to Structure -> Block Layout page.(Path – /admin/structure/block).
Select your theme and see your feature section region. Click on the place block.
Filter the content block you created for the feature section, then click on place block.
After placing a block you can see feature section region is having a content block you created with required contents needed in your feature section.
Step 5 Customise block template.
In this last step we have to identify in which block template our feature section block is rendering in order to customize rendering elements.
Make sure you have enabled twig debugging in file /sites/default/services.yml. Clear the cache and load the front page. You can see your feature section block template suggestion as below. Here testsshana is my theme machine name.
In your theme folder templates/block path, place block–testshana-featuresection.html.twig file.
Render each field in this template as below.
<div class="container">
<div class="row">
<div class="col-12">
{% if content.field_choose_us_title|render|striptags|trim %}
<h2 class="section-title">{{ content.field_choose_us_title['#items'].0.value }}</h2>
{% endif %}
{% if content.field_sub_title|render|striptags|trim %}
<p class="section-subtitle">{{ content.field_sub_title['#items'].0.value }}</p>
{% endif %}
</div>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-rocket"></i>
</div>
{% if content.field_card_1_title|render|striptags|trim %}
<h3 class="feature-title">{{ content.field_card_1_title['#items'].0.value }}</h3>
{% endif %}
{% if content.field_card_1_description|render|striptags|trim %}
<p class="feature-description">{{ content.field_card_1_description['#items'].0.value }}</p>
{% endif %}
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
{% if content.field_card_2_title|render|striptags|trim %}
<h3 class="feature-title">{{ content.field_card_2_title['#items'].0.value }}</h3>
{% endif %}
{% if content.field_card_2_description|render|striptags|trim %}
<p class="feature-description">{{ content.field_card_2_description['#items'].0.value }}</p>
{% endif %}
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-users"></i>
</div>
{% if content.field_card_3_title|render|striptags|trim %}
<h3 class="feature-title">{{ content.field_card_3_title['#items'].0.value }}</h3>
{% endif %}
{% if content.field_card_3_description|render|striptags|trim %}
<p class="feature-description">{{ content.field_card_3_description['#items'].0.value }}</p>
{% endif %}
</div>
</div>
</div>
</div>Clear the cache. You can see you your block content in in your front page.
