News 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac urna eros. ...
read more
25
Aug - 2025
Portfolio - Components
View All Components
Component: News Listing
Features:
- use img blur for uniform size images
- allow sorting of news items by id
Notes:
- use Views Reference Field and Views Argument Order Sort modules
- minimize css generated by views
- Use
add_libraryto call css/js on demand
News Listing
views-view-unformatted--news-listing-masonry.html.twig
<div class="container">
<div class="row" data-masonry='{"percentPosition": true }'>
{% for row in rows %}
{{ row.content }}
{% endfor %}
</div>
</div>
views-view-unformatted--news-listing-grid.html.twig
{% for row in rows %}
{{ row.content }}
{% endfor %}
views-view-unformatted--news-listing-rows.html.twig
{% for row in rows %}
{{ row.content }}
{% endfor %}
views-view-fields--news-listing-masonry.html.twig
{{ attach_library('hcann_subtheme/masonry') }}
{% set text = fields.field_subheading.content|render|striptags|trim %}
{# below fixes issue with background images not showng when using {{ fields.field_news_images.content|raw|striptags }} with Twig Debugger enabled #}
{% set img = file_url(row._entity.field_news_images.entity.uri.value) %}
{% set alt = row._entity.field_news_images.alt %}
<div class="col-sm-6 col-lg-4 mb-4">
<article class="post post-medium border-0 pb-0 mb-5">
<div class="post-image">
<a href="/node/{{ fields.nid.content|striptags|trim }}">
<img src="{{ img }}" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0" alt="{{ alt }}" >
</a>
</div>
<div class="post-content">
<h2 class="font-weight-semibold text-4 line-height-6 mt-3 mb-2"><a href="{{ fields.nid.content|striptags|trim }}">{{ fields.title.content|striptags|trim }}</a></h2>
{{ text|length > 75 ? text|slice(0, 75) ~ '...' : text }}
<div class="post-meta">
<span><i class="far fa-user text-primary"></i> By {{ fields.field_full_name.content }}</span>
{% if fields.field_tags.content != null %}<span><i class="far fa-folder text-primary"></i>{{ fields.field_tags.content }}</span>{% endif %}
<span class="d-block mt-2"><a href="/node/{{ fields.nid.content|striptags|trim }}" class="btn btn-xs btn-light text-1 text-uppercase">Read More</a></span>
</div>
</div>
</article>
</div>
views-view-fields--news-listing-grid.html.twig
{% set text = fields.field_subheading.content|render|striptags|trim %}
{# below fixes issue with background images not showng when using {{ fields.field_news_images.content|render|striptags|trim }} with Twig Debugger enabled #}
{% set img = file_url(row._entity.field_news_images.entity.uri.value) %}
{% set alt = row._entity.field_news_images.alt %}
<div class="col-lg-4 mb-4">
<article class="post post-large pb-5">
<div class="post-image">
<a href="/node/{{ fields.nid.content|striptags|trim }}">
<div class="image-frame">
<div class="blur" style="background-image: url('{{ img }}'); z-index: 1;"></div>
<img src="{{ img }}" alt="{{ alt }}" />
</div>
</a>
</div>
<div class="post-date">
<span class="day">{{ fields.created.raw | date('d') }}</span>
<span class="month">{{ fields.created.raw | date('M') }} - {{ fields.created.raw | date('Y') }}</span>
</div>
<div class="post-custom post-content">
<h4><a href="/node/{{ fields.nid.content|striptags|trim }}" class="text-decoration-none" title="created by {{ fields.uid.content|raw|striptags }}">{{ fields.title.content }}</a></h4>
<p class="mb-1">{{ text|length > 75 ? text|slice(0, 75) ~ '...' : text }}</p>
<a href="/node/{{ fields.nid.content|striptags|trim }}" class="read-more text-color-dark font-weight-bold text-2">read more <i class="fas fa-chevron-right text-1 ms-1"></i></a>
</div>
</article>
</div>
views-view-fields--news-listing-rows.html.twig
{% set subhead = fields.field_subheading.content|render|striptags|trim %}
{% set body = fields.body.content|render|striptags|trim %}
{# below fixes issue with background images not showng when using {{ fields.field_news_images.content|render|striptags|trim }} with Twig Debugger enabled #}
{% set img = file_url(row._entity.field_news_images.entity.uri.value) %}
{% set alt = row._entity.field_news_images.alt %}
{% set tags = fields.field_tags.content %}
<div class="blog-posts">
<article class="post post-medium">
<div class="row mb-3">
<div class="col-lg-3">
<div class="post-image">
<a href="/node/{{ fields.nid.content|striptags|trim }}">
<img src="{{ img }}" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-2" alt="{{ alt }}" />
</a>
</div>
</div>
<div class="col-lg-9">
<div class="post-content">
<h2 class="font-weight-semibold pt-4 pt-lg-0 text-5 line-height-4 mb-2"><a href="/node/{{ fields.nid.content|striptags|trim }}">{{ fields.title.content }}</a></h2>
{% if subhead %}
{{ subhead|length > 500 ? subhead|slice(0, 500) ~ '...' : subhead }}
{% else %}
{{ body|length > 500 ? body|slice(0, 500) ~ '...' : body }}
{% endif %}
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="post-meta">
<span><i class="far fa-calendar-alt"></i> {{ fields.created.raw | date('F') }} {{ fields.created.raw | date('j') }}, {{ fields.created.raw | date('Y') }}</span>
<span><i class="far fa-user"></i> By <a href="#">{{ fields.field_full_name.content }}</a> </span>
{% if fields.field_tags.content|striptags|trim is not empty %}<span><i class="far fa-folder" title="tags"></i>{{ fields.field_tags.content }} </span>{% endif %}
<span class="d-block d-sm-inline-block float-sm-end mt-3 mt-sm-0"><a href="/node/{{ fields.nid.content | striptags }}" class="btn btn-xs btn-light text-1 text-uppercase">Read More</a></span>
</div>
</div>
</div>
</article>
</div>