Portfolio - Components
Component: News Carousel
Features:
- output news items
- sort by id if you wish
- image blur for image uniformity
- text shortening/ellipsis for layout
- portable listings block
Notes:
- Use Views Reference Field module
- Use Views Argument Order Sort module
Watch Short Video
News Carousel
views-view-unformatted--news-carousel.html.twig
<div class="col-lg-12 my-4">
<div class="owl-carousel owl-theme dots-morphing show-nav-title" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 3}, '1199': {'items': 3}}, 'autoplay': true, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'loop': true, 'nav': true, 'autoHeight': true, 'margin': 10}">
{% for row in rows %}
{{ row.content }}
{% endfor %}
</div>
</div>
views-view-fields--news-carousel.html.twig
{% set text = fields.field_subheading.content|render|striptags %}
{% set img = file_url(row._entity.field_news_images.entity.uri.value) %}
{% set alt = row._entity.field_news_images.alt %}
{% set nid = fields.nid.content|render|striptags|trim %}
<div> <!--open card-->
<div class="custom-card card mb-4">
<a href="/node/{{ nid }}">
<div class="image-frame">
<div class="blur" style="background-image: url('{{ img }}'); z-index: 1;"></div>
<img src="{{ img }}" alt="{{ alt }}" />
</div>
</a>
<div class="custom-card card-body">
<a href="/node/{{ nid }}"><h4 class="card-title mb-1 text-4 font-weight-bold">{{ fields.title.content }}</h4></a>
<div class="card-text mb-0 pb-0"><p>{{ text|length > 75 ? text|slice(0, 75) ~ '...' : text }}</p>
<a href="/node/{{ nid }}" class="read-more text-color-primary font-weight-semibold text-2">Read More <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>
</div>
</div>
</div>
</div> <!--close card-->