Solved

How can I add an image to a text box in Dawn?

FOP
Explorer
114 0 17

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..Screen Shot 2022-09-22 at 18.42.33.png

Accepted Solutions (2)

Kani
Shopify Partner
468 125 225

This is an accepted solution.

Hi @FOP 

 

Kani_3-1663839725202.png

 

Kani_0-1663839401545.png

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

Kani_1-1663839575203.png

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_2-1663839692642.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

View solution in original post

Kani
Shopify Partner
468 125 225

This is an 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;
}

 

Kani_0-1663897425446.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

View solution in original post

Replies 11 (11)

Kani
Shopify Partner
468 125 225

This is an accepted solution.

Hi @FOP 

 

Kani_3-1663839725202.png

 

Kani_0-1663839401545.png

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

Kani_1-1663839575203.png

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_2-1663839692642.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
FOP
Explorer
114 0 17

@Kani Thank you, I have it working 🙂

Kani
Shopify Partner
468 125 225

Did you try it? you will get an image selector

Kani_0-1663840824503.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
FOP
Explorer
114 0 17

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?

Screen Shot 2022-09-22 at 22.58.13.png

Kani
Shopify Partner
468 125 225

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

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
FOP
Explorer
114 0 17

@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
Shopify Partner
468 125 225

I mean I think you have changed this

Kani_0-1663853791349.png

 

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

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
FOP
Explorer
114 0 17

@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
Shopify Partner
468 125 225

This is an 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;
}

 

Kani_0-1663897425446.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
FOP
Explorer
114 0 17

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

Elli2
Tourist
5 0 1

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!