Create an 'Image with text' section in Ella

[Gembo]

Hi guys, 

I have been playing with a few templates but the one I have settled on does not seem to have an 'Image with Text' section.
Ideally I would like it to be a 'Video plus Text' block if possible?
Any pointers on how I would go about creating one using coding?

I have looked and looked but can't find any solution. 

Thanks in advanced

[KetanKumar]

@Gembo 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Gembo]

Hiya Ketan.

Thanks for replying.
my url is : gembo-tique.myshopify.com.

I had a play on one site that had a 'Video plus product' section too which would be cool to recreate at some point too. (see attached image with notes).
Mega appreciative of your help.

.

[Gembo]

If you need any more info then just let me know. 😛

[KetanKumar]

@Gembo 

thanks but your store is password protect 

[Gembo]

Doh! Thought I had opened it up.  Its open now

[Gembo]

Hiya KetanKumar.

I understand how busy you must be and don't  mean to bug you but just wondering if you had any joy on checking out the coding? 

Thank you

[KetanKumar]

@Gembo 

no rush

thanks for update  

i can see now image text section at home page 

[Gembo]

Hiya.

That which I have on homepage at the moment is just a banner. 
It only lets me upload videos from youtube and no autoplay and cant resize video.
Plus when you click the play button, it opens a video in a pop up window.

The image i sent above has the video auto-playing to the left, no controls or sound which is cool, plus a static product image with text and link to the right.
 with a title listing at the top.
Ideally this is what I would love to recreate or as close as possible..

Thanks

[KetanKumar]

@Gembo 

Yes its possible to custom code

[Gembo]

 Cool. I guess it would be easier to custom code that block as opposed to creating a whole new code.

Any chance you could get that code over to me? if so that would be awesome.

Thanks as always

[KetanKumar]

@Gembo 

yes please create new section code below image with text code new section file name is image-with-text

{%- comment -%}
  This is a required section for the Shopify Theme Store.
  It is available when you add the "Image with text" section in the theme editor.

  Theme Store required settings
  - Image
  - Heading: title of the block
  - Text: description of the block

  Theme Store optional settings
  - Button label: label associated with the button
  - Button link: link of the button
{%- endcomment -%}

<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 %}

[Gembo]

Awesome.

Thanks for the code.
I think i'm doing something wrong though.
I made new section in 'sections', pasted code and boom. The block appeared but with an error.


Thank you as always

[KetanKumar]

@Gembo 

oh sorry for that issue its required some custom please sent pm detail

[Gembo]

@KetanKumar 

Cool. Appreciate all the help.

PM sent 🙂

[KetanKumar]

@Gembo 

great thanks 

its  my pleasure to help us 

[Denzel]

@KetanKumar 

What's the update on this code? This is how it shows now 

https://dmagt14qm5ll4g5p-57458458667.shopifypreview.com

pw: mawpam

[KetanKumar]

@Denzel 

can you please create new snippet name responsive-image

[Denzel]

@KetanKumar 

 

[KetanKumar]

@Denzel 

can you update again image with text section code

{%- comment -%}
  This is a required section for the Shopify Theme Store.
  It is available when you add the "Image with text" section in the theme editor.

  Theme Store required settings
  - Image
  - Heading: title of the block
  - Text: description of the block

  Theme Store optional settings
  - Button label: label associated with the button
  - Button link: link of the button
{%- endcomment -%}

<section class="image-with-text">
  {% capture image_layout %}
    <div class="image-with-text__image">
      {% if section.settings.image != blank %}
        <img src="{{section.settings.image | img_url:'master'}}" alt="{{ shop.name }}" itemprop="logo">
      {% 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 %}

[KetanKumar]

@Denzel 
add this css 

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media (min-width: 768px) {
section.image-with-text {
    display: flex;
    align-items: center;
    padding: 0px 55px;
    justify-content: center;
    flex-wrap: wrap;
}

.image-with-text__image {
    flex: 0 0 50%;
}

.image-with-text__text {
    flex: 0 0 50%;
    padding-left: 30px;
}

.image-with-text__image img {
    width: 100%;
}
}
@media (min-width: 768px) {
section.image-with-text { padding: 0px 15px;}
.image-with-text__image, .image-with-text__text {
    flex: 0 0 100%;
}
.image-with-text__text { padding-left: 0px;}
}

[Denzel]

@KetanKumar 

unfortunately that isn't working either..... the image is extremely big and the text is still at the bottom 

[KetanKumar]

@Denzel 

yes, please update this css code

@media (min-width: 768px) {
section.image-with-text {
    display: flex;
    align-items: center;
    padding: 0px 55px;
    justify-content: center;
    flex-wrap: wrap;
}

.image-with-text__image {
    flex: 0 0 50%;
}

.image-with-text__text {
    flex: 0 0 50%;
    padding-left: 30px;
}

.image-with-text__image img {
    width: 100%;
}
}
@media (max-width: 768px) {
section.image-with-text { padding: 0px 15px;}
.image-with-text__image, .image-with-text__text {
    flex: 0 0 100%;
}
.image-with-text__text { padding-left: 0px;}
}