How to customize brooklyn theme, Image with text

Solved
falkenkoenig
Tourist
4 1 0

Hello.

On my Brooklyn theme there is the option to add an image with text. A link can be inserted below the text (linked in the box). To get to the collection, right now it is only possible if I click the box. On mobile view (and computer) it would be great if the customers can click the image to get to the collection. I hope there is a way to make this possible.

Here is the link to my shop: https://falkenkoenig.ch/

Thanks for the support and ideeas.

Cheers, falkenkoenig

Screen Shot FK 4.jpg

Moblie view:

Screen Shot FK 3.jpg

0 Likes
Guleria
Shopify Partner
1255 263 346

This is an accepted solution.

Hello @falkenkoenig ,

Edit featured-row.liquid and replace it with this code

<div class="wrapper">
  <div class="page-width feature-row">
    {% capture image_layout %}
      <div class="feature-row__item">
        {% if section.settings.image != blank %}
        {% if section.settings.button_link != blank %}
        <a href="{{ section.settings.button_link }}"> 
        {% endif %}
          <noscript>
            {{ section.settings.image | img_url: '600x600' | img_tag: section.settings.image.alt, 'feature-row__image-no-js' }}
          </noscript>
          <div class="feature-row__image-wrapper" style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;">
            {% assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
            <img class="feature-row__image lazyload"
              src="{{ section.settings.image | img_url: '300x300' }}"
              data-src="{{ img_url }}"
              data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
              data-aspectratio="{{ section.settings.image.aspect_ratio }}"
              data-sizes="auto"
              alt="{{ section.settings.image.alt | escape }}">
        </div>
          {% if section.settings.button_link != blank %}
        </a>
          {% endif %}
        {% else %}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </div>
    {% endcapture %}

    <div class="feature-row">
      {% if section.settings.layout == 'left' %}
        {{ image_layout }}
      {% endif %}

      <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
        {% if section.settings.title != blank %}
          <h2 class="h3">{{ section.settings.title | escape }}</h2>
        {% endif %}
        {% if section.settings.text != blank %}
          <div class="rte-setting featured-row__subtext">{{ section.settings.text }}</div>
        {% endif %}
        {% if section.settings.button_label != blank and section.settings.button_link != blank %}
          <a href="{{ section.settings.button_link }}" class="btn">
            {{ section.settings.button_label | escape }}
          </a>
        {% endif %}
      </div>

      {% if section.settings.layout == 'right' %}
        {{ image_layout }}
      {% endif %}
    </div>
  </div>
</div>



{% schema %}
{
  "name": {
    "da": "Billede med tekst",
    "de": "Bild mit Text",
    "en": "Image with text",
    "es": "Imagen con texto",
    "fi": "Kuva tekstillä",
    "fr": "Image avec texte",
    "hi": "टेक्स्ट वाली इमेज",
    "it": "Immagine con testo",
    "ja": "テキスト付き画像",
    "ko": "텍스트 포함 이미지",
    "ms": "Imej dengan teks",
    "nb": "Bilde med tekst",
    "nl": "Afbeelding met tekst",
    "pt-BR": "Imagem com texto",
    "pt-PT": "Imagem com texto",
    "sv": "Bild med text",
    "th": "รูปภาพพร้อมข้อความ",
    "zh-CN": "带文本的图片",
    "zh-TW": "附文字的圖片"
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": {
        "da": "Billede",
        "de": "Bild",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "ms": "Imej",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      }
    },
    {
      "type": "select",
      "id": "layout",
      "label": {
        "da": "Justering af billede",
        "de": "Bildausrichtung",
        "en": "Image alignment",
        "es": "Alineación de imagen",
        "fi": "Kuvan tasaus",
        "fr": "Alignement de l'image",
        "hi": "इमेज पंक्तिबद्ध करना",
        "it": "Allineamento immagine",
        "ja": "画像アラインメント",
        "ko": "이미지 정렬",
        "ms": "Penjajaran imej",
        "nb": "Bildejustering",
        "nl": "Afbeelding uitlijnen",
        "pt-BR": "Alinhamento da imagem",
        "pt-PT": "Alinhamento da imagem",
        "sv": "Bildjustering",
        "th": "การจัดวางรูปภาพ",
        "zh-CN": "图片对齐方式",
        "zh-TW": "圖片對齊"
      },
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": {
            "da": "Venstre",
            "de": "Links",
            "en": "Left",
            "es": "Izquierda",
            "fi": "Vasen",
            "fr": "Gauche",
            "hi": "बाएँ",
            "it": "Sinistra",
            "ja": "左",
            "ko": "왼쪽",
            "ms": "Kiri",
            "nb": "Venstre",
            "nl": "Links",
            "pt-BR": "Esquerda",
            "pt-PT": "Esquerda",
            "sv": "Vänster",
            "th": "ด้านซ้าย",
            "zh-CN": "左侧",
            "zh-TW": "左方"
          }
        },
        {
          "value": "right",
          "label": {
            "da": "Højre",
            "de": "Rechts",
            "en": "Right",
            "es": "Derecha",
            "fi": "Oikea",
            "fr": "Droite",
            "hi": "दाएँ",
            "it": "Destra",
            "ja": "右",
            "ko": "오른쪽",
            "ms": "Kanan",
            "nb": "Høyre",
            "nl": "Rechts",
            "pt-BR": "Direita",
            "pt-PT": "Direita",
            "sv": "Höger",
            "th": "ด้านขวา",
            "zh-CN": "右侧",
            "zh-TW": "右方"
          }
        }
      ]
    },
    {
      "type": "text",
      "id": "title",
      "label": {
        "da": "Overskrift",
        "de": "Überschrift",
        "en": "Heading",
        "es": "Título",
        "fi": "Otsake",
        "fr": "Titre",
        "hi": "शीर्षक",
        "it": "Heading",
        "ja": "見出し",
        "ko": "제목",
        "ms": "Tajuk",
        "nb": "Overskrift",
        "nl": "Kop",
        "pt-BR": "Título",
        "pt-PT": "Título",
        "sv": "Rubrik",
        "th": "ส่วนหัว",
        "zh-CN": "标题",
        "zh-TW": "標題"
      },
      "default": {
        "da": "Billede med tekst",
        "de": "Bild mit Text",
        "en": "Image with text",
        "es": "Imagen con texto",
        "fi": "Kuva tekstillä",
        "fr": "Image avec texte",
        "hi": "टेक्स्ट वाली इमेज",
        "it": "Immagine con testo",
        "ja": "テキスト付き画像",
        "ko": "텍스트 포함 이미지",
        "ms": "Imej dengan teks",
        "nb": "Bilde med tekst",
        "nl": "Afbeelding met tekst",
        "pt-BR": "Imagem com texto",
        "pt-PT": "Imagem com texto",
        "sv": "Bild med text",
        "th": "รูปภาพพร้อมข้อความ",
        "zh-CN": "带文本的图片",
        "zh-TW": "附文字的圖片"
      }
    },
    {
      "type": "richtext",
      "id": "text",
      "label": {
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "texto",
        "fi": "Teksti",
        "fr": "Texte",
        "hi": "टेक्स्ट",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "ms": "Teks",
        "nb": "Tekst",
        "nl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": {
        "da": "<p>Kombiner stor tekst med et billede for at give dit valgte produkt, din valgte kollektion eller dit valgte blogopslag fokus. Tilføj oplysninger om tilgængelighed, stil og eventuelt også en anmeldelse.</p>",
        "de": "<p>Kombinieren Sie lange Texte mit einem Bild, um den Fokus auf Ihr Produkt, Ihre Kategorie oder Ihren Blogpost zu richten. Sie können außerdem weitere Details über die Verfügbarkeit oder den Stil und sogar eine Bewertung hinzufügen.</p>",
        "en": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
        "es": "<p>Vincula un texto largo con una imagen para dar visibilidad a tu producto, colección o artículo de blog seleccionados. Agrega detalles sobre disponibilidad, estilo, o incluso ofrece una reseña.</p>",
        "fi": "<p>Korosta valitsemaasi tuotetta, kokoelmaa tai blogijulkaisua lisäämällä kuvaan suuri teksti. Lisää saatavuustiedot, määritä tyyli tai näytä vaikkapa arvostelu.</p>",
        "fr": "<p>Associez un texte de grande taille à une image pour mettre en relief le produit, la collection ou l'article de blog de votre choix. Ajoutez des informations sur la disponibilité ou le style. Vous pouvez même fournir un avis.</p>",
        "hi": "<p>अपने चुने हुए उत्पाद, कलेक्शन या ब्लॉग पोस्ट पर ध्यान देने के लिए छवि के साथ बड़े पाठ को पेयर करें. उपलब्धता, स्टाइल या यहां तक कि समीक्षा प्रदान करने पर विवरण जोड़ें.</p>",
        "it": "<p>Associa un testo di grandi dimensioni a un'immagine per dare importanza al tuo prodotto, collezione o articolo del blog scelto. Aggiungi dettagli sulla disponibilità, sullo stile o fornisci anche una recensione.</p>",
        "ja": "<p>あなたが選んだ商品、コレクション、またはブログ記事に注目を集めるため、大きなテキストと画像を組み合わせます。可用性、スタイル、またはレビュー提供についての詳細を追加します。</p>",
        "ko": "<p>이미지와 큰 텍스트를 짝지어 선택한 제품, 컬렉션, 블로그 게시판을 강조합니다. 사용 가능성, 스타일에 대한 자세한 정보를 추가하거나 리뷰를 제공합니다.</p>",
        "ms": "<p>Pasangkan teks besar dengan imej untuk memberikan tumpuan kepada produk, koleksi atau siaran blog pilihan anda. Tambah butiran tentang ketersediaan, gaya atau juga memberikan ulasan.</p>",
        "nb": "<p>Koble stor tekst med et bilde for å drive fokus mot det valgte produktet, samlingen eller blogginnlegget. Legg til detaljer om tilgjengelighet, stil eller vis frem en vurdering.</p>",
        "nl": "<p>Plaats een afbeelding bij grote stukken tekst om de aandacht op uw gekozen product, collectie of blogpost te richten. Voeg details over beschikbaarheid en stijl toe of plaats een productrecensie.</p>",
        "pt-BR": "<p>Emparelhe textos grandes com uma imagem para destacar o produto, a coleção ou o post do blog escolhido. Adicione informações sobre disponibilidade, estilo ou até mesmo uma avaliação.</p>",
        "pt-PT": "<p>Associe um texto grande a uma imagem para dar ênfase ao produto, coleção ou publicação no blogue que escolheu. Adicione detalhes sobre disponibilidade, estilo ou uma avaliação.</p>",
        "sv": "<p>Para ihop stor text med en bild för att ge fokus åt din valda produkt, kollektion eller blogginlägg. Lägg till information om tillgänglighet, stil eller tillhandahåll till och med en recension.</p>",
        "th": "<p>จับคู่ข้อความขนาดใหญ่กับรูปภาพเพื่อให้ความสำคัญกับสินค้า คอลเลกชัน หรือโพสต์บล็อกที่คุณเลือก เพิ่มรายละเอียดเกี่ยวกับความพร้อม สไตล์ หรือแม้กระทั่งเขียนรีวิว</p>",
        "zh-CN": "<p>将大文本与图片配对,以便将焦点置于您选择的产品、产品系列或博客文章。添加有关可用性和样式的详细信息,甚至是提供评论。</p>",
        "zh-TW": "<p>大型文字搭配圖片,以便強調特定產品、商品系列或部落格貼文。您可以加上各種有關可用性、樣式的資料,甚至可以提供使用心得。</p>"
      }
    },
    {
      "type": "text",
      "id": "button_label",
      "label": {
        "da": "Knapetiket",
        "de": "Schaltflächenbezeichnung",
        "en": "Button label",
        "es": "Etiqueta de botón",
        "fi": "Painikkeen merkintä",
        "fr": "Texte du bouton",
        "hi": "बटन लेबल",
        "it": "Etichetta pulsante",
        "ja": "ボタンラベル",
        "ko": "버튼 레이블",
        "ms": "Label butang",
        "nb": "Knappetikett",
        "nl": "Knoplabel",
        "pt-BR": "Etiqueta do botão",
        "pt-PT": "Etiqueta do botão",
        "sv": "Knappetikett",
        "th": "ป้ายกำกับปุ่ม",
        "zh-CN": "按钮标签",
        "zh-TW": "按鈕標籤"
      }
    },
    {
      "type": "url",
      "id": "button_link",
      "label": {
        "da": "Knaplink",
        "de": "Schaltflächenlink",
        "en": "Button link",
        "es": "Enlace de botón",
        "fi": "Painikkeen linkki",
        "fr": "Lien du bouton",
        "hi": "बटन लिंक",
        "it": "Link pulsante",
        "ja": "ボタンリンク",
        "ko": "버튼 링크",
        "ms": "Pautan butang",
        "nb": "Kobling for knapp",
        "nl": "Knoplink",
        "pt-BR": "Link do botão",
        "pt-PT": "Ligação do botão",
        "sv": "Knapplänk",
        "th": "ลิงก์ของปุ่ม",
        "zh-CN": "按钮链接",
        "zh-TW": "按鈕連結"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "da": "Billede med tekst",
        "de": "Bild mit Text",
        "en": "Image with text",
        "es": "Imagen con texto",
        "fi": "Kuva tekstillä",
        "fr": "Image avec texte",
        "hi": "टेक्स्ट वाली इमेज",
        "it": "Immagine con testo",
        "ja": "テキスト付き画像",
        "ko": "텍스트 포함 이미지",
        "ms": "Imej dengan teks",
        "nb": "Bilde med tekst",
        "nl": "Afbeelding met tekst",
        "pt-BR": "Imagem com texto",
        "pt-PT": "Imagem com texto",
        "sv": "Bild med text",
        "th": "รูปภาพพร้อมข้อความ",
        "zh-CN": "带文本的图片",
        "zh-TW": "附文字的圖片"
      },
      "category": {
        "da": "Billede",
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "ms": "Imej",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      }
    }
  ]
}
{% endschema %}

 

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
falkenkoenig
Tourist
4 1 0

This is an accepted solution.

Hi @Guleria 
Thank you for your support.
I am very happy with the solution.

Cheers, @falkenkoenig

0 Likes