Portfolio - Components

View All Components

Component: 

Features:

  1. add testimonials
  2. 2 styles
  3. round or original

Notes:

  1. 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

Dave

Dave LeeCEO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget ligula vitae urna pharetra egestas. Suspendisse sed nunc dolor. Phasellus non varius nulla

Mary J

Mary JonesCEO

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 %}