How can I get the image-with-text.liquid to accept<br/> in the description?

[Cshor]

as the title suggests I am trying to insert line breaks in a description of image with text, this is for an about page. now I have tried <br> and <br/> but neither work as it just displays in raw text. I want to remove the escape for this section as it would make my life a lot easier, I tried telling the stackable-text.liquid as that is where I tracked the description down too... and tell the description | raw. but apparently raw is not recognized in shopify liquid. am I looking in the raw place? essentially I am trying to be like Hello I am blah, and I am a content creator and furniture maker. <br/> <br/> and new paragraph. but it won't let me. I am using the beyond theme, though I think that is based on the dawn theme. not sure.

[Dan-From-Ryviu]

You could try to add </br> in content of text to check if it works.  

[mIkejohne66]

<p>
To resolve the issue with line breaks in Shopify's Liquid template, you can try using the
<code>{{ your_text_variable | newline_to_br }}</code> filter, which is commonly used to convert newlines
in Liquid variables into <code>&lt;br&gt;</code> tags. Here’s how you can adjust the description for the
<code>image-with-text.liquid</code>:
</p>

<p>
1. Find the line in your <code>image-with-text.liquid</code> file where the description is rendered.<br />
2. Replace the current rendering logic with <code>{{ section.settings.text | newline_to_br }}</code>.<br />
</p>

<p>
This method ensures that each new line in your text input will be converted into a line break, giving you
control over how paragraphs are displayed.
</p>

<p>
Read more: <a href="https://prayerstimedubai.com/">Prayer Times Dubai</a>
</p>

[Cshor]

I tried to modify the description to have the <code>{{section.settings.description | newline_to_br}}</code> however that did not work. here is the existing render:
{%-
render 'featured-content',
white_text: section.settings.white-text,
description: section.settings.description<code>{{ section.settings.description | newline_to_br }}</code>,
heading_type: section.settings.heading-type,
id: section.id,
image: section.settings.image,
image_display_type: display_type,
image_aspect_ratio: aspect_ratio,
link_text: section.settings.link-text,
link_url: section.settings.link-url,
mobile_hide_description: section.settings.mobile-hide-description,
mobile_image: section.settings.mobile-image,
mobile_image_display_type: mobile_display_type,
mobile_image_aspect_ratio: mobile_aspect_ratio,
mobile_text_alignment: section.settings.mobile-text-alignment,
mobile_overlay: section.settings.mobile-overlay,
overlap: section.settings.overlap,
overlay_style: section.settings.overlay-style,
overline: section.settings.overline,
parallax_enabled: section.settings.parallax-enabled,
sizes: '100vw',
text_style: section.settings.text-style,
text_bg_color: section.settings.text-background-color,
text_position: text_position,
text_width: section.settings.text-width,
title: section.settings.title,
text_x_alignment: section.settings.text-horizontal-alignment,
text_y_alignment: section.settings.text-vertical-alignment
-%}

in fact, when I put that in there, now the description doesn't display at all... so I have put back to:
description: section.settings.description,

[MooseDesk]

Hi @Cshor ,

Thanks for reaching out to the community. We are MooseDesk, a comprehensive Live Chat, FAQ & Helpdesk App designed to elevate your customer support experience.

It sounds like you're trying to add line breaks in a Liquid template for a Shopify theme, specifically in an image-with-text section. The issue you're encountering is that HTML tags are being escaped and displayed as raw text instead of being rendered. Let's break down the problem and explore some solutions:

1. Liquid filtering:
Instead of using `raw`, which isn't recognized in Shopify Liquid, you can try using the `newline_to_br` filter combined with the `allow_html` filter. This approach converts newline characters to `<br/>` tags and then allows the HTML to be rendered.

Try modifying your Liquid code like this:

```liquid
{{ description | newline_to_br | allow_html }}
```

2. Theme settings:
Some themes have built-in settings to allow HTML in certain fields. Check your theme's settings (usually in the theme editor) to see if there's an option to allow HTML in descriptions or text fields.

3. Custom Liquid snippet:
If the above solutions don't work, you might need to create a custom Liquid snippet to handle the line breaks. Here's an example:

