TextWithImage

Purpose

The TextWithImage component renders one or more “image + text + button” blocks.

It:

renders an optional section header (settings.header)

renders one block per settings.sets[]

supports different horizontal/vertical alignment per block

supports a special “image-only” layout when a set has an image but no title/text/button

Inputs (model contract)

Model shape (storefront example)

{
  "name": "TextWithImage",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "sets": [
      {
        "image": {
          "link": "https://example.com/media/sample.jpg",
          "alt": "Sample text"
        },
        "title": "Sample title",
        "text": "Sample text",
        "buttonText": "Sample button text",
        "buttonLink": "/sample",
        "verticalAlignment": 0,
        "horizontalAlignment": 2
      },
      "..."
    ],
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirTextWithImage",
    "name": "TextWithImage",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "Sample text",
    "cssClass": "",
    "header": "",
    "alignment": "Left"
  },
  "translations": {
    "clickToLearnMoreAbout": "Sample text",
    "noImageAltAvailable": "Sample text"
  }
}

Required fields

settings.id

settings.sets[]

Optional fields

settings.cssClass

settings.header

settings.alignment (Left, Center, Right)

settings.Animation — entrance animation. Defaults to None. Values: None, SlideSides, SlideVertical, Stomp.

Per set:

set.image.link

set.image.alt

set.title

set.text

set.buttonText

set.buttonLink

set.horizontalAlignment (numeric)

set.verticalAlignment (numeric)

translations.clickToLearnMoreAbout

translations.noImageAltAvailable

JavaScript

File: Components/TextWithImage/Default.js

Exposes:

Bound from Liquid with x-data='textwithimagedefault.initComponent({{ animation | serialize | escape }})'.

When animation is not None, the section is rendered with textWithImage--loading, which covers its content with skeleton placeholders so the page is not blank before the animation. init() removes it, then calls initAnimation(el). Without an animation there is no loading state.

initAnimation(el) does nothing when animation is None. Otherwise it adds is-inview to the section once 30% of it (or 30% of the viewport height) is visible, which starts the CSS animation. Browsers without IntersectionObserver get is-inview immediately.

Dependencies

Alpine.js

Notes

horizontalAlignment and verticalAlignment are numeric enums interpreted in Liquid.

Image alt falls back to: set.image.alt → set.title → settings.header → translations.noImageAltAvailable.

Extras

Template behavior (Liquid + Alpine)

Computes a responsive widthClass based on how many sets exist:

2 sets → md:w-1/2

3 sets → md:w-1/3

4+ sets → md:flex-1

Uses onlyImage = set.image and set.title == null to switch image sizing (cover vs contain).

Alignment rules:

horizontalAlignment: 0 = left, 2 = center, 3 = right

verticalAlignment: 0 = top, 2 = center, 3 = bottom

Shows the button only when both buttonText and buttonLink exist.

When settings.Animation is not None, the section gets textWithImage--anim plus textWithImage--anim-slideSides, textWithImage--anim-slideVertical or textWithImage--anim-stomp.

TextWithImage

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#