Portfolio - Components
Component:
Features:
- add testimonials
- 2 styles
- round or original
Notes:
- upload square image for perfect rounding
Watch Short Video
Testimonials
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget ligula vitae urna pharetra egestas. Suspendisse sed nunc dolor. Phasellus non varius nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget ligula vitae urna pharetra egestas. Suspendisse sed nunc dolor. Phasellus non varius nulla
paragraph--testimonial.html.twig
{% set style = paragraph.field_testimonial_style.value %}
{% set text = content.field_testimonial_text %}
{% set imgPath = file_url(content.field_testimonial_image['#items'].entity.uri.value) %}
{% set round = paragraph.field_use_round_image.value %}
{% set alt = content.field_testimonial_image['#items'].alt %}
{% set name = paragraph.field_testimonial_name.value %}
{% set pos = paragraph.field_testimonial_position.value %}
{% set img_type = paragraph.field_image_type.value %}
{% set theme = paragraph.field_theme_color.value %}
{% block paragraph %}
<div class="row">
{% block content %}
{% if style == "style_1" %}
<div class="testimonial testimonial-style-3 testimonial-style-3-light">
<blockquote class="box-shadow-6 p-3 before-d-none">
<div class="m-2">{{ text }}</div>
</blockquote>
<div class="testimonial-arrow-down p-relative z-index-1"></div>
<div class="testimonial-author">
<div class="testimonial-author-thumbnail">
<img style="max-width: 100px;" src="{{ imgPath }}" class="img-fluid {% if round == "use_round_image" %}rounded-circle {% endif %}" alt="{{ alt }}">
</div>
<p><strong class="font-weight-extra-bold">{{ name }}</strong><span>{{ pos }}</span> {{ img_type }} </p>
</div>
</div>
{% elseif paragraph.field_testimonial_style.value == "style_2" %}
<div class="testimonial testimonial-{{ theme }}">
<blockquote>
<div class="mb-0">{{ text }}</div>
</blockquote>
<div class="testimonial-arrow-down"></div>
<div class="testimonial-author">
<div class="testimonial-author-thumbnail">
<img style="max-width: 100px;" src="{{ imgPath }}" class="img-fluid {% if round == "use_round_image" %}rounded-circle {% endif %}" alt="{{ alt }}">
</div>
<p><strong class="font-weight-extra-bold">{{ name }}</strong><span>{{ pos }}</span> {{ img_type }} </p>
</div>
</div>
{% endif %}
{% endblock %}
</div>
{% endblock paragraph %}