有没有办法让文本优先和图像优先布局以相同的方式渲染

Question

下面是我的液体文件，因为我正在为某人构建 Shopify 主题，但是当使用文本优先布局时，图像由于其后面的内容而被半隐藏，并且带有文本的图像 div 的高度崩溃了

{% assign selectedImage = section.settings.image %}
{% assign layout = section.settings.layout %}

<div class='image-with-text'>
  <div class='container'>
    <div class='wrapper {% if layout == "image-first" %} image-first {% endif %}'>
      <div class='content-container'>
        <div class='content-inner'>
          <h3 class='title'>
            {{ section.settings.title }}
          </h3>
          <div class='text-container'>
            {{ section.settings.content }}
          </div>
          <div class='button-container'>
            <a href='{{ section.settings.button-link }}' class='button'>{{ section.settings.button-text }}</a>
          </div>
        </div>
      </div>
      <div class="image-container">
        {% if selectedImage %}
          <img
              src="{{ selectedImage.src | img_url: '600x600' }}"
              srcset="{{ selectedImage.src | img_url: '400x400' }} 400w,
              {{ selectedImage.src | img_url: '800x800' }} 800w,
              {{ selectedImage.src | img_url: '1200x1200' }} 1200w"
              sizes="(max-width: 400px) 100vw,
             (max-width: 800px) 50vw,
             33.3vw"
              alt="{{ selectedImage.alt | escape }}"
          />
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% style %}
  /**
  text with image and accent dots
  */
  .image-with-text {
    position: relative;
    display: block;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
  }

  .image-with-text .wrapper {
    display: inline-flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }

  .image-with-text .image-container,
  .image-with-text .content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .image-with-text .content-container {
    display: flex; /* Use flex layout for vertical alignment */
    flex-direction: column; /* Stack content vertically */
  }


  .wrapper.image-first {
    flex-direction: row-reverse;
  }


  .image-with-text .image-container img {
    width: 100%;
    min-height: calc(100% + (160px * 3));
    object-fit: cover;
  }

  .image-with-text .content-container .content-inner {
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px;
    transform: translate(-120px, 160px);
    background-color: white;
  }

  .image-with-text .image-first .content-container .content-inner {
    transform: translate(120px, 160px);
  }

  .image-with-text .content-inner {
    align-self: stretch;
    height: auto;
  }

  .image-with-text .content-inner h3{
    margin-top: 0;
    font-size: 64px;
    margin-bottom: 0;
  }
{% endstyle %}

{% schema %}
{
  "name": "Accented Text with Image",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-with-text.settings.image.label"
    },

    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Image with text"
    },

    {
      "type": "richtext",
      "id": "content",
      "label": "Content",
      "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum vestibulum ante, vel ultrices ante cursus eget. Vivamus finibus turpis eu quam feugiat, at convallis sapien finibus. Suspendisse potenti. Mauris nisl diam, accumsan fringilla nisi vitae, pharetra blandit erat. Nam purus leo, posuere sed viverra ut, rutrum sit amet justo.</p>"
    },

    {
      "type": "url",
      "id": "button-link",
      "label": "Button Link"
    },

    {
      "type": "text",
      "id": "button-text",
      "label": "Button Text",
      "default": "Read More"
    },


    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image-first",
          "label": "Image first"
        },
        {
          "value": "text-first",
          "label": "Text first"
        }
      ],
      "default": "image-first",
      "label": "Layout",
      "info": "Place image first or second"
    },
    {
      "type": "select",
      "id": "content_layout",
      "options": [
        {
          "value": "no-overlap",
          "label": "t:sections.image-with-text.settings.content_layout.options__1.label"
        },
        {
          "value": "overlap",
          "label": "t:sections.image-with-text.settings.content_layout.options__2.label"
        }
      ],
      "default": "no-overlap",
      "label": "t:sections.image-with-text.settings.content_layout.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Image with text",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-with-text.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.image-with-text.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-with-text.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "button",
      "name": "t:sections.image-with-text.blocks.button.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
          "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "default": false,
          "label": "t:sections.image-with-text.blocks.button.settings.outline_button.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Accented Text With Image",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

变体应该看起来像

但是这不会发生

放置图像按预期工作，但是当我尝试将其设置为第二个时，它会按描述折叠。

我已经尝试了 CSS 中我能想到的所有内容，不幸的是，这似乎依赖于顺序，图像可以实际设置高度。

我宁愿不使用任何黑客方法来让它工作

Answer 1

您在“文本优先”布局中遇到的图像高度折叠问题与您使用 Flexbox 的方式和元素的顺序有关。要在不使用任何 hacky 方法的情况下实现所需的布局，您可以修改 Liquid 和 CSS 代码，如下所示：

• 将图像和内容包装在单独的容器中。
• 对两个容器使用 Flexbox 以保持其高度。
• 使用 Flexbox 的 order 属性调整“文本优先”布局中元素的顺序。

这是修改后的 Liquid 和 CSS 代码：

{% assign selectedImage = section.settings.image %}
{% assign layout = section.settings.layout %}

<div class='image-with-text'>
  <div class='container'>
    <div class='wrapper {% if layout == "image-first" %} image-first {% endif %}'>
      <div class="content-container">
        <div class='content-inner'>
          <h3 class='title'>
            {{ section.settings.title }}
          </h3>
          <div class='text-container'>
            {{ section.settings.content }}
          </div>
          <div class='button-container'>
            <a href='{{ section.settings.button-link }}' class='button'>{{ section.settings.button-text }}</a>
          </div>
        </div>
      </div>
      <div class="image-container">
        {% if selectedImage %}
          <img
            src="{{ selectedImage.src | img_url: '600x600' }}"
            srcset="{{ selectedImage.src | img_url: '400x400' }} 400w,
                    {{ selectedImage.src | img_url: '800x800' }} 800w,
                    {{ selectedImage.src | img_url: '1200x1200' }} 1200w"
            sizes="(max-width: 400px) 100vw,
                   (max-width: 800px) 50vw,
                   33.3vw"
            alt="{{ selectedImage.alt | escape }}"
          />
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% style %}
  /**
  text with image and accent dots
  */
  .image-with-text {
    position: relative;
    display: block;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
  }

  .image-with-text .wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }

  .image-with-text .image-container,
  .image-with-text .content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .image-with-text .content-container {
    display: flex;
    flex-direction: column;
  }

  .wrapper.image-first {
    flex-direction: row-reverse;
  }

  .image-with-text .image-container img {
    width: 100%;
    min-height: calc(100% + (160px * 3));
    object-fit: cover;
  }

  .image-with-text .content-container .content-inner {
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px;
    background-color: white;
  }

  .image-with-text .image-first .content-container .content-inner {
    transform: translate(120px, 160px);
  }

  .image-with-text .content-inner {
    align-self: stretch;
    height: auto;
  }

  .image-with-text .content-inner h3{
    margin-top: 0;
    font-size: 64px;
    margin-bottom: 0;
  }
{% endstyle %}