Custom module {% scope_css %} stopped working

[jestlinbaum]

I have a module that I’ve been using on multiple sites that has worked fine for a long time.

It’s a module created to be a flex container with one side having text and one side having an image.

For the image side there is a choice module for “Image Style” to be static or background.

Static = just placing the image inside the div. This works fine.

Background= making the image the background of the div.

When background is selected it gives the div an additional class of “background”

Then I am target that div with css:

{% require_css %}
<style>
{% scope_css %}

.it-flex .img-block.background {
background-image: url({{ module.side_image.src }});
background-size: cover!important;
background-position: center center!important;
background-repeat: no-repeat!important;
}

{% end_scope_css %}
</style>
{% end_require_css %}

The issue is that when I use the background option, the css is not outputting anything.

If I remove the background-image property from the css. It outputs the rest of the css.

When I move the block of css out of {% scope_css %} and put it into the module.css section, it outputs but the URL is missing.

The static choice works fine. and {{ module.side_image.src|pprint }} outputs the url string.

As I said before, I’ve used this method plenty of times and it simply stopped working yesterday (7/16/24).

Is there a reason why this would stop working?

Full module code posted below. Any insight is greatly appreciated!

{% require_css %}
 <style>
 {% scope_css %}

 .it-flex {
 background: {{ module.background_color.color }};
 color: {{ module.text_color.color }};
 align-items: center;
 }

 .it-flex .img-block.background {
 background: url({{ module.side_image.src }});
 background-size: cover!important;
 background-position: center center!important;
 background-repeat: no-repeat!important;
 }

 {% end_scope_css %}
 </style>
{% end_require_css %}

<section class="flexer it-flex {% if module.layout == "row-reverse" %}reverse{% endif %}">
 <div class="flexer img-block {{ module.image_style }}">
 {{ module.side_image.src|pprint }}
 {% if module.image_style == 'static'%}
 {% if module.side_image.src %}
 {% set sizeAttrs = 'width="{{ module.side_image.width|escape_attr }}" height="{{ module.side_image.height|escape_attr }}"' %}
 {% if module.side_image.size_type == 'auto' %}
 {% set sizeAttrs = 'width="{{ module.side_image.width|escape_attr }}" height="{{ module.side_image.height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% elif module.side_image.size_type == 'auto_custom_max' %}
 {% set sizeAttrs = 'width="{{ module.side_image.max_width|escape_attr }}" height="{{ module.side_image.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %}
 {% endif %}
 {% set loadingAttr = module.side_image.loading != 'disabled' ? 'loading="{{ module.side_image.loading|escape_attr }}"' : '' %}
 <img src="{{ module.side_image.src|escape_url }}" alt="{{ module.side_image.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}>

 {% endif %}
 {% endif %}

 </div>
 <div class="flexer content-block">
 <div class="copy-wrap">
 {{ module.side_copy }}
 </div>
 </div>
</section>

[Jaycee_Lewis]

Hi @jestlinbaum Thanks for your question. And thank you for including your details. I’d like to invite some of our amazing community champions to the conversation — @alyssamwilie @Jnix284 @Stephanie-OG, do you have any ind=sight you can share with @jestlinbaum?

Thank you very much for taking a look! — Jaycee

[jestlinbaum]

Added single quotes and its working:

Not sure why it’s worked for so long without them. Feel free to close this thread. Thanks @Jaycee_Lewis for taking the time.

background: url('{{ module.test_image.src|escape_url }}');

[Jaycee_Lewis]

Hey, @jestlinbaum Thanks for taking the time to let us know what worked! — Jaycee

[jestlinbaum]

I made a simple module with only an image feild to simply test the background image property.

{% require_css %}
 <style>
 {% scope_css %}

 .background-test {
 height: 200px;
 background: url({{ module.test_image.src|escape_url }});
 background-size: cover!important;
 background-position: center center!important;
 background-repeat: no-repeat!important;
 }

 {% end_scope_css %}
 </style>
{% end_require_css %}

<div class="background-test">
</div>

This did not work.

This does work:

{% require_css %}
 <style>
 {% scope_css %}

 .background-test {
 height: 200px;
 background: red;
 }

 {% end_scope_css %}
 </style>
{% end_require_css %}

<div class="background-test">
</div>

This works fine: