Section template

PetStuff
New Member
1 0 0

Hello,

I have a small section script that creates a section with the image-to-text theme. My problem is that my image and text are aligned top to bottom, and I want it to be left to right. So you have text on the left side, and an image on the corresponding right side and vice versa. At the moment, the image is at the top, and the text is at the bottom of the page. I have tried looking over the code, and it seems as If the images should align left to right. 

I am a complete beginner in liquid, and I have found the code on Github. I hope that there is someone who has a solution for this.

<section class="image-with-text">
  {% capture image_layout %}
    <div class="image-with-text__image">
      {% if section.settings.image != blank %}
        {% include 'responsive-image' with
          image: section.settings.image,
          max_width: 545,
          max_height: 545
        %}
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
    </div>
  {% endcapture %}

  {% if section.settings.layout == 'left' %}
    {{ image_layout }}
  {% endif %}

  <div class="image-with-text__text">
    {% if section.settings.title != blank %}
      <h2>{{ section.settings.title | escape }}</h2>
    {% endif %}
    {% if section.settings.text != blank %}
      <div>{{ section.settings.text }}</div>
    {% endif %}
    {% if section.settings.button_label != blank and section.settings.button_link != blank %}
      <a href="{{ section.settings.button_link }}">
        {{ section.settings.button_label | escape }}
      </a>
    {% endif %}
  </div>

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

{% schema %}
  {
    "name": "Image with text",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Image alignment",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<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>"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "category": "Image"
      }
    ]
  }
{% endschema %}


{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

0 Likes