Re: Adding Pictures To Testimonials Narrative Theme

Adding Pictures To Testimonials Narrative Theme

peakhost
Excursionist
12 0 3

How can I add Pictures To Testimonials in Narrative Theme?

 

www.peakhost.us

 

Thank you!

Replies 10 (10)

KetanKumar
Shopify Partner
37583 3668 12151

@peakhost 

yes, please share Quotes Section code so i will check and update

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peakhost
Excursionist
12 0 3

I replied via email! Thank you!

 

KetanKumar
Shopify Partner
37583 3668 12151

@peakhost 

thanks for update but sorry i can't see any email

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peakhost
Excursionist
12 0 3

Check spam, I have sent again

KetanKumar
Shopify Partner
37583 3668 12151

@peakhost 

great 

i will check and let you know 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peakhost
Excursionist
12 0 3

Any luck? @KetanKumar 

kaalTechGeeks
Shopify Partner
318 58 80

Hi @peakhost, can you please share the codes with me so that I can share the actual codes with you. 
Thanks

- If my answers saved you time and headaches, consider buying me a coffee!
- Check my profile: KaalTechGeeks | Reach out to me on my socials - Instagram | Skype | Mail
- Was my reply helpful? Click Like to let me know! & if your question was answered, Mark it as an Accepted Solution!
peakhost
Excursionist
12 0 3

I sent you an email

kaalTechGeeks
Shopify Partner
318 58 80

Thanks @peakhost

I have received the mail and I will share the updated code in some time

- If my answers saved you time and headaches, consider buying me a coffee!
- Check my profile: KaalTechGeeks | Reach out to me on my socials - Instagram | Skype | Mail
- Was my reply helpful? Click Like to let me know! & if your question was answered, Mark it as an Accepted Solution!
kaalTechGeeks
Shopify Partner
318 58 80

Hi @peakhost
you can use the below code for adding images in testimonials:

 

<style>
  #QuotesSection-{{ section.id }} .quotes-slider {
    background-color: {{ section.settings.color_bg }};
  }
  #QuotesSection-{{ section.id }} .quote,
  #QuotesSection-{{ section.id }} .quote__author,
  #QuotesSection-{{ section.id }} .quote__heading {
    color: {{ section.settings.color_text }};
  }
</style>

{% if section.blocks.size > 0 %}
  <div id="QuotesSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="quotes-section">
    <div class="quotes-slider text-center" data-count="{{ section.blocks.size }}" data-speed="{{ section.settings.autoplay_speed }}">
      {% for block in section.blocks %}
        <div class="quotes-slide quotes-slide--{{ forloop.index0 }} quotes-slide--{{ block.id }}{% if forloop.first == true %} quotes-slide--visible{% endif %}" {{ block.shopify_attributes }}>
          {% if block.settings.heading != blank %}
            <h2 class="quote__heading">{{ block.settings.heading | escape }}</h2>
          {% endif %}
          {% if block.settings.image != blank %}
            <div class="image-container">
              <img src="{{ block.settings.image | img_url: '450x450' }}" alt="{{ block.settings.image.alt }}"/>
            </div>  
          {% endif %}
          {% if block.settings.quote != blank %}
            <div class="h4 quote rte-setting">{{ block.settings.quote }}</div>
          {% endif %}
          {% if block.settings.author != blank %}
            <span class="quote__author">{{ block.settings.author | escape }}</span>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
{% else %}
  {% include 'no-blocks' %}
{% endif %}