```liquid
{% assign paragraphs = description | split: '<br/><br/>' %}
{% for paragraph in paragraphs %}
<p>{{ paragraph | strip | newline_to_br }}</p>
{% endfor %}
```

This snippet splits the description by double line breaks, then wraps each resulting part in a paragraph tag, converting single line breaks to `<br/>` tags.

4. JavaScript solution:
If you can't modify the Liquid templates directly, you could use JavaScript to replace the line breaks after the page loads:

```javascript
document.addEventListener('DOMContentLoaded', function() {
let descriptions = document.querySelectorAll('.your-description-class');
descriptions.forEach(function(desc) {
desc.innerHTML = desc.innerHTML.replace(/&lt;br\/&gt;/g, '<br/>');
});
});
```

Replace `.your-description-class` with the actual class or ID of your description elements.

5. Theme file location:
You mentioned looking in `stackable-text.liquid`. The correct file might be `image-with-text.liquid` or something similar, depending on your theme structure. Look for files related to sections or blocks that handle image and text combinations.

6. Theme customization:
If you're using a modified version of the Dawn theme, you might need to check how the Beyond theme has implemented these sections. Some customizations might interfere with standard Liquid filters or HTML rendering.

To troubleshoot further:

1. Check if HTML is allowed in your theme's settings for text fields.
2. Verify you're editing the correct Liquid file for your image-with-text section.
3. Try the `newline_to_br | allow_html` filter combination.
4. If that doesn't work, try implementing the custom Liquid snippet or JavaScript solution.

Remember to always backup your theme before making changes. If you're not comfortable modifying theme files, consider reaching out to the theme developer for support or hiring a Shopify expert to assist you.

If this is helpful for you, please let me know by giving MooseDesk a 'LIKE'. If your question is answered please mark this as 'SOLUTION’.

If you are looking for a customer support solution to help drive more conversion to your Shopify store, I suggest exploring MooseDesk, a FREE LiveChat, FAQ & Helpdesk App that can help your support experience easier, better, faster!

With MooseDesk, you can engage with customers through omnichannel support, manage inquiries with a robust ticket system, and provide quick responses.

• Or you can let customers resolve questions faster with in-built FAQ, Order tracking module, and more.

Once again, thank you for reading. Wishing you a great day ahead!

[Cshor]

Really appreciate the suggestions, I tried putting that into the stackable-text.liquid however it said in the liquid editor that "allow html is an unknown filter" so it did nothing. I then looked in theme editor, don't see anything in there regarding html unless it is directly related to cart which it is not. so I went into the custom liquid thing put the custom liquid inside of the content, then it said "you are not allowed to use more than one filter '{{ paragraph | strip | newline_to_br }}'" and told me to remove it. would not really like to use js if I can help it... I have this code which is the entire <div> section of the image-with-text.liquid file, I went down a rabit hole to find it in the stackable-text.liquid.:

<div
class="image-with-text--root"
data-section-id="{{ section.id }}"
data-top-border="{{ top_border }}"
data-background-color="{{ section.settings.background-color }}"
data-container-width="{{ section.settings.container-width }}"
data-spacing-above="{{ section.settings.spacing-above }}"
data-spacing-below="{{ section.settings.spacing-below }}"
{% if text_position == 'overlay' or text_position == 'bottom' %}
data-transparent-header-compatible
{% endif %}
>
{%-
render 'featured-content',
white_text: section.settings.white-text,
description: section.settings.description,
heading_type: section.settings.heading-type,
id: section.id,
image: section.settings.image,
image_display_type: display_type,
image_aspect_ratio: aspect_ratio,
link_text: section.settings.link-text,
link_url: section.settings.link-url,
mobile_hide_description: section.settings.mobile-hide-description,
mobile_image: section.settings.mobile-image,
mobile_image_display_type: mobile_display_type,
mobile_image_aspect_ratio: mobile_aspect_ratio,
mobile_text_alignment: section.settings.mobile-text-alignment,
mobile_overlay: section.settings.mobile-overlay,
overlap: section.settings.overlap,
overlay_style: section.settings.overlay-style,
overline: section.settings.overline,
parallax_enabled: section.settings.parallax-enabled,
sizes: '100vw',
text_style: section.settings.text-style,
text_bg_color: section.settings.text-background-color,
text_position: text_position,
text_width: section.settings.text-width,
title: section.settings.title,
text_x_alignment: section.settings.text-horizontal-alignment,
text_y_alignment: section.settings.text-vertical-alignment
-%}
</div>

