How to add an Image to a text box - DAWN

[FOP]

Hi There,
Not sure if anyone can help.  I would like to add our personalised signature to the bottom of a text box on our home page (we have used an image with text section as we also need our logo displayed).  I have added a screenshot and circled where we would like our custom signature image to go..

[Kani · Accepted solution]

Hi @FOP 

You should edit your code.

1: Online store > themes > Actions > Edit code > Sections > image-with-text.liquid

2: add this code before '{%- when 'button' -%}'

{%- when 'image' -%}
   <img src="{{ block.settings.image | image_url: width: 500 }}">

3：

add this code at last of blocks,

before code

'

],
"presets": [

'

,
{
      "type": "image",
      "name": "image",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        }
      ]
}

[Kani · Accepted solution]

Hi @FOP 

You should edit your code.

1: Online store > themes > Actions > Edit code > Sections > image-with-text.liquid

2: add this code before '{%- when 'button' -%}'

{%- when 'image' -%}
   <img src="{{ block.settings.image | image_url: width: 500 }}">

3：

add this code at last of blocks,

before code

'

],
"presets": [

'

,
{
      "type": "image",
      "name": "image",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        }
      ]
}

[FOP]

@Kani Thank you, I have it working 🙂

[Kani]

Did you try it? you will get an image selector

[FOP]

Hi @Kani 
I have just noticed that having the image below the text makes the logo on the left cut off, do you know anyway to fix this?

[Kani]

Obviously you changed the image width setting. Please check your settings at first.

[FOP]

@Kani I did play with the size in the below code although even at the default 500 the image is still cut off, do you know how I could fix this?

{%- when 'image' -%} <img src="{{ block.settings.image | image_url: width: 500 }}">

[Kani]

I mean I think you have changed this

If you want to help you with debug, you should share your store url、your settings etc. I can't fix issues by imagination.

[FOP]

@Kani i haven’t, it’s the smallest option on size. I’ve also tried uploading a smaller image but it just makes it blurry with the same issue.  Although, it works fine on the mobile site.

if I remove the image from below the text it’s also okay.

www.thefreedomofpeach.com.au

ahceep 

[Kani · Accepted solution]

Hi @FOP 

Add it at last of base.css. Please Accept this as Solution too 🙂

.section-template--14860765823108__16632434735dbb724e-padding .media>img {
    object-fit: contain!important;
}

[FOP]

@Kani worked !!! Thank You!!!!

[Elli2]

Hi Kani,

I face the same issue. We use the impulse theme though. Can you help me with adding a picture into a text box as well? 

Thank you so much!