{% schema %}
{
  "name": {
    "cs": "Ohlasy",
    "da": "Udtalelser",
    "de": "Testimonials",
    "en": "Testimonials",
    "es": "Testimonios",
    "fi": "Suositukset",
    "fr": "Témoignages",
    "it": "Testimonial",
    "ja": "お客様の声",
    "ko": "추천",
    "nb": "Tilbakemeldinger fra kunder",
    "nl": "Getuigenissen",
    "pl": "Referencje",
    "pt-BR": "Depoimentos",
    "pt-PT": "Testemunhos",
    "sv": "Kundberättelser",
    "th": "เสียงชื่นชมจากลูกค้า",
    "tr": "Kullanıcı görüşleri",
    "vi": "Chứng thực",
    "zh-CN": "感言",
    "zh-TW": "推薦文"
  },
  "class": "index-section index-section--quotes",
  "max_blocks": 5,
  "settings": [
    {
      "type": "color",
      "id": "color_bg",
      "label": {
        "cs": "Barva pozadí",
        "da": "Baggrundsfarve",
        "de": "Hintergrundfarbe",
        "en": "Background color",
        "es": "Color del fondo",
        "fi": "Taustaväri",
        "fr": "Couleur de fond",
        "it": "Colore sfondo",
        "ja": "背景の色",
        "ko": "배경색",
        "nb": "Bakgrunnsfarge",
        "nl": "Achtergrondkleur",
        "pl": "Kolor tła",
        "pt-BR": "Cor do fundo",
        "pt-PT": "Cor do fundo",
        "sv": "Bakgrundsfärg",
        "th": "สีพื้นหลัง",
        "tr": "Arka plan rengi",
        "vi": "Màu nền",
        "zh-CN": "背景色",
        "zh-TW": "背景顏色"
      },
      "default": "#242424"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": {
        "cs": "Barva textu",
        "da": "Tekstfarve",
        "de": "Textfarbe",
        "en": "Text color",
        "es": "Color de la fuente",
        "fi": "Tekstin väri",
        "fr": "Couleur du texte",
        "it": "Colore del testo",
        "ja": "テキストの配色",
        "ko": "텍스트 색상",
        "nb": "Tekstfarge",
        "nl": "Tekstkleur",
        "pl": "Kolor tekstu",
        "pt-BR": "Cor do texto",
        "pt-PT": "Cor do texto",
        "sv": "Textfärg",
        "th": "สีข้อความ",
        "tr": "Metin rengi",
        "vi": "Màu chữ",
        "zh-CN": "文本颜色",
        "zh-TW": "文字顏色"
      },
      "default": "#ffffff"
    },
    {
      "type": "select",
      "id": "autoplay_speed",
      "label": {
        "cs": "Změnit snímek co",
        "da": "Skift slide hver",
        "de": "Slides überall ändern",
        "en": "Change slides every",
        "es": "Cambiar diapositivas cada",
        "fi": "Vaihda diat joka",
        "fr": "Changer de diapositive toutes les",
        "it": "Cambia slide ogni",
        "ja": "スライドを変更する間隔",
        "ko": "슬라이드를 매번 변경",
        "nb": "Endre lysbilde hvert",
        "nl": "Wijzig dia's elke",
        "pl": "Zmieniaj slajdy co",
        "pt-BR": "Mude os slides a cada",
        "pt-PT": "Mudar diapositivos a cada",
        "sv": "Byt bilder varje",
        "th": "เปลี่ยนสไลด์ทุก",
        "tr": "Slaytları şu zaman aralığında değiştir:",
        "vi": "Đổi trang chiếu sau mỗi",
        "zh-CN": "幻灯片更改时间间隔",
        "zh-TW": "每過以下時間即變更投影片"
      },
      "options": [
        {
          "value": "3000",
          "label": {
            "cs": "3 s",
            "da": "3 sekunder",
            "de": "3 Sekunden",
            "en": "3 seconds",
            "es": "3 segundos",
            "fi": "3 sekuntia",
            "fr": "3 secondes",
            "it": "3 secondi",
            "ja": "3秒",
            "ko": "3초",
            "nb": "3 sekunder",
            "nl": "3 seconden",
            "pl": "3 sekundy",
            "pt-BR": "3 segundos",
            "pt-PT": "3 segundos",
            "sv": "5 sekunder",
            "th": "3 วินาที",
            "tr": "3 saniye",
            "vi": "3 giây",
            "zh-CN": "3 秒",
            "zh-TW": "3 秒"
          }
        },
        {
          "value": "4000",
          "label": {
            "cs": "4 s",
            "da": "4 sekunder",
            "de": "4 Sekunden",
            "en": "4 seconds",
            "es": "4 segundos",
            "fi": "4 sekuntia",
            "fr": "4 secondes",
            "it": "4 secondi",
            "ja": "4秒",
            "ko": "4초",
            "nb": "4 sekunder",
            "nl": "4 seconden",
            "pl": "4 sekundy",
            "pt-BR": "4 segundos",
            "pt-PT": "4 segundos",
            "sv": "15 sekunder",
            "th": "4 วินาที",
            "tr": "4 saniye",
            "vi": "4 giây",
            "zh-CN": "4 秒",
            "zh-TW": "4 秒"
          }
        },
        {
          "value": "5000",
          "label": {
            "cs": "5 s",
            "da": "5 sekunder",
            "de": "5 Sekunden",
            "en": "5 seconds",
            "es": "5 segundos",
            "fi": "5 sekuntia",
            "fr": "5 secondes",
            "it": "5 secondi",
            "ja": "5秒",
            "ko": "5초",
            "nb": "5 sekunder",
            "nl": "5 seconden",
            "pl": "5 sekund",
            "pt-BR": "5 segundos",
            "pt-PT": "5 segundos",
            "sv": "5 sekunder",
            "th": "5 วินาที",
            "tr": "5 saniye",
            "vi": "5 giây",
            "zh-CN": "5 秒",
            "zh-TW": "5 秒"
          }
        },
        {
          "value": "6000",
          "label": {
            "cs": "6 s",
            "da": "6 sekunder",
            "de": "6 Sekunden",
            "en": "6 seconds",
            "es": "6 segundos",
            "fi": "6 sekuntia",
            "fr": "6 secondes",
            "it": "6 secondi",
            "ja": "6秒",
            "ko": "6초",
            "nb": "6 sekunder",
            "nl": "6 seconden",
            "pl": "6 sekund",
            "pt-BR": "6 segundos",
            "pt-PT": "7 segundos",
            "sv": "15 sekunder",
            "th": "6 วินาที",
            "tr": "6 saniye",
            "vi": "6 giây",
            "zh-CN": "6 秒",
            "zh-TW": "6 秒"
          }
        }
      ],
      "default": "4000"
    }
  ],
  "blocks": [
    {
      "type": "quote",
      "name": {
        "cs": "Ohlas",
        "da": "Udtalelse",
        "de": "Testimonial",
        "en": "Testimonial",
        "es": "Testimonio",
        "fi": "Suositukset",
        "fr": "Témoignages",
        "it": "Testimonial",
        "ja": "お客様の声",
        "ko": "추천",
        "nb": "Anbefaling",
        "nl": "Testimonial",
        "pl": "Referencja",
        "pt-BR": "Depoimento",
        "pt-PT": "Testemunho",
        "sv": "Kundberättelser",
        "th": "เสียงชื่นชมจากลูกค้า",
        "tr": "Kullanıcı görüşü",
        "vi": "Chứng thực",
        "zh-CN": "感言",
        "zh-TW": "推薦文"
      },
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": {
            "cs": "Nadpis",
            "da": "Overskrift",
            "de": "Titel",
            "en": "Heading",
            "es": "Título",
            "fi": "Otsake",
            "fr": "Titre",
            "it": "Heading",
            "ja": "見出し",
            "ko": "제목",
            "nb": "Overskrift",
            "nl": "Kop",
            "pl": "Nagłówek",
            "pt-BR": "Título",
            "pt-PT": "Título",
            "sv": "Rubrik",
            "th": "ส่วนหัว",
            "tr": "Başlık",
            "vi": "Tiêu đề",
            "zh-CN": "标题",
            "zh-TW": "標題"
          }
        },
        {
          "type": "richtext",
          "id": "quote",
          "label": {
            "cs": "Text",
            "da": "Tekst",
            "de": "Text",
            "en": "Text",
            "es": "Texto",
            "fi": "Teksti",
            "fr": "Texte",
            "it": "Testo",
            "ja": "テキスト",
            "ko": "텍스트",
            "nb": "Tekst",
            "nl": "Tekst",
            "pl": "Tekst",
            "pt-BR": "Texto",
            "pt-PT": "Texto",
            "sv": "Text",
            "th": "ข้อความ",
            "tr": "Metin",
            "vi": "Văn bản",
            "zh-CN": "文本",
            "zh-TW": "文字"
          },
          "info": {
            "cs": "Nejlepších výsledků dosáhnete, pokud délka textu nepřekročí 400 znaků.",
            "da": "De bedste resultater opnås, hvis teksten holdes under 400 tegn",
            "de": "Beste Ergebnisse, wenn der Text 400 Zeichen nicht überschreitet",
            "en": "Best results if text does not exceed 400 characters",
            "es": "Se obtienen mejores resultados si el texto no supera los 400 caracteres.",
            "fi": "Parhaat tulokset saadaan, kun tekstin pituus ei ylitä 400 merkkiä",
            "fr": "Vous obtiendrez de meilleurs résultats si le texte ne dépasse pas 400 caractères",
            "it": "Ottieni i migliori risultati se il testo non supera i 400 caratteri",
            "ja": "テキストが400文字を超えないようにするのが最適です。",
            "ko": "텍스트가 400자를 초과하지 않는 경우 최상의 결과",
            "nb": "Best resultat hvis teksten ikke overskrider 400 tegn",
            "nl": "Je krijgt de beste resultaten met een tekst van minder dan 400 tekens",
            "pl": "Najlepsze wyniki, jeśli tekst nie przekracza 400 znaków",
            "pt-BR": "Resultados melhores quando o texto não excede 400 caracteres",
            "pt-PT": "Melhores resultados quando o texto não excede 400 caracteres",
            "sv": "Bäst resultat om texten inte överstiger 400 tecken",
            "th": "แสดงผลดีที่สุดหากข้อความมีความยาวไม่เกิน 400 ตัวอักษร",
            "vi": "Hiệu quả nhất nếu văn bản không quá 400 ký tự",
            "zh-CN": "文本不超过 400 个字符时效果最佳",
            "zh-TW": "字數少於 400 字元效果最佳"
          },
          "default": {
            "cs": "<p>Přidejte recenze a ohlasy zákazníků, které vyjadřují jejich spokojenost s vaším obchodem.</p>",
            "da": "<p>Tilføj kundeanmeldelser og udtalelser for at fremhæve din butiks tilfredse kunder.</p>",
            "de": "<p>Kunden-Reviews und Testimonials, die Kundenzufriedenheit beweisen.</p>",
            "en": "<p>Add customer reviews and testimonials to showcase your store's happy customers.</p>",
            "es": "<p>Agrega las reseñas y los testimonios de los clientes para mostrar los clientes satisfechos de tu tienda.</p>",
            "fi": "<p>Lisää asiakasarviointeja ja suositteluja kertoaksesi kaupan tyytyväisistä asiakkaista.</p>",
            "fr": "<p>Ajoutez des avis et témoignages pour mettre en avant les clients satisfaits de votre boutique.</p>",
            "it": "<p>Aggiungi recensioni e testimonianze sul tuo negozio per dimostrare che i clienti sono soddisfatti.</p>",
            "ja": "<p>あなたのストアの幸せなお客様を紹介するために、カスタマーレビューとお客様の声を追加してください。</p>",
            "ko": "<p>고객 리뷰 및 추천을 추가하여 스토어에 만족한 고객을 보여주십시오.</p>",
            "nb": "<p>Legg til kundeomtaler og anbefalinger for å vise frem butikkens glade kunder.</p>",
            "nl": "<p>Voeg beoordelingen van klanten en testimonials toe om te laten zien dat je klanten tevreden zijn.</p>",
            "pl": "<p>Dodaj opinie i referencje od klientów, aby pokazać zadowolenie klientów Twojego sklepu.</p>",
            "pt-BR": "<p>Adicione avaliações e depoimentos de clientes para mostrar os clientes felizes da sua loja.</p>",
            "pt-PT": "<p>Adicione análises e testemunhos para mostrar os clientes felizes da sua loja.</p>",
            "sv": "<p>Lägg till kundrecensioner och berättelser för att visa upp din butiks nöjda kunder.</p>",
            "th": "<p>เพิ่มรีวิวและเสียงชื่นชมจากลูกค้าเพื่อนำเสนอลูกค้าที่ได้รับความสุขจากร้านค้า</p>",
            "tr": "<p>Müşteri değerlendirmeleri ve kullanıcı görüşleri ekleyerek mağazanızdan memnun kalan müşterileri gösterin.</p>",
            "vi": "<p>Thêm đánh giá và chứng thực từ khách hàng để chứng minh khách hàng hài lòng với cửa hàng.</p>",
            "zh-CN": "<p>添加客户评论和感言,以展示对您的商店满意的客户。</p>",
            "zh-TW": "<p>加上顧客評論及推薦文,以便展示您商店的滿意顧客。</p>"
          }
        },
        {
          "type": "text",
          "id": "author",
          "label": {
            "cs": "Autor",
            "da": "Forfatter",
            "de": "Autor",
            "en": "Author",
            "es": "Autor",
            "fi": "Kirjoittaja",
            "fr": "Auteur",
            "it": "Autore",
            "ja": "執筆者",
            "ko": "작성자",
            "nb": "Forfatter",
            "nl": "Auteur",
            "pl": "Autor",
            "pt-BR": "Autoria",
            "pt-PT": "Autor",
            "sv": "Författare",
            "th": "ผู้เขียน",
            "tr": "Yazar",
            "vi": "Tác giả",
            "zh-CN": "作者",
            "zh-TW": "作者"
          },
          "default": {
            "cs": "Jméno autora",
            "da": "Forfatterens navn",
            "de": "Name des Autors",
            "en": "Author's name",
            "es": "Nombre del autor",
            "fi": "Kirjoittajan nimi",
            "fr": "Nom de l'auteur",
            "it": "Nome dell'autore",
            "ja": "筆者の名前",
            "ko": "작성자 이름",
            "nb": "Forfatterens navn",
            "nl": "Naam auteur",
            "pl": "Nazwisko autora",
            "pt-BR": "Nome do autor",
            "pt-PT": "Nome do autor",
            "sv": "Författarens namn",
            "th": "ชื่อผู้เขียน",
            "tr": "Yazar adı",
            "vi": "Tên tác giả",
            "zh-CN": "作者姓名",
            "zh-TW": "作者名稱"
          }
        },
        {
          "type" : "header",
          "content": "Custom Settings"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "cs": "Ohlasy",
        "da": "Udtalelser",
        "de": "Testimonials",
        "en": "Testimonials",
        "es": "Testimonios",
        "fi": "Suositukset",
        "fr": "Témoignages",
        "it": "Testimonial",
        "ja": "お客様の声",
        "ko": "추천",
        "nb": "Tilbakemeldinger fra kunder",
        "nl": "Getuigenissen",
        "pl": "Referencje",
        "pt-BR": "Depoimentos",
        "pt-PT": "Testemunhos",
        "sv": "Kundberättelser",
        "th": "เสียงชื่นชมจากลูกค้า",
        "tr": "Kullanıcı görüşleri",
        "vi": "Chứng thực",
        "zh-CN": "感言",
        "zh-TW": "推薦文"
      },
      "category": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "tr": "Metin",
        "vi": "Văn bản",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "blocks": [
        {
          "type": "quote"
        }
      ]
    }
  ]
}
{% endschema %}

 

After you have added the code in your section then your section's block settings will look like: 

KaalTechnical · Customize Dawn · Shopify.png

Thanks

 

- If my answers saved you time and headaches, consider buying me a coffee!
- Check my profile: KaalTechGeeks | Reach out to me on my socials - Instagram | Skype | Mail
- Was my reply helpful? Click Like to let me know! & if your question was answered, Mark it as an Accepted Solution!