then I found it here in the stackable-text.liquid:
{%- if description != blank -%}
<div
class="stacked-text--description"
data-item="{{ description_type }}"
{% if mobile_hide_description %}
data-mq="medium-large"
{% endif %}
{% unless settings.transitions--text %}
data-transition-item="{{ id }}"
{% endunless %}
>
{{- description -}}
</div>
{%- endif -%}

[MooseDesk]

Thank you for providing that additional context and code snippets. It's clear now that you're working with a more complex theme structure, which is common in advanced Shopify themes. Let's try to address this issue step by step:

1. First, let's focus on the `stackable-text.liquid` file, as this seems to be where the description is actually rendered. We can modify this part to allow for line breaks:

```liquid
{%- if description != blank -%}
<div class="stacked-text--description"
data-item="{{ description_type }}"
{% if mobile_hide_description %} data-mq="medium-large" {% endif %}
{% unless settings.transitions--text %} data-transition-item="{{ id }}" {% endunless %}>
{{- description | newline_to_br -}}
</div>
{%- endif -%}

```

The key change here is replacing `{{- description -}}` with `{{- description | newline_to_br -}}`. This should convert newline characters in your description to `<br>` tags.

2. If the above doesn't work, it's possible that the `description` variable is being processed or escaped somewhere before it reaches this template. In that case, we might need to look at where the `description` is being set or passed to this template.

3. Since you mentioned you're using the Beyond theme (which is based on Dawn), it's possible that there are theme-specific settings or filters being applied. Let's check the `image-with-text.liquid` file:

```liquid
<div class="image-with-text--root"
data-section-id="{{ section.id }}"
data-top-border="{{ top_border }}"
data-background-color="{{ section.settings.background-color }}"
data-container-width="{{ section.settings.container-width }}"
data-spacing-above="{{ section.settings.spacing-above }}"
data-spacing-below="{{ section.settings.spacing-below }}"
{% if text_position == 'overlay' or text_position == 'bottom' %} data-transparent-header-compatible {% endif %}>
{%- render 'featured-content',
white_text: section.settings.white-text,
description: section.settings.description | newline_to_br,
heading_type: section.settings.heading-type,
id: section.id,
image: section.settings.image,
image_display_type: display_type,
image_aspect_ratio: aspect_ratio,
link_text: section.settings.link-text,
link_url: section.settings.link-url,
mobile_hide_description: section.settings.mobile-hide-description,
mobile_image: section.settings.mobile-image,
mobile_image_display_type: mobile_display_type,
mobile_image_aspect_ratio: mobile_aspect_ratio,
mobile_text_alignment: section.settings.mobile-text-alignment,
mobile_overlay: section.settings.mobile-overlay,
overlap: section.settings.overlap,
overlay_style: section.settings.overlay-style,
overline: section.settings.overline,
parallax_enabled: section.settings.parallax-enabled,
sizes: '100vw',
text_style: section.settings.text-style,
text_bg_color: section.settings.text-background-color,
text_position: text_position,
text_width: section.settings.text-width,
title: section.settings.title,
text_x_alignment: section.settings.text-horizontal-alignment,
text_y_alignment: section.settings.text-vertical-alignment
-%}
</div>

```

In this snippet, I've added the `newline_to_br` filter to the `description` parameter:

```liquid
description: section.settings.description | newline_to_br,
```

This should apply the filter before the description is passed to the `featured-content` snippet.

4. If these changes don't work, we might need to look at the `featured-content` snippet as well, as it might be processing the description further.

5. Lastly, make sure you're entering line breaks in the actual content. In the Shopify admin, when you're editing the section content, press Enter where you want line breaks to appear, rather than typing `<br>` or `<br/>`.

If none of these solutions work, it might be worth reaching out to the theme developer for Beyond, as there could be theme-specific handling of text that we're not seeing in these snippets.

Remember to always back up your theme before making changes, and test thoroughly on a development or staging version of your store before applying changes to your live site.